js ResizeObserver监听元素大小、显隐变化

为什么不用 resize

• 性能更好

  • 对于窗口大小改变野可以用 addEventListener 监听 resize 事件，但由于reize事件会在一秒内触发将近60次，所以window.resize事件通常是很消费性能的
  • resize 是全局监听；ResizeObserver 只会监听指定的元素
  • ResizeObserver 在每帧绘制之前触发，确保所有的布局和重绘操作可以在一帧的生命周期内完成。这使得回调函数的执行能够更加及时，避免了额外的重绘和布局计算，从而提高性能。

• 避免死循环

  • 避免了通过回调函数调整大小时，创建的无限回调循环和循环依赖项
  • ResizeObserver 在浏览器开始绘制之前确保处理完所有的调整和重排，从而避免了布局抖动（layout thrashing）和不必要的性能损耗。因此，在当前帧的生命周期内，所有的尺寸变化处理（包括回调）都会发生，而不是推迟到下一帧。

• 监听多样化

  • 非仅限于窗口大小变化。可以监听 Element 的内容区域、SVGElement 的边界框改变、某个节点的出现和隐藏

• 可以在内置元素中工作

  • ResizeObserver 不仅可以在常规 HTML 元素中工作，还可以在内置元素（例如）中工作