如何用ResizeObserver API实现网页元素动态调整大小？

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

目录- 写在前端- API介绍- 浏览器兼容性- 使用方法- unobserve()- disconnect()- 写在前端- 今天在查看同一事务代码的时候，看到这个API，出于好奇就去了了解一下。结果发现还不错，就去了解了一下。- 这是一个实验中的功能，此功能某些浏览器正在尝试。-

目录

• 写在前面
• API介绍
• 浏览器兼容性
• 用法
• unobserve()
• disconnect()

写在前面

今天在看同事代码的时候看见这个API，出于好奇就去了解了一下。

这是一个实验中的功能 此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。——来自MDN的提醒

API介绍

众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。

换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。

如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。