javascript的resize observerapi是什么_它如何监听元素尺寸的变化【教程】

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）完成后的下一个微任务中报告最终值——它不监听中间过程。