在Javascript中使用ResizeObserver 监听dom元素

API介绍

当我们需要知道一个元素的大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于：

1. 某个节点的出现和隐藏
2. 某个节点的大小变化

ResizeObserver API是一个新的JavaScript API，与IntersectionObserver API非常相似，它们都允许我们去监听某个元素的变化。

实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式，在很多地方都有使用到。如Nodejs的Event模块，Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书，对Vue的通信感兴趣的可以看看Vue官网啦。

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）

ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

构造器

ResizeObserver()

创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

ResizeObserver.disconnect()

取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()

开始观察指定的 Element或 SVGElement。

ResizeObserver.unobserve()

结束观察指定的Element或 SVGElement。

示例

以下示例通过观察box的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('大小位置', entry.contentRect)
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

规范

Specification	Status	Comment
Resize Observer ResizeObserver	Editor's Draft	Initial definition.

浏览器兼容性

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
ResizeObserver	Full support64	Full support79	Full support69	No supportNo	Full support51	Full support13.1	Full support64	Full support64	No supportNo	Full support47	Full support13.4	Full support9.0
ResizeObserver() constructor	Full support64	Full support79	Full support69	No supportNo	Full support51	Full support13.1	Full support64	Full support64	No supportNo	Full support47	Full support13.4	Full support9.0
disconnect	Full support64	Full support79	Full support69	No supportNo	Full support51	Full support13.1	Full support64	Full support64	No supportNo	Full support47	Full support13.4	Full support9.0
observe	Full support64	Full support79	Full support69	No supportNo	Full support51	Full support13.1	Full support64	Full support64	No supportNo	Full support47	Full support13.4	Full support9.0
unobserve	Full support64	Full support79	Full support69	No supportNo	Full support51	Full support13.1	Full support64	Full support64	No supportNo	Full support47	Full support13.4	Full support9.0

---

本文内容并非原创，仅为记录。文章来源：

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver 。

https://zhuanlan.zhihu.com/p/41418813