jQuery Parallax/Scroll Events性能

Question

这个问题与视差的关系要小于滚动事件的问题.我对项目的首要关注是视差滚动效果是平滑而不是紧张.

那么我的问题是,某些属性是否比其他属性更好地动画/滚动？例如,背景位置比滚动时调整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(这也需要在更多实例中重绘页面而不是使用a transform).

• will-change是一个刚刚被浏览器选中的新属性.您基本上可以设置可能更改的属性列表,以便浏览器可以提前优化属性更改.

• requestAnimationFrame拥有强大的polyfill和良好的现代浏览器支持.这是一种更好的方式来平滑地动画元素,而不会创建大量的"块",因为浏览器将尽可能地渲染.