防抖是窗口 resize 事件的必需优化，推荐延迟 200ms，需手动触发初始 resize，并优先用 ResizeObserver 替代 window.resize，防抖回调中避免重操作。
在窗口 resize 事件中加防抖，不是为了“省事”，而是防止浏览器被高频触发拖垮——拖拽窗口时每秒可能触发 50+ 次 resize，每次调 chart.resize() 或重算布局都会引发重排、重绘甚至 JS 阻塞。防抖是必须项，关键是怎么用对。
选对延迟时间：150–250ms 是黄金区间
太短（如 50ms）：用户还在拖，就反复执行，图表闪动、坐标跳变；
太长（如 400ms）：松手后明显卡顿，尤其在高刷屏或触控设备上感知强烈。
推荐起始值设为 200ms，再按实际体验微调：
- 桌面端鼠标拖拽 → 用 200ms 够稳
- 触控平板缩放 → 可降至 180ms 提升响应感
- 含复杂图表（如多图联动）→ 可上浮到 220–250ms 避免 CPU 峰值
必须手动触发一次初始 resize
防抖只管“变化后”，不管“第一次”。若等 resize 事件才调 chart.resize()，图表会先按默认尺寸（比如 600×400）渲染，再缩放，导致内容溢出、文字截断或动画错位。
- 在图表初始化完成（如
new Chart(...)或echarts.init()后）立即调一次chart.resize() - 确保 DOM 已挂载、容器尺寸已计算；可用
requestAnimationFrame包一层更稳妥 - React/Vue 等框架中，放在
useEffect或mounted的下一轮渲染后执行
优先用 ResizeObserver 替代 window.resize
resize 事件监听整个窗口，但你的图表往往只关心自己父容器的宽高变化。ResizeObserver 更精准、更轻量，且天然低频：
立即学习“Java免费学习笔记（深入）”；
- 只在目标元素盒模型真实变化时触发（比如 flex 折叠、侧边栏收起）
- 浏览器自动合并连续变更，无需额外防抖；如需进一步控制，叠加 200ms 轻量防抖即可
- 主流浏览器全支持（Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+），IE 可降级 fallback 到 window.resize + 防抖
防抖回调里别埋重活
防抖只是“掐时间”，不解决内部慢。如果 chart.resize() 前还要深克隆配置、遍历大数据、重算坐标轴，再快的防抖也救不了：
- ECharts：用
setOption(option, { lazyUpdate: true })配合resize()，避免全量重绘 - Chart.js：调
resize()后接update({ duration: 0 })关闭动画，提速明显 - Lightweight Charts：先
chart.timeScale().fitContent()，再resize()，避免自动缩放干扰
不复杂但容易忽略：防抖不是加了就完事，得配时间、补首次、换监听、减负担——四步到位，resize 才既稳又快。
