resizeObserver vs intersectionObserver 性能

Question

每当 dom 的高度发生变化（例如广告加载并导致布局移位）时，我需要在元素 X 上运行一个方法。

我能想到的最简单的 dom-wise 方法是resizeObserver或intersectionObserver 。

intersectionObserver解决方案将永久观察元素 X 并在它出现在屏幕上时运行该方法。 缺点是每次滚动过去时它都会运行。

resizeObserver解决方案将永久观察页面的主容器（包含所有可能的移动元素）的高度变化（dom 移动），然后运行该方法。 不利的一面是它可以在页面加载期间运行多次，但有利的一面是它不会在此之后再次运行。

有没有办法测试/知道哪种方法在整个 dom 上更轻？ 因为他们都是永久的观察者。

Answer 1

您可以消除 resizeObserver 回调，以便在用户完成调整大小时运行一次。

这里有一些例子： https://css-tricks.com/debouncing-throttling-explained-examples/