Motivation
响应式网站/Web应用程序 根据视口大小调整内容展示方式。这通常通过CSS和media查询来完成。当CSS表现不好我们会使用Javascript。
比如document.addEventListener("resize",fun)或者Element的onresize属性。通过监听window.resize事件，Javascript DOM操作与视口大小保持同步。
但你会意识到，这甚至不包括在窗口未被调整大小但元素改变其大小的情况。例如，添加新的子元素，设置元素的display样式none或类似的操作会改变元素，其兄弟或祖先的大小。
随着响应式Web应用程序的普及，对响应式组件的需求也会增加。这些组件也需要有对resize事件做出响应。不幸的是，Web平台目前不提供组件跟踪其大小的方法。
Current workarounds
一些应用程序实施自制的调整大小通知框架（例如：Polymer）。这种方法容易出错，难以维护，并且需要每个组件都实施自制方法。
其他人巧妙的通过可以代替调整事件的事件来调整内容（例如：<a href="https://zhishitu.com">element-resize-detector</a>）。目前最优秀的方法都使用类似的技巧：
在组件中插入一个绝对定位的子项，并且以发出滚动事件的方式制作子项，或者在父项大小更改时制作window.resize。
绝对定位的子项方法在ShadowDOM或React等框架中不起作用。
这些方法都不可取。它们在正确性，代码复杂性和性能方面都失败了。
在当今的Web平台上无法复制ResizeObserver功能。
这就是为什么ResizeObserver是一个有用的原始API。它对任何观察到的元素的大小的变化作出反应，与导致变化的原因无关。它还为您提供访问观察元素的新大小。
API
提到的“Observer”后缀的API共享一个简单的API设计。ResizeObserver也不例外。
您创建一个ResizeObserver 对象并将回调传递给构造函数。回调将被赋予一个数组ResizeOberverEntries- 每个观察元素一个条目 - 包含元素的大小
var ro = new ResizeObserver( entries => {
for (let entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px x ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);