17370845950

防抖是事件停止触发后延时执行一次，适用于搜索输入等场景；节流是按固定间隔执行，适用于滚动监听等需持续响应的场景；二者均通过控制函数执行频率优化性能。

优化页面性能，核心是减少不必要的计算和 DOM 操作，尤其在高频事件（如滚动、输入、鼠标移动）中，防抖（Debounce）和节流（Throttle）是最常用且有效的两种函数执行控制策略。

防抖：等“停”了再执行

防抖的原理是：在事件被频繁触发时，不立即执行回调，而是每次触发都重置一个定时器；只有当事件停止触发超过设定时间后，才真正执行一次函数。适合用于搜索框输入、窗口大小调整等“只关心最终结果”的场景。

• 典型用法：用户输完关键词再发请求，避免每按一个键都查一次接口
• 实现关键：每次触发先 clearTimeout 上一次的定时器，再 setTimeout 新的
• 注意点：如果用户持续操作，函数永远不会执行——直到“安静”下来

节流：固定频率执行

节流的原理是：无论事件触发多频繁，函数只按固定时间间隔执行（比如每 100ms 最多执行一次）。适合用于滚动监听、鼠标拖拽等需要“持续响应但不必每次都处理”的场景。

• 常见模式：时间戳版（记录上次执行时间，当前时间减去它 ≥ 间隔才执行）或定时器版（用 setTimeout 控制下一次可执行时机）
• 区别于防抖：节流保证单位时间内至少执行一次，防抖则可能一次都不执行（如果一直没停）
• 小技巧：实际项目中常配合 requestAnimationFrame 使用，让滚动处理更顺滑

其他关键性能优化点

防抖节流只是冰山一角，搭配下面这些做法效果更明显：

• 懒加载图片和组件：用 IntersectionObserver 替代 scroll 监听，避免卡顿
• 减少重排重绘：批量修改 DOM、用 transform 和 opacity 做动画（走合成层）
• 合理使用事件委托：避免给大量子元素单独绑定事件，统一在父级处理
• 避免长任务阻塞主线程：大数组处理可用 setTimeout 或 requestIdleCallback 分片执行

基本上就这些。防抖和节流不是黑魔法，本质都是用时间换资源——用可控的延迟，换来更稳的响应和更低的开销。