基于scrollTop的衰落单元性能下降

Question

看到有这种效果的新网站，但在我的尝试中，它似乎放弃了框架。我基本上想改变一个元素的不透明度，用户滚动的越多。

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

有更好的方法吗？(只是CSS而已，但不可能)。

我真的不喜欢绑定到滚动事件。

编辑：

由于更改了覆盖整个视口的元素的不透明度，可能是框架下降这么多的原因。在覆盖元素的黑色div中褪色可能不会使框架下降那么多吗？

Answer 1

滚动事件是如此之快，你是对的，每一个小的优化都会有帮助。滚动事件的文档有这样的建议：

因为滚动事件可以以很高的速度触发，所以事件处理程序不应该执行计算开销很大的操作，比如DOM修改。相反，建议使用requestAnimationFrame、setTimeout或customEvent.

您可以根据您的目的调整它们的示例(为了消除开销，我试图省略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;
});

这当然是更长的时间，并且有一些全局范围混乱需要考虑，但类似的事情可能会使您正在寻找的性能差异。

Answer 2

滚动事件，我相信会在滚动过程中经常触发。当触发滚动事件时，jQuery需要根据选择器找到DOM元素。单是这次手术就相当昂贵。

由于需要处理更多的像素，更改不透明度会使其更糟。

• 使用jQuery选择器在滚动事件处理程序外移动代码以选择DOM。这样，您就可以避免每次滚动事件触发时jQuery查找DOM元素。
• 当不透明度改变时，需要计算元素的限制大小以减少像素数。
• 在特定时间间隔更改不透明度有助于减少浏览器在滚动操作期间需要执行的绘制操作的数量。因此，与其每次事件触发时更改不透明度，不如等到一定时间过去后再更改不透明度。