ResizeObserver 是浏览器原生 API，用于异步监听 DOM 元素 content-box 尺寸变化，解决传统轮询或 MutationObserver 监听尺寸变更笨重低效的问题。
ResizeObserver 是什么，它解决什么问题
ResizeObserver 是浏览器原生的 API，用来异步监听 DOM 元素的尺寸变化（content-box 尺寸，默认不包含 padding/border/margin）。它替代了过去靠 window.addEventListener('resize') + getBoundingClientRect() 轮询或 MutationObserver 拦截样式变更等笨重方案，专为「某个元素自身大小变了」这个场景设计。
怎么创建并使用 ResizeObserver 实例
必须用 new ResizeObserver(callback) 构造，回调函数接收两个参数：entries（ResizeObserverEntry 数组）和 observer（当前实例）。每个 entry 包含 target（被观察元素）和 contentRect（尺寸信息对象）。
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width, entry.contentRect.height);
// 注意：entry.contentRect 是只读对象，不是 DOMRect，但结构相似
}
});
ro.observe(document.querySelector('#my-box'));
- 一个
ResizeObserver实例可观察多个元素，多次调用observe(el)即可 -
unobserve(el)可停止对某元素的监听；disconnect()清空全部监听 - 回调是异步触发的，且会合并同一批次的尺寸变更（类似
requestIdleCallback的批处理逻辑）
常见失效原因和兼容性注意点
它不会响应所有“看起来像尺寸变化”的操作。比如：visibility: hidden、opacity: 0、transform: scale() 都不会触发；元素未插入文档流（display: none 或未 append 到 body）时也不会上报。
- IE 完全不支持，Safari 13.1+ 才开始稳定支持，移动端需留意 Android WebView 版本
- 如果元素宽高由父容器百分比撑开，但父容器本身没变，子元素也不会触发——
ResizeObserver只看该元素自身的contentRect是否重算 - 使用
box-sizing: border-box时，contentRect依然只反映 content 区域，border/padding 不计入 - 在 Shadow DOM 中工作正常，但需确保观察的是 ShadowRoot 内的真实元素节点
与 CSS Container Queries 的关系
ResizeObserver 是 JS 层的底层能力，而 @container 是 CSS 原生的容器查询机制。两者目标重叠（响应容器尺寸），但定位不同：前者灵活可控、可编程，后者声明式、性能更优且支持动画过渡。目前（2024）container queries 已在主流浏览器启用，但复杂逻辑（如动态计算比例、联动其他状态）仍绕不开 ResizeObserver。
立即学习“Java免费学习笔记（深入）”；
真正容易被忽略的是：当元素尺寸因 CSS 动画或 transition 改变时，ResizeObserver 不会逐帧触发，只会在布局重排（reflow）完成后的下一个微任务中报告最终值——它不监听中间过程。
