滚动节流为何选择rAF?

前端

2023-12-31 10:18:48

滚动节流是一种 JavaScript 技术，用于限制特定事件在指定时间间隔内触发的频率。这通常在处理快速触发的事件（例如滚动事件）时很有用，因为频繁触发这些事件可能会对性能产生负面影响。

为什么选择rAF进行滚动节流?

1. rAF的原理

rAF（requestAnimationFrame）是 JavaScript 中的一个 API，它允许您请求浏览器在下次浏览器重绘之前调用指定的函数。这意味着您可以控制函数的执行时机，从而避免在不必要的时候执行它。

在滚动事件的上下文中，您可以使用 rAF 来延迟执行滚动事件回调，直到浏览器准备好在屏幕上更新内容时。这可以帮助减少对性能的影响，因为浏览器不会在每次滚动事件发生时都重新渲染页面。

2. rAF的优势

rAF 具有以下优势：

它不会阻塞主线程，因此不会导致页面卡顿。
它可以与浏览器的刷新率同步，从而确保在适当的时候执行回调。
它可以与其他 rAF 调用一起使用，从而允许您创建复杂的动画。

3. 与其他节流方法的比较

除了 rAF 之外，还有其他一些滚动节流的方法，例如 setTimeout 和 requestIdleCallback。然而，rAF 通常是最佳选择，因为它具有更高的性能和更简单的使用方式。

setTimeout 会在指定的延迟后执行回调，但它不会与浏览器的刷新率同步。这意味着在某些情况下，它可能会在不必要的时候执行回调。
requestIdleCallback 会在浏览器空闲时执行回调。然而，它可能并不总是可靠，因为浏览器可能没有空闲时间来执行回调。

4. 使用rAF进行滚动节流的示例

const throttle = (callback, delay) => {
  let requestId = null;

  const throttledCallback = () => {
    if (requestId) {
      cancelAnimationFrame(requestId);
    }

    requestId = requestAnimationFrame(() => {
      callback();
    });
  };

  return throttledCallback;
};

const handleScroll = () => {
  // 滚动处理逻辑
};

const throttledHandleScroll = throttle(handleScroll, 100);

window.addEventListener('scroll', throttledHandleScroll);