ResizeObserver 专用于监听任意 DOM 元素的尺寸变化，包括宽高、边框、内边距等盒模型变化，不依赖 window.resize；它通过 observe() 监听指定元素，回调中通过 entry.target 精准识别目标，contentRect 提供高精度像素值，支持多元素观察但天然隔离，需注意避免循环触发和及时释放资源。
ResizeObserver 本身不用于监听整个窗口尺寸变化（那是 window.onresize 或 matchMedia 的职责），而是专为**监听任意 DOM 元素的尺寸变化**而设计——包括宽高、边框、内边距等盒模型变化。它天然支持“监听某一个特定元素”，无需额外过滤，也完全不依赖窗口 resize 事件。
创建 ResizeObserver 并观察目标元素
只需实例化一个 ResizeObserver，调用 observe() 方法传入你要监控的具体 DOM 元素即可。它会自动在元素尺寸（content box）变化时触发回调：
- 确保目标元素已存在于 DOM 中（可在
DOMContentLoaded后或元素挂载后执行） - 回调函数接收一个
entries数组，每个 entry 包含target（被观察元素）和contentRect（含width/height等精确尺寸） -
contentRect是只读对象，单位为像素，精度高且不含四舍五入误差
只响应目标元素自身变化，不干扰其他元素
每个 ResizeObserver 实例可同时观察多个元素，但回调中可通过 entry.target === yourElement 明确判断是否是你要关注的那个元素。若只关心一个元素，直接观察它即可，完全隔离：
const targetEl = document.getElementById('my-panel');
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
if (entry.target === targetEl) {
const { width, height } = entry.contentRect;
console.log(`尺寸更新：${width}×${height}`);
// 在这里执行你的逻辑，比如重绘图表、调整布局等
}
}
});
ro.observe(targetEl); // ✅ 只监听这一个元素
注意边界情况与最佳实践
ResizeObserver 对以下变化敏感：CSS 宽高修改、flex/grid 布局重排、内容增减导致的自动伸缩、display: none 切换（但不触发隐藏时的回调）、字体加载影响行高（间接影响高度）。但需注意：
立即学习“Java免费学习笔记（深入）”；
- 不监听滚动条出现/消失引起的尺寸微变（除非它改变了 content box）
- 避免在回调中直接修改被观察元素的尺寸（可能触发新一轮回调，造成循环）
- 记得在不需要时调用
ro.unobserve(targetEl)或ro.disconnect()释放资源 - 服务端渲染（SSR）环境下需确保在客户端 DOM 就绪后再初始化
对比 window.resize 的根本区别
用 window.addEventListener('resize', ...) 监听的是浏览器视口变化，每次触发都要手动去查某个元素尺寸（getBoundingClientRect()），效率低、易漏判、无法感知非窗口驱动的尺寸变化（如父容器 flex 变化导致子元素收缩）。而 ResizeObserver 是被动响应、精准到元素、零轮询、原生高性能 —— 它就是为“监听某一个特定 DOM 元素”而生的。
