5
A
回答
11
我不確定某些屬性是否在創建動畫時比其他屬性創造的開銷更小,但如果有人發佈關於該主題的一些好信息,我會非常感興趣。這就是說我知道一些可以幫助表演的東西。
設置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和良好的現代瀏覽器支持。這是一種更好的方式來平滑地動畫元素,而不會像瀏覽器那樣創建大量的「塊」。
相關問題
- 1. 視差滾動問題(jQuery)
- 2. jQuery視差滾動卡住
- 3. DataGrid滾動性能差
- 4. 視差滾動
- 5. 桌面視圖內滾動視圖性能差ios
- 6. jQuery滾動事件
- 7. jQuery - 滾動事件
- 8. jQuery滾動事件
- 9. jQuery滾動事件不能與部分
- 10. 視差滾動SpriteKit
- 11. 視差滾動scrollTop
- 12. 使用jquery進行視差滾動
- 13. 視差滾動功能不起作用
- 14. UI網格縱向滾動性能差
- 15. 抖動視差滾動
- 16. 緩動的視差滾動
- 17. jQuery滾動事件不斷觸發滾動功能
- 18. 表視圖滾動事件
- 19. 優化具有視差效果的滾動性能
- 20. 沒有滾動條的視差滾動
- 21. jQuery滾動事件行爲
- 22. 水平視差滾動
- 23. 視差滾動問題
- 24. 水平視差滾動
- 25. 視差滾動背景recyclerview
- 26. 視差滾動平滑
- 27. 視差滾動的Cocos2D
- 28. 視差滾動文本Superscrollorama
- 29. 滾動垂直視差
- 30. 針對滾動路徑/視差的jquery插件建議
啊,謝謝!我一定會利用滾動限制。可以利用價值觀來看看這個項目最適合什麼。另一個技巧,儘管現在廣爲人知,但使用「inview」插件,因此嚴格限制了在任何給定點上動畫元素的數量。 – 2012-01-18 18:48:05
我創建了一個jQuery插件,可以在某些參數中設置動畫元素。 'scroll'事件處理程序檢查'viewport'是否在適當的位置以動畫元素,如果它是動畫的,否則不是。這與檢查當前滾動位置是否在爲元素設置的範圍內一樣簡單。 – Jasper 2012-01-18 19:03:30