scroll 滚动事件节流、requestAnimationFrame、性能优化

一、scroll 滚动事件

由于滚动事件可以高速触发，因此事件处理程序不应执行计算成本高的操作，例如 DOM 修改。 相反，建议使用 requestAnimationFrame()、setTimeout() 或 CustomEvent 来优化事件，如下所示。

  // 使用 requestAnimationFrame 节流
  let lastKnownScrollPosition = 0;
  let ticking = false;

  function doSomething(scrollPosition) {
   
    // Do something with the scroll position
  }

  document.addEventListener(
    "scroll",
    function (e) {
   
      lastKnownScrollPosition = window.scrollY;

      if (!ticking) {
   
        // 使用 requestAnimationFrame 节流
        window.requestAnimationFrame(function () {
   
          doSomething(lastKnownScrollPosition);
          ticking = false;
        });

        ticking = true;
      }
    },
    {
   
      // 使用 passive 可改善的滚屏性能
      passive: true,
    }
  );

注意， input events 和 animation frames（动画帧）以大致相同的速率触发，因此通常不需要上面面的优化。

二、使用 requestAnimationFrame 节流

1. 屏幕刷新频率

图像在屏幕上更新的速度（屏幕上的图像每秒钟出现的次数），它的单位是赫兹(Hz)。

60Hz：显示器也会以每秒60次的频率正在不断的更新屏幕上的图像，每次的间隔时间是 16.7ms(1000/60≈16.7) 。

2. 动画原理

动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。

3. setTimeout

利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 原因：

• setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
• 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

4. requestAnimationFrame

• requestAnimationFrame 充分利用显示器的刷新机制，由系统来决定回调函数的执行时机，从而节省系统资源，提高系统性能，改善视觉效果。
• requestAnimationFrame 的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
• requestAnimationFrame 告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。
• requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
• 显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。
• 一旦页面不处于浏览器的当前标签，