javascript如何优化页面性能？_javascript中的防抖与节流是什么原理？

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

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

防抖：等“停”了再执行

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

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

节流：固定频率执行

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

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

其他关键性能优化点

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

标签： javascript java 懒加载 区别 重绘