一：概述

在现代前端开发中，动态响应用户交互和内容变化是一个常见需求。那么，浏览器提供了ResizeObserver 是一个专门用于观察元素尺寸变化的API。它在元素的宽度或高度发生变化时触发回调函数。

二：定义

1：作用：只关注元素的尺寸变化（宽度和高度），节点的显示隐藏

2：特点：设计考虑了性能，避免频繁回调，适用于对元素尺寸变化做出响应的场景

3：属性

unobserve()=>取消监听某个节点

disconnect()=>取消对所有节点监听

4：代码

const element = document.getElementById('element');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('New size:', entry.contentRect.width, entry.contentRect.height);
  }
});

resizeObserver.observe(element);

5：适用场景

响应式布局=>可以实时监控变化进行调整

图表重绘=>尺寸发生变化，重绘图表

媒体元素调整=>当窗口大小变化时，需要调整视频的尺寸以保持最佳观看体验

三：总结

1：ResizeObserver 专注于尺寸变化

四：拓展

（一）：ResizeObserver VS MutationObserver的区别？

1：ResizeObserver 专注元素尺寸变化，MutationObserver后者关注 DOM 结构和属性变化

2：ResizeObserver 避免了频繁回调，而MutationObserver取决于观察对象变化频率