用于更改getBoundingClientRect（）的事件或观察器

Question

是否有一种方法可以检测元素的getBoundingClientRect()矩形何时更改而无需实际计算getBoundingClientRect()？有点像“脏旗”？天真的，我认为浏览器的内部工作环境中一定存在这样的机制，但是我无法在DOM API中找到这个东西。也许可以通过MutationObservers来做到这一点？

我的应用程序是一个Web组件，它将DOM元素转换为图形的节点，并将边缘绘制到全屏画布上。参见here。

现在，我正在为每个元素调用getBoundingClientRect()，每个动画帧框架调用一次，即使什么都没有改变。感觉很贵。我通常在一台功能强大的计算机上以60 fps的速度获得％15-％50的CPU使用率。

有人知道这样的事吗？您认为期望这样的事情合理吗？这种事可行吗？有没有被提议过？

Answer 1

如上述评论中所述。您要查找的API是：ResizeObserver和IntersectionObserver。但是，需要注意一些事项：

• ResizeObserver仅在观察到的元素更改大小时才会触发。实际上，它只会为您提供正确的宽度和高度值。
• ResizeObserver和IntersectionObserver都不会阻塞绘画，因此您不能依靠它们同步进行事件。认为它们更像是事后发出变更通知。

如果您需要位置变化跟踪怎么办

这就是IntersectionObserver的作用。它通常可用于可见性检测。这里的问题是IntersectionObserver仅在相交比例发生变化时才会触发。这意味着，如果一个小孩在较大的容器div中移动，并且跟踪父级和子级之间的交集，则除非该子级进入或退出父级，否则您将不会获得任何事件。

您仍然可以跟踪元素何时移动。这是这样的：

• 首先使用getBoundingClientRect测量要跟踪的元素的位置。
• 将div作为主体的绝对直接子代插入，该子代完全位于被跟踪元素所在的位置。
• 开始跟踪此div与原始元素之间的交集。
• 交集应从1开始。只要它改变为其他值：
  • 使用getBoundingClientRect重新测量元素。
  • 触发位置/大小更改的事件
  • 将自定义div的样式更新为元素的新位置。
  • 观察者应该以1的相交比再次发射，此值可以忽略。

注意：此技术还可用于ResizeObserver的高效复方药，这是IntersectionObserver的新功能。常用的填充料依赖MutationObserver，效率低得多。