resize事件必须加防抖，因其每秒触发40–80次且同步执行，易引发强制回流和页面卡顿；推荐200ms闭包防抖函数，并注意首次调用、监听清理及优先使用ResizeObserver。
直接用 window.addEventListener('resize', handler) 监听，再套一层防抖函数控制执行时机，是最常用也最有效的做法。关键不是“要不要防抖”，而是怎么防得准、不卡也不拖。
为什么 resize 必须加防抖
窗口拖拽时，resize 事件每秒可能触发 40–80 次，且是同步事件——每次回调里若读写 DOM（比如 el.offsetWidth 后立刻设 el.style.width），就会强制触发同步回流，单次耗时可达 20ms 以上。连续几十次等于让主线程持续满载，页面卡顿、动画掉帧、图表闪烁都由此而来。
- 它不走事件循环队列，无法被节流或取消
- 高频触发 + 同步布局 = 强制 Layout Thrashing
- 防抖不是“优化选项”，而是防止崩溃的必要手段
怎么写一个靠谱的防抖函数
不用引入 Lodash，几行代码就能覆盖大多数场景。重点是隔离 timer、保留 this、延迟合理：
- 延迟时间设为 150–250ms：低于 150ms 容易残留抖动；高于 250ms 用户松手后有明显等待感；推荐起始值 200ms
- timer 变量必须在闭包内独立声明，避免多个监听器互相干扰
- 用
func.apply(this, arguments)确保上下文和参数正确，尤其在 class 方法中
示例：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function debounce(fn, delay = 200) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
实际使用要注意的三件事
防抖只是控制时机，真正影响体验的是后续逻辑是否轻量、是否遗漏关键节点：
-
首次加载必须手动触发一次：防抖只管“变化后”，不管“一开始”。页面渲染完立即调用
updateLayout()或chart.resize()，否则图表/容器会按默认尺寸（如 600×400）先画出来，再缩放，造成闪动或溢出 -
监听器要清理：单页应用中组件卸载前，务必调用
window.removeEventListener('resize', handler)。用匿名函数绑定会导致无法移除，引发内存泄漏 -
优先考虑 ResizeObserver 替代 window.resize：如果目标只是某个容器（如
#chart-container）的尺寸变化，ResizeObserver 更精准、天然低频、无需防抖也能稳定运行。兼容性已覆盖 Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+
更优的现代方案：ResizeObserver + 轻量防抖
当你要响应的不是整个窗口，而是某个模块容器的尺寸变化时，ResizeObserver 是更自然的选择：
- 它只在目标元素盒模型真实变化时触发，不受窗口拖拽节奏干扰
- 浏览器自动合并连续变更，本身不高频
- 可对每个观察目标单独配防抖（比如 200ms 内只执行最后一次），避免全局 resize 的干扰
示例：
立即学习“Java免费学习笔记（深入）”；
const ro = new ResizeObserver(() => {
chart.resize();
});
ro.observe(document.getElementById('chart-container'));
