当基于scrollTop的衰落元素性能下降

看到有这种效果的afew网站，但它似乎降低了我的尝试中的帧率。我基本上想要更改用户滚动的元素的不透明度。当基于scrollTop的衰落元素性能下降

$(window).scroll(function(event){ 
     $("#responsive-slider-with-blocks-1").css("opacity", 1 - $(window).scrollTop()/1500); 
     }

有没有更好的方法来做到这一点？（只是CSS的王牌，但不可能）。

我真的不是绑定到滚动事件的粉丝。

编辑：

由于改变覆盖整个视口可为什么帧率下降这么多的元素上的不透明度。会褪色的黑色div覆盖元素可能不会降低帧率这么多？

来源

2017-08-24 Martyn Ball

滚动事件发生得这么快，你是对的，每一个小小的优化都会有所帮助。该docs scroll事件具有沿着这些线路的建议：

由于滚动事件并且可以在高射速，事件处理程序不应该执行计算昂贵的操作，如DOM的修改。相反，它建议使用节流requestAnimationFrame，setTimeout的或自定义事件的事件......

可以适应他们那里您的用途的例子（我想离开了jQuery的故意删除开销）：

var last_known_scroll_position = 0; 
var ticking = false; 

var responsiveSlider = document.getElementById('responsive-slider-with-blocks-1'); 
function doSomething(scroll_pos) { 
    responsiveSlider.style.opacity = 1 - scroll_pos/1500; 
} 

window.addEventListener('scroll', function(e) { 
    last_known_scroll_position = window.scrollY; 
    if (!ticking) { 
    window.requestAnimationFrame(function() { 
     doSomething(last_known_scroll_position); 
     ticking = false; 
    }); 
    } 
    ticking = true; 
});

这当然较长，并有一些全球范围内食堂的考虑，但这样的事情可能会让你正在寻找的性能差异。

来源

2017-08-24 11:35:49 arbuthnott

谢谢，我总是尽量避免使用jQuery，但我工作的地方似乎喜欢它......我觉得它毫无意义。我会调整你上面提供的内容！ –

我喜欢jquery的可读性和简洁性，但是这正是那种让它脱颖而出的情况！ – arbuthnott

嗯，tbf我做的任何小插件我使用ES6并编译它。假设它可能有用，但我尽量避免使用它，如果可以的话。 –

滚动事件我相信会在滚动过程中经常触发。当触发滚动事件时，jQuery需要根据选择器查找DOM元素。这个操作本身非常昂贵。

由于需要处理更多的像素，因此更改不透明度会变得更糟。

将代码移动到使用jQuery选择器滚动事件处理程序外部来选择DOM。这样你可以避免每次滚动事件触发jQuery查找DOM元素。
不透明度发生变化时，需要计算减少元素大小以减少像素数。
在特定时间间隔更改不透明度有助于减少浏览器在滚动操作过程中需要执行的绘制操作次数。因此，每次事件触发时，不要更改不透明度，而要等到某个时间过去，然后更改不透明度。

来源

2017-08-24 11:35:15

当基于scrollTop的衰落元素性能下降

回答

相关问题