ResizeObserver 作用是什么

ResizeObserver 用于观察元素尺寸的变化，并在尺寸变化时触发回调函数。它适用于动态调整布局、响应式设计等场景。

主要作用

1. 监测元素尺寸变化：实时检测元素的宽度、高度等变化。

2. 替代传统方法：相比 window.resize 或 MutationObserver，它更高效且精准。

3. 优化性能：只在尺寸变化时触发回调，减少不必要的计算。

使用示例

const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
        console.log('尺寸变化:', entry.contentRect);
    }
});

const targetElement = document.querySelector('.resizable');
observer.observe(targetElement);

适用场景

• 响应式布局：根据元素尺寸调整布局。

• 图表重绘：图表容器尺寸变化时重新绘制。

• 自适应组件：组件根据尺寸变化调整内部元素。

兼容性

现代浏览器基本支持，但旧版浏览器可能需要 polyfill。