防抖是处理 resize 事件的轻量方案，避免高频触发导致 dom 操作错误、渲染卡顿或框架报错；需配合存在性检查与合理延迟（200–300ms）。
直接在行内 <script></script> 中实现防抖来处理 resize 事件，是轻量、快速、无需构建工具的实用方案。关键不是“阻止报错”，而是避免因高频触发导致逻辑重复执行、DOM 重排/重绘失控、或副作用（如 console.log、状态更新、尺寸计算）被疯狂调用——这些都可能表现为控制台刷屏、卡顿甚至报错（比如访问已卸载组件的 ref、重复 append 同一元素等）。
为什么 resize 容易引发控制台报错
浏览器在拖拽窗口边缘时，resize 可能在 1 秒内触发数十甚至上百次。若你在监听函数中：
- 直接操作已移除的 DOM 节点（如
el.style.width = ...但el已被remove()） - 调用未定义的方法（如
updateLayout()尚未声明或已被覆盖） - 频繁读写 offsetWidth/offsetHeight 触发强制同步布局，叠加其他脚本可能引发渲染线程阻塞和异常
- 在 Vue/React 等框架上下文中，未经防抖的状态更新会冲垮响应式系统，抛出类似 “Cannot read property ‘xxx’ of null” 的错误
行内 script 中手写防抖 resize 监听器
不依赖任何库，兼容所有现代浏览器。把以下代码放在
