没有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的滚动速度更快？

回答

相关问题