ResizeObserver 是监听元素尺寸变化的唯一正确方案，window.resize 仅响应视口变化；需确保元素已挂载、避免修改自身盒模型属性引发循环；旧浏览器用 element-resize-detector。
直接用 ResizeObserver，别绕弯——它就是浏览器专为这事设计的 API，现代项目无须兼容 IE 时，这是唯一该选的方案。
为什么 window.resize 根本监听不到元素尺寸变化
很多人第一反应是给 window 绑 resize 事件，结果发现侧边栏展开、Flex 子项收缩、卡片内容增删后宽度变了，回调却一次没触发。这是因为：window.resize 只响应浏览器视口（viewport）尺寸变化，和 DOM 元素内部的盒模型变更完全无关。
- 元素因父容器
width改变而重排 →window.resize不触发 - 动态插入子节点导致父
div高度撑开 →window.resize不触发 - CSS
display: flex下兄弟元素flex-grow拉伸，当前元素宽度被压缩 →window.resize不触发
除非你真在监听整个窗口缩放，否则写 window.addEventListener('resize', ...) 去管某个 div 的宽高，纯属方向错误。
ResizeObserver 初始化必须等元素挂载到 DOM
ResizeObserver 实例化后调用 observe()，如果目标元素还没出现在 DOM 中（比如 Vue/React 组件还没 mounted，或 JS 执行早于 HTML 解析），它不会报错，也不会提醒，而是静默失败——回调永远不会执行。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保在
DOMContentLoaded后执行，或放在document.getElementById(...)成功拿到元素之后 - 在 React 中，写在
useEffect(() => { ... }, [])里；在 Vue 中，写在mounted()钩子内 - 不支持
display: none、伪元素（::before）、未渲染的 Shadow DOM 节点 —— 这些情况观察直接无效
示例中常见错误写法：const ro = new ResizeObserver(...); ro.observe(document.getElementById('missing-el'));，而 #missing-el 实际在后续异步加载才插入，此时 observe() 已对空引用生效，后续插入也无感知。
回调里改样式可能引发无限循环
ResizeObserver 回调是同步响应尺寸变更的，但如果在回调里直接修改被观察元素的盒模型属性（如 element.style.width、element.style.padding、element.style.display），会再次触发尺寸计算，从而再次进入回调 —— 形成死循环，页面卡死或崩溃。
- 安全做法：只读取
entry.contentRect.width/height，然后更新非盒模型相关状态（如图表数据、字体大小 class、CSS 自定义属性--chart-width） - 若必须调整尺寸，改兄弟元素或父容器，避开 target 自身
- 调试时加 guard：比如记录上一次宽度，
if (width !== lastWidth) { ...; lastWidth = width; }，但治标不治本，优先重构逻辑
contentRect 提供的是 content-box 尺寸（不含 padding/border），不是 getBoundingClientRect() 返回的视觉坐标 —— 别混用。
旧浏览器兜底只能靠 element-resize-detector
如果项目需支持 IE11 或某些定制内核（如旧版 Electron），ResizeObserver 不可用，此时不要自己手写轮询（setInterval + offsetWidth），它强制重排、性能差、精度低。
- 用
element-resize-detector库，它通过嵌套滚动容器 +scroll事件模拟尺寸监听，比轮询快约 37 倍，支持 IE9+ - 引入后调用方式极简：
const erd = elementResizeDetectorMaker(); erd.listenTo(element, () => {...}); - 注意它会在目标元素内插入两个不可见的
div，若元素有严格 CSS 限制（如overflow: hidden且不允许子节点），需提前测试
真正麻烦的从来不是“怎么监听”，而是“监听到之后要不要改 DOM”。很多问题表面是尺寸检测失效，实际是回调逻辑意外扰动了布局流 —— 动手前先想清楚：这次尺寸变，到底该由谁来响应、改什么、改完会不会再变。
