javascript - getBoundingClientRect()更改的事件或观察者

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

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

现在，即使没有任何变化，我也会为每个元素调用getBoundingClientRect()，每个动画帧调用一次。感觉很贵。我通常在一台性能相当不错的计算机上以60 fps的速度获得％15-％50的CPU使用率。

有人知道这样的事吗？您认为期望这样的事情合理吗？这种事可行吗？曾经有人提出过吗？

最佳答案

如以上评论中所述。您要查找的API是:ResizeObserver和IntersectionObserver。但是，有几件事要注意:

ResizeObserver仅在观察到的元素更改大小时才会触发。它实际上只会为您提供正确的宽度和高度值。

ResizeObserver和IntersectionObserver都应该不会阻塞绘画，因此您不能依靠它们同步进行事件。认为它们更像是事后发出变更通知。

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

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

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

首先使用getBoundingClientRect测量要跟踪的元素的位置。

插入div作为主体的绝对定位直接子代，该子代完全位于被跟踪元素所在的位置。

开始跟踪此div和原始元素之间的交集。

相交应该从1开始。

使用getBoundingClientRect重新测量元素。

触发位置/大小更改事件

将自定义div的样式更新为元素的新位置。

观察者应再次以1的相交比触发，此值可以忽略。

注意:此技术还可以用于ResizeObserver的更有效的polypill，这是比IntersectionObserver较新的功能。常用的polyfills依赖MutationObserver，效率低得多。