ResizeObserver 是 HTML5 原生异步监听 DOM 元素尺寸变化的 API，需传入接收 entries 和 observer 的回调函数，仅支持具体元素、不支持 window/document，contentRect 提供像素级内容盒尺寸且不触发重排。
ResizeObserver 是 HTML5 唯一原生支持元素尺寸变化监听的 API
HTML4 没有等效机制，也不存在“HTML4 监听元素大小变化”的说法——那是误传。浏览器直到 Chrome 64 / Firefox 69 / Safari 13.1 才陆续支持 ResizeObserver，它不是“升级版 onresize”，而是专为 DOM 元素设计的异步尺寸观测器。
怎么创建并使用 ResizeObserver 实例
必须传入一个回调函数，该函数接收两个参数：entries（ResizeObserverEntry 数组）和 observer（当前实例）。不能直接监听 window 或 document，只能监听具体 DOM 元素。
const ro = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('contentRect:', entry.contentRect);
console.log('target:', entry.target);
}
});
ro.observe(document.querySelector('#my-box'));
-
entry.contentRect是最常用字段，包含width/height/top/left等，单位为像素，反映内容盒（content box）尺寸 - 不触发重排（reflow），也不阻塞主线程，是异步批量回调
- 同一个
ResizeObserver实例可多次调用observe()监听多个元素 - 记得在不需要时调用
unobserve(element)或disconnect()，否则可能造成内存泄漏
为什么不用 window.onresize 替代 ResizeObserver
window.onresize 只响应整个视口（viewport）大小变化，对元素内部样式变更、Flex/Grid 重排、display: none ↔ block 切换、甚至 JS 修改 style.width 都完全无感。
- 常见误用：给容器加
onresize属性——无效，HTML 元素不支持该事件 -
window.onresize触发频率高且不可控，容易抖动；ResizeObserver自动去重、合并同一帧内的多次变化 - 无法获取目标元素的实际尺寸，必须手动
getBoundingClientRect()，而后者会强制同步布局（layout thrashing） - 服务端渲染（SSR）或 Web Components 中，
ResizeObserver更可靠，因为它依赖真实 DOM 节点而非全局窗口
兼容性处理与降级建议
IE 完全不支持，旧版 Edge（≤18）也不支持。若需兼容，不要用 polyfill（现有 polyfill 均基于轮询或 MutationObserver + 定时器，精度差、性能糟），而应按场景降级：
立即学习“前端免费学习笔记（深入）”；
- 仅需响应视口变化 → 用
window.addEventListener('resize', ...)+debounce - 需监听某容器子元素数量/高度变化（如聊天列表）→ 改用
MutationObserver关注子节点增删，再手动测高 - 动态图表容器 → 在图表库（如 ECharts、Chart.js）的
resize()方法调用时机做 hook，而不是监听 DOM - 真需要精确 content box 变化且必须支持 IE → 放弃自动监听，改由业务逻辑在关键路径（如折叠面板展开后）显式触发尺寸检查
真正难处理的不是“监听不到”，而是监听后立刻读取尺寸又触发 layout —— ResizeObserver 的 contentRect 是浏览器计算好的快照，这点很多人一开始没意识到。
