如何將 ResizeObserver 用於多種行為

Question

當您有一個實例管理許多元素的行為時，似乎最好使用ResizeObserver （正如“ResizeObserver one vs multiple performance” 的來源之一所指出的那樣）：

在寬度/高度的 2 秒 animation 期間觀察 126 個 div 的大小。

1. 所有元素都由單個 ResizeObserver 觀察。

   總觀察時間：69ms

2. 每個元素由單獨的 ResizeObserver 觀察。

   總觀察時間：585ms

但是，據我所知，您只能為ResizeObserver的實例真正指定一個行為，然后針對它正在觀察的任何元素運行該行為。 我應該如何觀察具有不同行為的多個元素？ 據我所知，我可以：

• 使用ResizeObserver的單個實例並在運行時確定應該對給定元素使用什么行為（這似乎不必要地復雜，而且我不知道比較元素引用在生產中的可靠性如何），或者
• 使用多個ResizeObserver實例，這將使行為更簡單，但理論上會降低性能。

或者，使用多個ResizeObserver實例的性能損失甚至是我應該在中小型規模上擔心的事情嗎？

Answer 1

…在運行時弄清楚給定元素應該使用什么行為（這看起來不必要的復雜，而且我不知道比較元素引用在生產中的可靠性如何）…

我不認為這需要特別復雜。

你可以有一個行為集合，每個行為都有一個predicate function 和一個handler function。 謂詞確定它是否適用於給定元素，並且處理程序執行該行為。 （如果你有成千上萬的行為，這可能不是超級性能，但我假設你沒有。）

這些方面的東西？

const behaviors = [
  {
    predicate: element => element.classList.contains('first'),
    handler: element => {
      // do stuff
    }
  },
  {
    predicate: element => element.classList.contains('second'),
    handler: element => {
      // do other stuff
    }
  },
];

const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
      // for single behavior
      behaviors.find(b => b.predicate(entry))?.handler(entry);
      
      // or every applicable behavior
      behaviors
        .filter(b => b.predicate(entry))
        .forEach(b => b.handler(entry);
    }
})