前端性能优化：深入理解防抖与节流

在这个例子中，只有在用户停止输入 500 毫秒后，handleSearch 才会被执行，有效减少了不必要的网络请求。

节流（Throttle）

核心原理

节流是一种限制函数执行频率的技术。当事件被频繁触发时，函数会按照固定的时间间隔执行，而不是每次触发都执行。换句话说，在一个时间段内，无论事件触发多少次，函数最多只执行一次。

典型场景

• 页面滚动：用户滚动页面时触发 scroll 事件，使用节流限制处理函数的执行频率。
• 按钮点击：防止用户短时间内多次点击同一个按钮，造成重复提交。
• 游戏动画：限制每秒渲染的帧数，以减少资源消耗。

代码实现

/**
 * 节流函数
 * @param {Function} func - 需要节流的函数
 * @param {number} wait - 时间间隔（毫秒），表示在这个时间间隔内最多执行一次函数
 * @returns {Function} - 返回一个节流后的函数
 */
function throttle(func, wait) {
  // 上一次执行函数的时间戳，初始值为 0
  let lastTime = 0;
  
  // 返回一个闭包函数，作为节流后的函数
  return function (...args) {
    // 获取当前时间戳
    const now = Date.now();
    
    // 如果当前时间与上一次执行时间的差值大于等于 wait，则执行函数
    if (now - lastTime >= wait) {
      // 更新上一次执行函数的时间戳
      lastTime = now;
      // 调用原始函数，并传入参数
      func.apply(this, args);
    }
  };
}

这个实现通过记录上次执行的时间戳来判断是否满足时间间隔条件。这种方式简单直接，适合大多数固定频率调用的场景。

实战示例

下面是一个使用节流限制 scroll 事件处理频率的例子：

// 原始的滚动事件处理函数
function handleScroll() {
  console.log('Scroll event triggered');
}

// 使用节流函数包装 handleScroll
const throttledScrollHandler = throttle(handleScroll, 200);

// 监听滚动事件，并使用节流后的函数
window.addEventListener('scroll', throttledScrollHandler);

在这个例子中，handleScroll 函数会在每次滚动时检查，但每隔 200 毫秒只会执行一次，即使 scroll 事件在这段时间内被频繁触发。

防抖与节流的区别

综合应用示例

有时，我们需要在同一个项目中同时使用防抖和节流。例如，在一个输入框中进行搜索联想提示时，我们可以用节流来控制 API 请求的频率，用防抖来控制显示搜索结果的时间。

const searchInput = document.getElementById('search');

// 使用防抖来控制输入事件
const handleSearch = debounce(function () {
  // 使用节流来控制请求频率
  throttleSearch();
}, 300);

// 使用节流来控制请求频率
const throttleSearch = throttle(function () {
  console.log('Fetching search results for:', searchInput.value);
}, 1000);

searchInput.addEventListener('keyup', handleSearch);

在这个示例中，防抖函数用于减少输入事件的频率，只有在用户停止输入 300 毫秒后才会触发 throttleSearch。而 throttleSearch 函数会使用节流来限制请求频率，确保在 1000 毫秒内只发起一次请求。这种组合拳能兼顾用户体验与服务器压力。

总结

防抖和节流是前端优化中常用的技术手段，合理使用可以显著提升用户体验和系统性能。两者虽然用途不同，但都能有效地减少高频事件触发带来的性能开销。防抖适用于延迟执行的场景，节流适用于限制执行频率的场景，开发者可以根据实际需求选择合适的技术，甚至组合使用以达到最佳效果。