前言 在前端开发中，我们常常需要监听页面中元素的尺寸变化，以实现各种动态布局和交互效果。传统的方法，如监听 window.resize 事件、使用定时器轮询 DOM 尺寸、借助 MutationObserver 或引入第三方库等，都存在一定的局限性。它们要么无法精准地监听特定元素的尺寸变化，要么性能开销较大，要么实现起来较为复杂。而 ResizeObserver 的出现，为我们提供了一种更简单、更高效、更精准的解决方案。
ResizeObserver 是什么？ ResizeObserver 是一个专门用于监听 DOM 元素尺寸变化的原生 API。它基于浏览器底层的布局机制，能够异步地检测元素的尺寸变化，并在发生变化时触发相应的回调函数。与传统的监听方式不同，ResizeObserver 直接关注元素自身的尺寸变化，而不是依赖窗口变化或 DOM 结构变化来间接推断。
ResizeObserver 的基本用法 使用 ResizeObserver 非常简单。首先，创建一个 ResizeObserver 实例，并传入一个回调函数。在回调函数中，可以获取到包含目标元素尺寸信息的 entries 对象。然后，调用 observe 方法并传入目标元素，即可开始监听该元素的尺寸变化。
const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { console.log('元素尺寸变化：', entry.contentRect); } });
resizeObserver.observe(document.querySelector('#targetElement')); 实战场景与代码示例 场景一：图表的自适应布局 在数据可视化项目中，我们经常使用 ECharts、Highcharts 等图表库。为了让图表能够自适应容器的尺寸变化，我们可以在容器尺寸发生变化时重新绘制图表。借助 ResizeObserver，可以轻松实现这一功能。
const chartContainer = document.getElementById('chartContainer'); const chart = echarts.init(chartContainer);
const resizeObserver = new ResizeObserver(() => { chart.resize(); });
resizeObserver.observe(chartContainer); 场景二：响应式布局的优化 对于一些需要根据容器宽度动态调整布局的组件，如按钮组、菜单、卡片布局等，ResizeObserver 可以帮助我们实现更流畅的响应式体验。
const container = document.getElementById('responsiveContainer'); const resizeObserver = new ResizeObserver((entries) => { const width = entries[0].contentRect.width; if (width > 600) { container.className = 'layout-row'; } else { container.className = 'layout-column'; } });
resizeObserver.observe(container); 场景三：复杂布局中的 iframe 尺寸监听 在一些复杂的嵌套布局中，特别是涉及 iframe 时，传统的监听方法往往无法准确获取 iframe 内部元素的尺寸变化。而 ResizeObserver 能够轻松应对这一挑战。
const iframe = document.getElementById('myIframe'); const iframeDocument = iframe.contentDocument; const iframeElement = iframeDocument.getElementById('targetElement');
const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { console.log('iframe 内部元素尺寸变化：', entry.contentRect); } });
resizeObserver.observe(iframeElement); ResizeObserver 的优势与注意事项 优势 • 精准监听 ：直接关注元素自身尺寸变化，避免了传统方法中可能出现的误判。 • 性能友好 ：基于浏览器底层布局机制异步执行，对页面性能的影响较小。 • 使用简便 ：API 简洁易懂，易于上手和集成到项目中。 注意事项 • 避免同步读取布局 ：在 ResizeObserver 的回调中，尽量避免同步读取布局相关的属性（如 offsetHeight），以免引发强制回流，影响性能。 • 控制回调频率 ：在一些高频率布局变化的场景中，可以结合防抖（debounce）或节流（throttle）技术来控制回调的触发频率。 • 正确管理生命周期 ：在使用框架（如 Vue、React）时，要注意在组件的生命周期中正确地绑定和解绑 ResizeObserver，防止内存泄漏。 • 浏览器兼容性 ：虽然主流浏览器均已支持 ResizeObserver，但对于一些老旧的浏览器（如 IE），仍需要使用 Polyfill 来实现兼容。
