Question

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

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

有更好的方法吗？（将是ace只是CSS，但不可能）。

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

编辑：

由于更改覆盖整个视口的元素的不透明度，因此帧速率会下降太多。覆盖元素的黑色div会消失这么多吗？

Answer 1

滚动事件如此之快，你是对的，每一个小优化都会有所帮助。滚动事件的docs有以下建议：

由于滚动事件可以以高速率触发，因此事件处理程序不应执行计算上昂贵的操作，例如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元素。
限制元素的大小以减少不透明度变化时需要计算的像素数。
在特定时间间隔更改不透明度有助于减少浏览器在滚动操作期间需要执行的绘制操作数。因此，不是每次事件发生时都改变不透明度，而是等到某个时间过去，然后改变不透明度。

基于scrollTop

2 个答案: