目录
- API介绍
- 浏览器兼容性
- 用法
- 总结
API介绍
当我们需要知道一个元素的大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。
而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于：
- 某个节点的出现和隐藏
- 某个节点的大小变化
ResizeObserver API是一个新的JavaScript API，与IntersectionObserver API非常相似，它们都允许我们去监听某个元素的变化。
实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式，在很多地方都有使用到。如Nodejs的Event模块，Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书，对Vue的通信感兴趣的可以看看Vue官网啦。
所以呢，我个人认为，ResizeObserver API的出现是用于替代window.resize方法糟糕的性能的。（不喜亲喷: (）
浏览器兼容性
虽然可以用来替代resize事件。但是它，很新，新到只有部分浏览器支持。
但是不要怂呀，如果想使用它，可以使用其polyfill。最低可以兼容到IE8以上的浏览器啦。所以以后在开发过程中如果想使用resize事件监听DOM的大小变化时，何不尝试一下ResizeObserver API呢？
用法
使用ResizeObserver API非常简单。ResizeObserver是个构造函数。在使用new关键字调用构造函数，返回实例对象时，需要传入一个回调函数，这个回调用于监听实例对象某个DOM节点的变化。如
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('大小位置', entry.contentRect)
console.log('监听的DOM', entry.target)
})
})
myObserver.observe(document.body)
以上，调用实例对象的observe方法，监听整个body节点的变化，当改变窗口大小或者某个DOM节点出现或隐藏时时，就会触发回调。
触发回调后的第一个参数是一个ResizeObserverEntry对象。这里的entry.target是DOM节点本身，而entry.contentRect是一个对象，包含了节点的位置属性，如width, height, left, right, bottom, left, x, y等。
width：指元素本身的宽度，不包含padding，border值
height：指元素本身的高度，不包含padding，border值
top：指padidng-top的值
left：指padding-left的值
right：指left + width的值
bottom: 值top + height的值
x：大小与top相同
y：大小与left相同，不知道具体是指什么
明白了contentRect之后，就可以在使用这个api的时候针对不同场景获取不同的值进行业务的开发。
接着，如果想在监听多个DOM节点的变化，直接在一个实例对象上调用多次observe方法就好了。如
const myObserver = new ResizeObserver(entries => {
// 注意，entres是个数组，数组项为每个需要监听的DOM节点
entries.forEach(entry => {
console.log('大小位置 contentRect', entry.contentRect)
console.log('监听的DOM target', entry.target)
})
})
myObserver.observe(document.body)
myObserver.observe(document.querySelector('#app'))
然后，实例对象myObserver方法除了有observe方法之外，还有disconnect方法和unobserve方法。
unobserve方法，顾名思义了，就是取消监听某个DOM节点。比如说想在两秒后取消监听document.body，那么这样做就好了
window.setTimeout(() => {
myObserver.unobserve(document.body) // 需要接收一个参数
}, 2000)
disconnect方法呢，就是取消对所有节点的监听。比如说想在四秒后取消监听所有节点，那么
window.setTimeout(() => {
myObserver.disconnect() // 此时就不会再监听document.body,和#app节点了
}, 4000)
最后，在使用ResizeObserver API的时候，在每次触发元素的大小变化时，会在1s内触发回调蛮多次的。如果想进一步优化性能，可以加上throttle节流函数处理
// throttle需要自行引入哈
const myObserver = new ResizeObserver(throttle(entries => {
entries.forEach(entry => {
console.log('大小位置 contentRect', entry.contentRect)
console.log('监听的DOM target', entry.target)
})
}), 500)
这样子就能做到每个500ms触发一次回调啦。是不是很劲（粤语）
总结
好的，关于ResizeObserver API的介绍就到这里了，如果想要一个更加具体的例子，可以参考
JavaScript API ResizeObserver使用示例
https://github.com/que-etc/resize-observer-polyfill
更多关于ResizeObserver API使用的资料请关注易盾网络其它相关文章！