jQuery视差/滚动事件性能

Question

这个问题与视差相比不如滚动事件。我对我的项目的首要关注是视差滚动效果平滑而不紧张。

我的问题是，做某些属性动画/滚动比其他人更好？例如，背景位置比滚动上调整页边距更好。

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年8月26日

事情已经改变，因为这原本写的。几个简单的音符：

• 现代浏览器现在试图GPU加速给定一组特定的属性（opacity和transform把我的头顶部）元素的绘画。使用这些属性可以大大提高性能，而不是像top/left（在使用transform时需要重绘页面的实例）。

• will-change是刚刚被浏览器拿起的新属性。基本上可以设置可能会更改的属性列表，以便浏览器可以提前优化属性更改。

• ​​有一个健壮的polyfill和良好的现代浏览器支持。这是一种更好的方式来平滑地动画元素，而不会像浏览器那样创建大量的“块”。