Question

在阅读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如何适应这张照片？我知道它告诉浏览器它希望执行重新绘制。或者...位置固定的方式去了吗？我对这个主题感兴趣，因为我正在处理粘性元素的插件。

任何信息或建议表示赞赏！

Answer 1

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

不仅要为您的动画使用requestAnimationFrame，还要以正确的方式使用它。 - 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
});

没有onScroll更快滚动？

1 个答案: