尺寸观察器(ResizeObserver)

尺寸观察器(ResizeObserver) 是浏览器提供的一个 API,用于监听指定元素内容盒或边框盒尺寸的变化,并在尺寸改变时异步触发回调。它填补了长期以来无法优雅监听元素级别尺寸变动的空白。

概述

在 ResizeObserver 出现之前,开发者只能通过监听窗口的 resize 事件间接推断元素尺寸变化,但窗口不变而元素因内容、布局或父容器改变而变化的情况无法覆盖。ResizeObserver 直接观察元素本身,无论尺寸因何原因改变都能感知。

核心特点

• 可观察任意元素的尺寸变化,而非仅限于视口。
• 回调中提供 contentRect 及不同盒模型的尺寸信息。
• 观察过程异步进行,并做了防抖与批处理,减少性能开销。
• 内置了对无限循环的检测机制,当回调中修改尺寸导致再次触发时会发出警告。

应用场景

ResizeObserver 常用于构建根据自身宽度自适应的组件,例如图表在容器变化时重新绘制、文本根据宽度调整截断、以及在原生容器查询普及前手动实现类似逻辑。它也用于虚拟列表测量行高、编辑器自适应高度等需要精确掌握元素尺寸的场景。

常见问题

问:它能替代 CSS 容器查询吗?答:两者目标相近但层次不同。容器查询是纯 CSS 声明式方案,ResizeObserver 是命令式 JavaScript API,适合需要在尺寸变化时执行复杂逻辑的场景。

问:为什么会出现循环警告?答:如果在回调中修改了被观察元素的尺寸,可能引发新一轮观察,浏览器检测到未在同一帧内收敛时会跳过并提示,避免无限循环。