jQuery 视差/滚动事件性能

Question

这个问题与视差有关，而不是与滚动事件有关。我对我的项目最关心的是视差滚动效果是平滑的而不是紧张的。

那么我的问题是，某些属性的动画/滚动效果是否比其他属性更好？例如，background-position 是否比在滚动时调整 margin-top 更好。

Answer 1

我不确定某些属性在制作动画时是否会比其他属性产生更少的开销，但是如果有人发布有关该主题的一些好的信息，我会非常感兴趣。话虽如此，我确实知道一些有助于提高性能的事情。

设置position : absolute 会从页面的常规流程中移除元素，因此在设置动画时不需要重新绘制整个页面。 position : relative 将强制重绘整个页面，因为祖先和后代元素可能会受到影响。

此外，您可以限制scroll 事件并仍然达到 30fps：

var scroll_ok = true;
setInterval(function () {
    scroll_ok = true;
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance
$(window).bind('scroll', function () {
    if (scroll_ok === true) {
        scroll_ok = false;
        //now run your code to animate with respect to scroll
    }
});

更新 :: 2014-08-26

自从本文最初编写以来，情况发生了变化。一些简短的说明：

• 现代浏览器现在尝试使用 GPU 加速绘制给定一组特定属性的元素（opacity 和 transform 不在我的脑海中）。与top/left 等其他属性相比，使用这些属性可以大大提高性能（与使用transform 相比，这也需要在更多情况下重绘页面）。

• will-change 是一个刚刚被浏览器接受的新属性。你基本上可以设置一个可能发生变化的属性列表，这样浏览器就可以提前优化属性变化。

• requestAnimationFrame 具有强大的 polyfill 和良好的现代浏览器支持。这是一种更好的方式来平滑地为元素设置动画，而不会创建大量的“块”，因为浏览器会尽可能地呈现。