一个intersectionObserver 观察多个元素或每个元素一个intersectionObserver答案

【问题标题】：One intersectionObserver to observe many elements or one intersectionObserver per element一个intersectionObserver 观察多个元素或每个元素一个intersectionObserver
【发布时间】：2019-04-26 12:38:51
【问题描述】：

我们的页面中有一些 CustomElements，其中一些具有相对于观察它们的视口的 IntersectionObserver。随着设计师似乎喜欢交叉点动画，这个数字可能会增加。

这会导致性能问题吗？是拥有一个观察所有元素的 IntersectionObserver 还是多个只观察一个元素的 IntersectionObserver 更好？

【问题讨论】：

这很难回答和猜测，取决于很多因素，例如 DOM 大小、这些动画发生的频率、用户如何使用网站、您支持的浏览器等等。一般来说，我猜测对于多达 10-20 个元素，添加单独的观察者比观察共享的根更可取，而且最好是与一个共同的根，尽管真的 - 我不希望它是一个无论如何，这是个大问题。
我可以向您推荐在 Chromium 中执行实际工作的代码，但我认为这不会帮助您回答您的问题 - 老实说，它应该足够快，除非您这样做数百个元素一次。
见bennadel.com/blog/… - 它说可以更快。
谢谢。我想我们就这样结束了。这是 2 年前 :P

标签： javascript performance intersection-observer

【解决方案1】：

如前所述，有很多因素需要考虑！

我专门为一个重媒体网站制作了以下库。一个普通的用户会话可能设置和拆除 > 1000 个观察者。

由于一切都发生在主线程之外，因此很难像 show here 那样观察内存使用情况。然而，指标向我们展示了所有元素的一个 IntersectionObserver 为用户提供了整体改进。这个包应该比较好用！

https://github.com/snewcomer/intersection-observer-admin

【讨论】：