JavaScript事件机制不自动处理高频触发，需开发者用防抖（最后一次触发后延迟执行）和节流（单位时间最多执行一次）来优化，配合事件委托、取消未完成任务、避免强制回流及使用requestAnimationFrame等协同手段。
JavaScript 事件机制本身不自动处理高频触发问题，它会如实响应每一次事件——比如滚动、缩放、输入等，可能每秒触发几十甚至上百次。这种“照单全收”的行为，若直接执行重逻辑（如 DOM 操作、AJAX 请求、复杂计算），极易阻塞主线程，引发卡顿、掉帧甚至页面无响应。真正解决问题的，是开发者在事件回调中主动引入控制策略，核心就是 防抖（Debounce） 和 节流（Throttle）。
为什么原生事件监听会拖慢页面
浏览器的事件循环是单线程的。当 scroll、resize 或 input 这类事件高频发生时：
- 每次触发都会向任务队列推入一个回调任务
- 若回调里有强制同步布局（如读取 offsetHeight）、大量 DOM 更新或未优化的计算，会延长每个任务执行时间
- 任务堆积导致渲染帧被挤占，视觉上就是“卡”
- 还可能引发多余网络请求、重复计算、内存占用上升等问题
防抖：适合“等操作结束再响应”的场景
防抖的核心是“最后一次触发后延迟执行”。只要事件还在持续发生，就不断重置倒计时；只有安静下来，才真正干活。
- 典型用法：搜索框输入联想、窗口 resize 后重排布局、表单提交按钮防连点
- 实现关键：用
setTimeout+clearTimeout管理定时器，闭包保存 timer 引用 - 注意点：别在防抖函数里直接传
arguments，要展开或用剩余参数；需正确绑定this和参数
节流：适合“过程中也要定期响应”的场景
节流保证函数在单位时间内最多执行一次，不管事件触发多频繁，它都按固定节奏“滴答”运行。
- 典型用法：滚动加载更多、鼠标移动轨迹采集、拖拽过程中的位置更新
- 两种主流实现：基于时间戳（记录上次执行时间，对比当前时间差）或基于开关标志（执行后锁住，定时解锁）
- 补充技巧：可配合
passive: true选项注册 scroll/ touch 事件，让浏览器跳过 JS 阻塞，默认快速滚动
其他协同优化手段
单靠防抖/节流还不够，常需组合使用：
- 事件委托：避免给大量子元素单独绑定事件，统一由父容器捕获处理
-
取消未完成任务：比如防抖中用户已跳转页面，应手动
clearTimeout防止内存泄漏 - 避免强制同步回流：不要在高频回调里反复读写 offset/ scrollTop 等触发布局的属性
- 用 requestAnimationFrame 替代 setTimeout 做视觉更新：确保与屏幕刷新率对齐，更顺滑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
