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和良好的現代瀏覽器支持。這是一種更好的方式來平滑地動畫元素，而不會像瀏覽器那樣創建大量的「塊」。