没有 onScroll 的滚动速度更快?

Faster scrolling without onScroll?

阅读 this article 更快的滚动效果后,我感到非常兴奋。我开始实施 Warry 的方法,看看我是否能发现性能上的任何差异 - 与使用滚动事件侦听器相比:

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) 偏移量,并且在性能方面似乎是等效的。所以我的问题是:这篇文章是对的吗?

还有,requestAnimationFrame在这张图里怎么配?我知道它告诉浏览器它希望执行重绘。或者......位置固定只是要走的路吗?我对这个话题很感兴趣,因为我正在为粘性元素开发一个插件。

如有任何信息或建议,我们将不胜感激!

由于滚动事件可以高速触发,因此事件处理程序不应执行计算量大的操作,例如 DOM 修改。相反,建议使用 requestAnimationFrame、setTimeout 或 customEvent 来限制事件。

It’s important to not only use requestAnimationFrame for your animations, but also to use it in the right way. - html5rocks

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

这是一段不错的代码,可以获取正确的浏览器前缀。如果 requestAnimationFrame 不受支持,我们将退回到 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
});