防抖与节流是JavaScript高频事件优化的核心策略：防抖适用于等待操作停止后执行（如搜索联想），节流适用于固定频率持续响应（如滚动加载），二者需据场景选用并注意this绑定、定时器清理及现代替代方案。
JavaScript 优化网页性能，关键在于减少不必要的计算和 DOM 操作，尤其在高频触发场景（如滚动、输入、窗口缩放）中，防抖（Debounce）和节流（Throttle）是两个最常用且高效的策略。它们不是“万能补丁”，而是针对不同业务意图的精准控制手段。
防抖：只响应最后一次操作
防抖适用于“等用户彻底停下来再执行”的场景，比如搜索框输入联想、窗口大小调整后重排布局。核心逻辑是：每次触发时清除上一次定时器，重新设置新定时器；只有连续触发完全停止超过设定延迟，函数才真正执行一次。
- 实现要点：用 setTimeout + clearTimeout 控制执行时机
- 注意 this 和参数传递：需用 Function.prototype.apply 或箭头函数/闭包保存上下文
- 支持立即执行（leading）可选：首次触发立刻执行，后续进入等待状态（常用于按钮防重复点击）
简易版（不带立即执行）：
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}节流：固定频率执行，不丢失关键节奏
节流适用于“必须持续响应但不能太密”的场景，比如滚动监听加载更多、鼠标拖拽实时反馈。它保证函数至少每隔指定时间执行一次，即使事件持续高频触发，也不会被完全忽略。
- 两种主流实现方式：定时器版（更易理解）和 时间戳版（更精准，无延迟累积）
- 定时器版：触发时若无活跃定时器则启动，执行完再清空；期间触发不执行，仅重置等待状态
- 时间戳版：记录上次执行时间戳，每次触发比对当前时间，差值达标即执行并更新时间戳
时间戳版（推荐）：
function throttle(func, limit) {
let lastExec = 0;
return function(...args) {
const now = Date.now();
if (now - lastExec >= limit) {
func.apply(this, args);
lastExec = now;
}
};
}实际使用中的关键细节
-
不要在 render 中直接定义防抖/节流函数：会导致每次渲染生成新函数，破坏事件绑定稳定性，应提至组件外或用 useCallback 缓存
-
及时清理副作用：在组件卸载或监听器移除前，清除可能残留的定时器（如 clearTimeout），避免内存泄漏或报错
区分场景选型：表单校验、搜索建议用防抖；滚动定位、实时绘图用节流；有些库（如 Lodash）提供 leading/trailing 配置，按需开启-
避免过度优化：16ms（60fps）内频繁操作本就该由浏览器合成层处理，JS 层盲目节流可能掩盖真实性能瓶颈（如 layout thrashing）
进阶提示：现代替代方案值得关注
对于滚动、尺寸变化等原生高频事件，可优先考虑：
-
Intersection Observer：替代 scroll + getBoundingClientRect 判断元素可见性
-
ResizeObserver：监听元素尺寸变化，比 window.resize + debounce 更精准高效
-
CSS Containment 和 will-change：从渲染层隔离影响，减少重排重绘范围
防抖与节流是 JS 性能优化的基石工具，写得对不对，直接影响交互是否卡顿、资源是否浪费。掌握原理、看清场景、注意边界，比背代码更重要。
区分场景选型：表单校验、搜索建议用防抖；滚动定位、实时绘图用节流；有些库（如 Lodash）提供 leading/trailing 配置，按需开启