替代resize的ResizeObserver API

API对比

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

ResizeObserver API

监听一个DOM节点的变化，这种变化包括但不仅限于：

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

 实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。

// 创建并返回一个ResizeObserver对象
const myObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
        // entry.contentRect是一个对象，包含了节点的位置属性，如width, height, left, right, bottom, left, x, y等。
          console.log('大小位置', entry.contentRect)
          console.log('监听的DOM', entry.target)
        })
      })


// 监听多个DOM节点的变化，直接在一个实例对象上调用多次observe方法
myObserver.observe(document.body)
myObserver.observe(document.querySelector('#app'))

// 取消监听某个DOM节点
myObserver.unobserve(document.body) 

// 取消对所有节点的监听，此时就不会再监听document.body,和#app节点了
myObserver.disconnect()