如何通过ResizeObserver API实现复杂元素尺寸变化的实时响应？

本文共计1178个文字，预计阅读时间需要5分钟。

目录 + API介绍 + 浏览器兼容性 + 用法 + 总结 + API介绍 + 需要知道一个元素的大小变化或屏幕横竖屏变化时，需监听window.resize事件或window.orientationchange方法。由于resize事件会在一秒内触发，请注意。

目录

• API介绍
• 浏览器兼容性
• 用法
• 总结

API介绍

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

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

• 某个节点的出现和隐藏
• 某个节点的大小变化

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

实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式，在很多地方都有使用到。