防抖与节流的奥秘：深入解析前端性能优化利器

前端

2023-05-05 23:29:42

前端优化的双雄：防抖与节流

在前端开发的战场上，性能优化是一场永无止境的较量。而在这场战争中，防抖与节流宛如两名骁勇善战的大将，以其出色的策略和技能，帮助我们提升网站性能，为用户带来极致体验。

防抖：挥洒自如，驾驭高频事件

试想这样一个场景：用户在输入框中飞快地敲击键盘，试图搜寻信息。如果没有防抖机制，每一次敲击都会触发一次搜索请求，导致服务器不堪重负，搜索结果迟迟无法呈现。

防抖的策略是：在事件触发后，延迟一定时间再执行函数。在此期间，如果事件再次触发，则取消之前的延迟，重新计时。就像一个从容不迫的指挥家，它只会在最合适的时机发出信号，避免不必要的重复操作。

节流：优雅控场，处理连续操作

节流与防抖虽然殊途同归，但关注点却截然不同。它着眼于事件触发的频率，而不是事件本身。

当用户拖动窗口时，我们希望实时更新窗口大小，但这并不意味着我们需要每时每刻都触发一次函数。节流机制会优雅地处理这种情况：它会规定一个时间间隔，在这段时间内只允许函数执行一次。这样一来，既能满足我们的实时需求，又避免了过度调用。

适用场景：知己知彼，百战不殆

防抖与节流，虽然都是优化利器，但它们各有擅场。

防抖适用场景：

用户输入时实时搜索建议
用户拖动滑块时实时显示进度
用户滚动页面时延迟加载图片或内容

节流适用场景：

用户滚动页面时固定导航栏
用户拖动窗口时实时更新窗口大小
用户点击按钮时防止重复提交表单

实现方式：踏踏实实，让它们为你所用

在现代前端开发中，实现防抖与节流已经变得轻而易举。我们可以使用 JavaScript 内置函数或第三方库来轻松实现它们。

JavaScript 内置函数实现：

// 防抖
const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

// 节流
const throttle = (func, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= delay) {
      func(...args);
      lastCallTime = now;
    }
  };
};