沒有onScroll的滾動速度更快？

閱讀this article後，我感到非常興奮，關於更快的滾動效果。我去實現Warry的方法，看看我能發現任何性能上的差異 - 相比，使用滾動事件偵聽器：沒有onScroll的滾動速度更快？

從文章

window.addEventListener('scroll', function() { 
    console.log('Scrolling: ' + window.pageYOffset); 
});

代碼：

function loop() { 
    if (lastPosition == window.pageYOffset) { 
     requestAnimationFrame(loop); 
     return false; 
    } else lastPosition = window.pageYOffset; 

    console.log('Scrolling: ' + window.pageYOffset); 
    // make sticky calculations... 

    requestAnimationFrame(loop); 
} 
loop(); // start loop

代碼輸出相同的這兩件（Y）抵消並且似乎在性能方面是相當的。所以我的問題是：文章是否正確？

另外，如何適合這張圖片？我知道它告訴瀏覽器它希望執行重新繪製。或者......是固定位置的簡單方法嗎？我對這個主題感興趣，因爲我正在爲粘性元素的插件工作。

任何信息或建議表示讚賞！

來源

2016-10-25 JasonK

「*似乎是等效的表現*」 - 你是如何測量的？ – Bergi

這一點是關於更有效的*效果*。如果您只是登錄到控制檯，則不會感覺到差異（除了可能的不同號碼或日誌）。 – Bergi

每個勾號的輸出結果都是一樣的。我還在Chrome的DevTools上切換了所有渲染功能（Paint flashing，圖層邊框，FPS表和滾動性能問題），以查看粘性元素的執行情況。沒有任何明顯的差異。我沒有爲此寫測試;只是好奇別人能告訴我這個話題。 – JasonK

由於滾動事件可以以高速率觸發，因此事件處理程序不應該執行計算上昂貴的操作，如DOM修改。相反，建議使用requestAnimationFrame，setTimeout或customEvent來限制事件。

不僅爲您的動畫使用requestAnimationFrame，而且以正確的方式使用requestAnimationFrame也很重要。 - HTML5ROCKS

另見https://developer.mozilla.org/en-US/docs/Web/Events/scroll

這是一個不錯的一段代碼，以獲得正確的瀏覽器前綴。如果不受支持，我們將回退到setTimeout(function(){}, 0)。

var requestAnimationFrame = window.requestAnimationFrame 
    || window.webkitRequestAnimationFrame 
    || window.mozRequestAnimationFrame 
    || window.msRequestAnimationFrame 
    || window.oRequestAnimationFrame 
    || function(callback){ setTimeout(callback, 0) }; 

// Usage 
window.addEventListener('scroll', function() { 
    requestAnimationFrame(this.scroll); // call scroll event handler 
});

來源

2016-10-27 13:54:16 JasonK

沒有onScroll的滾動速度更快？

回答

相關問題