防抖在 resize 事件中是防止页面卡顿甚至崩溃的必要手段；窗口拖拽时每秒触发几十上百次，直接执行 DOM 操作或状态更新会导致强制重排、主线程阻塞及未挂载组件访问异常，需用 200–300ms 防抖确保只执行最终尺寸逻辑，并配合存在性检查与监听清理。
防抖在 resize 事件中不是“可选项”，而是防止页面卡顿甚至崩溃的必要手段。窗口拖拽时，浏览器每秒可能触发几十上百次 resize，若每次回调都直接读写 DOM、调用 chart.resize() 或 setState，就会反复触发强制同步布局（reflow）和重绘（repaint），迅速挤占主线程，造成掉帧、假死或控制台报错。
为什么必须用防抖，而不是节流
resize 的业务目标通常是“响应最终尺寸”，而非“中间过程”。比如调整图表大小、切换移动端布局、重算栅格列数——这些操作只需在用户松手后执行一次。节流会在固定间隔内执行（如每 200ms 一次），仍会浪费大量计算；防抖则确保只执行最后一次，逻辑更合理、资源更节省。
手写轻量防抖函数（无需第三方库）
几行代码就能实现稳定可用的防抖：
- 延迟建议设为 200–300ms：短于 16ms（一帧）起不到过滤作用；超过 500ms 用户会感知滞后
- 每次触发都清除旧定时器，仅保留最后一次调用
- 注意上下文绑定，尤其在 class 组件或闭包中使用时需用
fn.apply(this, arguments)
示例：
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
绑定与清理不能省略
防抖只是第一步，监听器管理同样关键：
- 绑定时传入防抖后的函数：
window.addEventListener('resize', debounce(handleResize, 250)) - 务必在组件卸载或页面销毁前移除监听器，否则 timer 持有闭包引用，造成内存泄漏
- React 中推荐封装成自定义 Hook，自动处理 useEffect 清理；Vue 中可在
beforeUnmount或unmounted钩子中移除
比 window.resize 更优的替代方案：ResizeObserver
如果关注的是某个容器（如 #chart-container）的尺寸变化，而非整个窗口，优先用 ResizeObserver：
- 它不依赖全局事件，只监听目标元素盒模型变化，精准无干扰
- 浏览器自动合并多次变更、异步派发回调，天然避免高频问题，无需手动防抖（但对复杂回调仍可叠加防抖）
- 主流浏览器已全面支持（Chrome 64+、Firefox 69+、Edge 79+、Safari 13.1+）
- 示例：
new ResizeObserver(debounce(updateChart, 200)).observe(container)
防抖之外的关键加固点
光加防抖还不够，还要避免隐式性能陷阱：
-
读写分离：把
offsetWidth、clientHeight等布局读取集中到回调开头一次性缓存，写操作（如修改 class、style）放到最后批量执行 -
存在性检查：回调内先判断 DOM 元素是否还存在（
if (el) {...}），防止访问已卸载节点引发 “Cannot read property of null” 报错 - 动画类更新用 requestAnimationFrame：确保视觉更新与渲染帧对齐，避免强制同步布局
