javascript - resizeObserver vs intersectionObserver 性能

Question

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

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

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

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

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

标签： javascriptperformanceobserversintersection-observer

Answer 1

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

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