JavaScript防抖與節流如何提升性能

在 JavaScript 中，防抖（debounce）和節流（throttle）是兩種常用的優化高頻率觸發事件的技術。它們都可以提升性能，但實現方式和應用場景略有不同。

防抖（debounce）：

防抖的核心思想是在一定時間內，事件被連續觸發時，只執行最后一次觸發的事件處理函數。適用于輸入框實時搜索、表單驗證等場景。

實現方式：

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

節流（throttle）：

節流的核心思想是在一定時間內，事件被連續觸發時，只執行一次事件處理函數。適用于滾動加載、鼠標移動等場景。

實現方式：

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

如何提升性能：

1. 減少事件處理函數的執行次數：防抖和節流都可以有效減少事件處理函數的執行次數，從而降低性能消耗。
2. 避免不必要的計算：在事件處理函數中，盡量避免復雜的計算操作，將計算結果緩存起來，避免重復計算。
3. 使用 requestAnimationFrame：在進行動畫或需要頻繁觸發的事件處理時，可以使用 requestAnimationFrame 來優化性能。requestAnimationFrame 會在瀏覽器下一次重繪之前執行指定的回調函數，從而確保動畫的流暢性。
4. 避免使用全局變量：盡量減少全局變量的使用，避免內存泄漏和不必要的性能消耗。
5. 使用 Web Workers：對于一些復雜的計算任務，可以考慮使用 Web Workers 在后臺線程中進行處理，避免阻塞主線程。

總之，防抖和節流是兩種有效提升 JavaScript 性能的技術，它們可以減少事件處理函數的執行次數，避免不必要的計算，提高代碼的執行效率。在實際開發中，根據具體場景選擇合適的技術進行優化。