ResizeObserver只监听直接观察元素的content-box尺寸变化，不冒泡、不穿透、不递归；子元素变化不会触发父容器回调，必须显式observe每个目标元素。
ResizeObserver 为什么监听不到子元素尺寸变化
因为 ResizeObserver 默认只监听**直接被观察的元素自身**的尺寸变化，不冒泡、不穿透、不递归。哪怕你给父容器加了观察器，子元素宽高变、display 切换、甚至 transform 缩放，都不会触发回调——除非你显式地把那个子元素也传给 observe()。
常见误操作：只监听容器，却指望它“感知”内部 flex 项收缩、图片加载后撑开、或 CSS Grid 项重排导致的容器高度波动。这时候实际变化的是容器自身（比如高度确实变了），但如果你没在回调里重新检查子元素布局，就容易误判为“没生效”。
- 必须对每个需要响应尺寸的元素单独调用
observe()，包括动态插入的节点 - 若需“容器内容变化 → 触发回调”，得确保该变化最终反映在容器自身的
clientWidth/clientHeight上（例如子项用height: auto且未设overflow: hidden） -
ResizeObserver不响应font-size、opacity、z-index等非几何属性变化
如何正确监听一个动态容器的高度自适应
典型场景：侧边栏折叠后主内容区宽度变大，内部卡片自动换行导致整体高度增加；或者富文本区域随输入内容增长而撑高。这时不能只靠 CSS，得让 JS 感知高度变化并同步更新其他依赖项（如滚动锚点、Canvas 绘图区域、第三方图表库重绘）。
关键不是“监听谁”，而是“监听后做什么”。例如：
立即学习“前端免费学习笔记（深入）”；
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
const { height } = entry.contentRect;
// 注意：contentRect 是 layout 后的尺寸，已排除 margin
if (height > 0) {
updateChartSize(entry.target); // 示例：通知 ECharts 重绘
syncScrollAnchor(entry.target); // 示例：修正浮动按钮定位
}
}
});
ro.observe(document.getElementById('main-content'));
-
contentRect比getBoundingClientRect()更可靠——它绕过渲染管线延迟，是浏览器 Layout 阶段提供的精确值 - 避免在回调中直接修改被观察元素的样式（如改
height），可能引发循环调用；如有必要，用requestAnimationFrame()延迟一次 - 如果容器有
border或padding，而你需要“内容区净尺寸”，优先读entry.contentBoxSize[0]?.inlineSize（需检查兼容性）而非contentRect.width
ResizeObserver 在 Vue/React 中的常见封装陷阱
框架组件生命周期和 DOM 更新时机，会让 ResizeObserver 的使用变得微妙。最常踩的坑是：组件 unmounted 了，但观察器还在运行，导致 this 指向丢失或更新已销毁的 DOM。
- Vue 3
onUnmounted中必须调用ro.disconnect()，否则内存泄漏；不要只靠ref自动清理 - React 中若用
useEffect，返回的清理函数里要ro.disconnect()，且确保ro是闭包内唯一实例（避免多次创建） - 不要在
render函数里反复新建ResizeObserver实例——它本应复用，频繁创建会拖慢性能 - SSR 环境下
typeof window === 'undefined'，需包裹判断，否则服务端报错ReferenceError: ResizeObserver is not defined
兼容性不足时怎么降级处理
ResizeObserver 在 IE 完全不支持，iOS Safari 13.3 以下、Android WebView 旧版也有 bug（如首次回调缺失）。不能只写个 if ('ResizeObserver' in window) 就完事。
简单降级方案：对低版本浏览器，用 window.addEventListener('resize') + 轮询 offsetHeight，但必须加节流和防抖——否则每像素变化都触发太伤性能。
function fallbackResizeWatch(el, callback) {
let lastHeight = el.offsetHeight;
const check = () => {
const h = el.offsetHeight;
if (h !== lastHeight) {
lastHeight = h;
callback();
}
};
const timer = setInterval(check, 250);
return () => clearInterval(timer);
}
// 使用前先检测
if (typeof ResizeObserver === 'undefined') {
cleanup = fallbackResizeWatch(el, handleResize);
} else {
ro.observe(el);
}
- 轮询间隔别设太小（500ms），否则响应滞后明显
- 仅对关键容器降级，非全站所有元素都轮询
- 注意：轮询无法捕获无高度变化但宽度变化的场景（如文字换行但总高度不变），此时需结合
scrollWidth和clientWidth对比
真正麻烦的不是写几行 observe()，而是想清楚：这个尺寸变化是否真的需要 JS 干预？CSS 的 container queries 或 aspect-ratio 能否替代？很多时候，问题不在监听技术，而在设计阶段没厘清响应边界。
