怎么处理在使用 addEventListener 监听 resize 时引发高频重绘的性能灾难-js教程-PHP中文网

应使用防抖而非节流处理resize事件，因只需响应最终尺寸；轻量防抖函数可自行实现，绑定时需配合理解监听器移除；优先采用resizeobserver监听容器尺寸变化，避免全局事件干扰，并配合防抖、缓存布局属性、分离读写操作及requestanimationframe优化性能。

怎么处理在使用 addeventlistener 监听 resize 时引发高频重绘的性能灾难

直接监听 resize 事件而不加控制，极易引发性能灾难——窗口拖拽时每秒触发数十次，每次回调若涉及 DOM 操作、布局计算或图表重绘，就会反复触发重排（reflow）和重绘（repaint），阻塞主线程，导致页面卡顿甚至假死。

浏览器在调整窗口过程中持续派发 resize，而默认监听器是同步执行的。哪怕只是调用 chart.resize() 或 setState({ width: window.innerWidth })，也会立刻触发样式计算、布局、绘制链条，无法在下一帧前完成，造成掉帧。

对 resize 来说，真正需要响应的是“最终尺寸”，不是“中间过程”。防抖能确保仅在用户停止调整后延迟执行一次，彻底避免无效计算：

TextCortex

一款集AI写作、改写和知识辅助于一体的内容创作工具，可帮助用户快速完成多种类型的文本撰写与编辑任务。

下载

写一个轻量防抖函数（无需引入 Lodash）：
const debounce = (fn, delay = 250) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; };
绑定时使用：
window.addEventListener('resize', debounce(handleResize, 300));
务必在组件卸载或销毁前移除监听器，否则 timer 无法清除，造成内存泄漏

如果关注的是某个容器（如图表父 div）的尺寸变化，ResizeObserver 是更精准、更现代的方案：

示例：

const ro = new ResizeObserver(debounce(() => updateChart(), 200));<br>ro.observe(document.getElementById('chart-container'));

即使加了防抖，若 handleResize 内部仍频繁读写 offsetWidth、clientHeight 等布局属性，会强制同步触发布局计算。应：