JavaScript 浏览器 Resize Observer 监听尺寸变化怎么做

ResizeObserver 是浏览器原生 API，用于精准高效监听 DOM 元素尺寸变化，支持 content-box 和 border-box 尺寸获取，需注意兼容性及内存泄漏防范。

ResizeObserver 是浏览器原生提供的 API，用于监听 DOM 元素尺寸变化，比轮询或监听 window.resize 更精准、更高效，尤其适合响应式布局、图表容器适配、虚拟滚动等场景。

创建并启用 ResizeObserver

实例化 ResizeObserver 时传入一个回调函数，该函数接收两个参数：entries（变化的元素列表）和 observer（当前观察器实例）。每次目标元素尺寸变化（包括宽高、边框、padding 等盒模型变化），回调就会触发。

注意：它只监听元素自身的尺寸变化，不触发父元素或视口变化（除非你显式观察父元素）。

• 用 observe() 方法开始监听某个元素
• 用 unobserve() 停止监听单个元素
• 用 disconnect() 彻底停止所有监听并清空队列

监听单个元素尺寸变化

最常见用法是监听某个容器是否被拉伸或收缩，比如图表、图片画布、自适应卡片等：

立即学习“Java免费学习笔记（深入）”；

const box = document.getElementById('my-box');
const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`新尺寸：${width} × ${height}`);
    // 在这里更新图表、重绘 canvas 或调整子元素
  }
});
ro.observe(box);

注意 contentRect 是基于 content-box 的尺寸（不含 padding/border/margin），如需 border-box 尺寸，可读取 entry.borderBoxSize[0]（需检查兼容性）。

批量监听多个元素 & 处理销毁逻辑

可以一次 observe 多个元素，回调中遍历 entries 即可区分；但要注意在组件卸载或元素移除前调用 unobserve 或 disconnect，避免内存泄漏：

• React/Vue 中建议在 useEffect/onUnmounted 里调用 disconnect
• 手动管理时，可在元素 remove 前执行 ro.unobserve(el)
• 不要在回调里反复 observe/unobserve 同一元素，可能引发循环或性能问题

兼容性与降级方案

现代浏览器（Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+）均支持 ResizeObserver。旧版 Safari（

• 用 window.resize + getBoundingClientRect() 轮询（仅适用于视口变化或简单场景）
• 引入 polyfill（如 juggle/resize-observer）
• 服务端渲染时，首次 hydrate 后再初始化 Observer（避免 SSR 环境报错）