JavaScript防抖與節(jié)流如何提升性能

在 JavaScript 中，防抖（debounce）和節(jié)流（throttle）是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以提升性能，但實現(xiàn)方式和應(yīng)用場景略有不同。

防抖（debounce）：

防抖的核心思想是在一定時間內(nèi)，事件被連續(xù)觸發(fā)時，只執(zhí)行最后一次觸發(fā)的事件處理函數(shù)。適用于輸入框?qū)崟r搜索、表單驗證等場景。

實現(xiàn)方式：

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

節(jié)流（throttle）：

節(jié)流的核心思想是在一定時間內(nèi)，事件被連續(xù)觸發(fā)時，只執(zhí)行一次事件處理函數(shù)。適用于滾動加載、鼠標移動等場景。

實現(xiàn)方式：

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. 減少事件處理函數(shù)的執(zhí)行次數(shù)：防抖和節(jié)流都可以有效減少事件處理函數(shù)的執(zhí)行次數(shù)，從而降低性能消耗。
2. 避免不必要的計算：在事件處理函數(shù)中，盡量避免復(fù)雜的計算操作，將計算結(jié)果緩存起來，避免重復(fù)計算。
3. 使用 requestAnimationFrame：在進行動畫或需要頻繁觸發(fā)的事件處理時，可以使用 requestAnimationFrame 來優(yōu)化性能。requestAnimationFrame 會在瀏覽器下一次重繪之前執(zhí)行指定的回調(diào)函數(shù)，從而確保動畫的流暢性。
4. 避免使用全局變量：盡量減少全局變量的使用，避免內(nèi)存泄漏和不必要的性能消耗。
5. 使用 Web Workers：對于一些復(fù)雜的計算任務(wù)，可以考慮使用 Web Workers 在后臺線程中進行處理，避免阻塞主線程。

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