JavaScript函数性能优化：纯函数概念与防抖节流实现

在前端交互与高频事件处理中，不当的函数执行模式往往是导致页面卡顿、重复网络请求以及内存开销过大的主因。提升 JavaScript 函数性能主要立足于两个维度：一是降低单次函数执行的内部消耗并复用运算结果，二是限制高频事件驱动下的函数触发次数。本文将直接剖析纯函数的核心概念与缓存加速机制，并详细拆解防抖（Debounce）与节流（Throttle）的运行机制、代码实现及选型策略。

一、纯函数的概念与可预测性

纯函数（Pure Function）源于函数式编程思想，在 JavaScript 性能优化与架构设计中占据核心地位。一个函数要被称为纯函数，必须同时满足以下两个严格条件：

• 相同输入产生相同输出：函数返回值完全由传入的参数决定，不依赖任何外部全局变量、当前系统时间、随机数或DOM状态。
• 无任何副作用（No Side Effects）：函数在执行过程中，不得更改传入的入参对象、不得修改外部变量、不得发起未受管制的 I/O 操作（如直接修改 DOM、写全局存储或发网络请求）。

我们通过对比非纯函数与纯函数的实现，直观感受两者的设计差异：

// 非纯函数：依赖并改变外部变量，存在副作用
let totalDiscount = 0.9;
function calculatePriceImpure(price) {
  return price * totalDiscount; // 依赖全局变量，当 totalDiscount 改变时，相同输入返回不同输出
}

// 纯函数：结果仅由入参决定，无副作用
function calculatePricePure(price, discount) {
  return price * discount; // 相同入参必然得出唯一确定的输出
}

纯函数的一致性使得程序的运行状态完全可控，同时也为运算层面的性能优化提供了坚实基石——记忆化缓存（Memoization）。

二、纯函数的性能优化手段：记忆化（Memoization）

当一个纯函数包含复杂的数学计算、大规模递归或耗时的数据转换时，由于“相同输入必然产生相同输出”的特性，我们无需每次都重新进行繁琐的计算。我们可以利用闭包维护一个结果字典，将参数作为键，计算结果作为值保存起来。当下一次调用遇到相同入参时，直接从字典中取出缓存值返回，从而将多次调用的时间复杂度降至 O(1)。

// 纯函数记忆化工具函数
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key); // 命中缓存，直接返回历史结果
    }
    const result = fn.apply(this, args);
    cache.set(key, result); // 写入缓存
    return result;
  };
}

// 示例：耗时的阶乘或复杂计算
const heavyCompute = (n) => {
  let res = 0;
  for (let i = 0; i < n * 100000; i++) {
    res += i;
  }
  return res;
};

const optimizedCompute = memoize(heavyCompute);
console.log(optimizedCompute(50)); // 首次计算耗时
console.log(optimizedCompute(50)); // 第二次直接命中缓存，瞬间返回

三、防抖（Debounce）：高频触发后的静止等待

在浏览器交互中，输入框输入（input / keyup）、窗口尺寸调整（resize）以及表单联想等操作极易在短时间内触发数十甚至上百次事件。若每次触发都直接执行处理逻辑或发起接口请求，会带来巨大的渲染卡顿和服务器压力。

1. 核心原理与行为特征

防抖的核心规则是：当事件被触发时，设定一个延迟时间；若在延迟时间内事件再次被触发，则清空先前的计时器并重新开始计时；只有在设定的时间窗口内没有任何新触发，才真正执行目标函数。简而言之，防抖是将连续的多次密集动作合并为最后一次执行。

2. 防抖的完整原生实现

防抖的底层实现基于闭包对计时器 timer 的引用捕获。同时，为了确保函数运行时的上下文 this 与事件对象的原生参数准确传递，必须在定时器回调中使用 apply 显式绑定：

/**
 * 基础防抖函数
 * @param {Function} fn - 需要执行的目标函数
 * @param {number} delay - 静止等待时长（毫秒）
 * @return {Function} 包装后的防抖函数
 */
function debounce(fn, delay = 300) {
  let timer = null;

  return function(...args) {
    const context = this;

    // 若当前存在未到期的计时器，直接清除
    if (timer) {
      clearTimeout(timer);
    }

    // 重启计时
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null;
    }, delay);
  };
}

// 实际使用示例：监听搜索框文本输入
const searchInput = document.getElementById('search-box');
if (searchInput) {
  searchInput.addEventListener('input', debounce(function(event) {
    console.log('发起联想搜索请求，关键词：', event.target.value);
  }, 400));
}

四、节流（Throttle）：固定频次下的均匀放行

在页面滚动（scroll）、鼠标指针移动（mousemove）或播放进度更新等场景下，我们不能等到用户完全停下来才做出反应（比如滚动加载或吸顶导航），而是需要保持界面的连贯响应，但又要大幅降低执行频率。此时需要使用节流。

1. 核心原理与行为特征

节流的核心规则是：在一个预设的时间周期内，无论该事件被触发了多少次，目标函数最多只能执行一次。节流像是一个限流阀门，将密集的无规律调用转换为等间隔的平滑输出。

2. 节流的两种实现方案

在工程实践中，节流通常有两种主流写法：时间戳比对法与定时器状态标记法。时间戳法具备“立即执行”的特点，而定时器法在事件停止后通常还会补发一次尾部调用。以下提供稳定可靠的时间戳实现方案：

/**
 * 时间戳版节流函数
 * @param {Function} fn - 目标处理函数
 * @param {number} interval - 最小间隔周期（毫秒）
 * @return {Function} 包装后的节流函数
 */
function throttle(fn, interval = 200) {
  let lastTime = 0;

  return function(...args) {
    const now = Date.now();
    const context = this;

    // 当距上次执行的时间超过预设间隔时，放行执行
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(context, args);
    }
  };
}

// 实际使用示例：监听滚动事件
window.addEventListener('scroll', throttle(function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log('当前页面滚动高度：', scrollTop);
}, 250));

五、防抖与节流的技术对比与场景选型

防抖和节流都用于处理高频事件，但其关注点完全不同：

• 防抖是“关注结果”：用户操作完全停歇前不予响应，只拿最终一次结果。适用于不关注过程、只关注最终状态的操作。
• 节流是“关注过程”：在操作持续进行时，按固定频率持续给出阶段性响应。适用于需要提供视觉反馈或进度维持的操作。

六、实践总结与开发注意事项

1. 保持纯函数边界清晰：在设计业务模块时，将数据计算逻辑与 DOM 渲染或 API 调用完全拆分。计算逻辑作为纯函数封装，便于单测和复用记忆化缓存。
2. 不可滥用闭包与无界缓存：防抖和节流都依赖闭包保存状态变量（timer 或 lastTime）。在组件销毁（如 React 的 useEffect 清理函数或 Vue 的 beforeUnmount）时，务必清理定时器并解绑事件监听，防止内存泄露。
3. 保留执行上下文与参数：手写防抖节流时，牢记使用 fn.apply(this, args) 传递动态绑定的当前节点指针与事件参数 event，避免在事件处理器内丢失关键上下文。