防抖与节流：前端性能优化的两把利剑

在前端开发中，性能优化是一个永恒的话题。当我们处理频繁触发的事件时，如窗口调整大小、输入框输入、滚动事件等，防抖（Debounce）和节流（Throttle）是两种非常有效的优化技术。它们不仅能够提升用户体验，还能减轻浏览器的负担。

防抖：等待稳定

防抖的核心思想是：在事件被频繁触发时，只有在事件停止触发一段时间后，才会执行处理函数。换句话说，防抖会等待事件稳定下来，再执行相应的操作。

一个典型的应用场景是搜索框的实时搜索。当用户快速输入时，我们不希望每次输入都触发搜索请求，而是等待用户停止输入后再进行搜索。这样可以减少不必要的请求，提升性能。

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  // 执行搜索操作
}, 300));

在这个例子中，debounce函数会在用户停止输入300毫秒后，才执行搜索操作。

节流：控制频率

节流的核心思想是：在事件被频繁触发时，每隔一段时间执行一次处理函数。与防抖不同，节流不会等待事件停止，而是按照固定的频率执行。

一个常见的应用场景是窗口滚动事件。当用户快速滚动页面时，我们不希望每次滚动都触发事件处理函数，而是每隔一段时间执行一次。

function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  // 处理滚动事件
}, 100));

在这个例子中，throttle函数会每隔100毫秒执行一次滚动事件的处理函数。

选择防抖还是节流？

防抖和节流各有其适用的场景。防抖适合处理那些需要等待事件稳定后再执行的操作，如搜索框输入、窗口调整大小等。而节流适合处理那些需要按照固定频率执行的操作，如滚动事件、鼠标移动等。

在实际开发中，我们可以根据具体需求选择合适的技术，甚至可以将两者结合使用，以达到最佳的优化效果。

总结

防抖和节流是前端性能优化中不可或缺的两把利剑。它们通过控制事件的触发频率，有效地减少了不必要的计算和请求，提升了应用的性能和用户体验。掌握这两种技术，不仅能让你写出更高效的代码，还能让你在前端开发的道路上走得更远。