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/