Один IntercctionObserver для наблюдения за множеством элементов или один IntercctionObserver для каждого элемента

У нас есть несколько CustomElements на нашей странице, и у некоторых из них есть IntersectionObserver относительно наблюдающего за ними окна просмотра. Это число может увеличиваться, поскольку дизайнеру нравится анимация пересечений.

Приведет ли это к проблемам с производительностью? Что лучше: один IntersectionObserver, наблюдающий за всеми элементами, или несколько IntersectionObserver, наблюдающих только за одним элементом?


javascript performance intersection-observer
person Sergio Tx    schedule 26.04.2019    source источник
comment
На этот вопрос очень сложно ответить и угадать, и это зависит от множества факторов, таких как размер DOM, частота появления этих анимаций, то, как пользователи используют сайт, какие браузеры вы поддерживаете и других факторов. В общем, я бы предположил, что для 10-20 элементов добавление отдельных наблюдателей предпочтительнее, чем наблюдение за общим корнем, и что лучше быть с одним, хотя на самом деле - я бы не ожидал, что это будет в любом случае огромная проблема.   -  person Benjamin Gruenbaum    schedule 26.04.2019
comment
Я могу отослать вас к коду, который выполняет фактическую работу в Chromium, но я не думаю, что это поможет вам ответить на ваш вопрос - честно говоря, он должен быть достаточно быстрым, если вы не делаете это с сотнями элементов одновременно.   -  person Benjamin Gruenbaum    schedule 26.04.2019
comment
См. bennadel.com/blog/ - там сказано, что можно быть намного быстрее.   -  person krassowski    schedule 21.03.2021

Ответы (1)


arrow_upward
1
arrow_downward

Как уже было сказано, необходимо учитывать множество факторов!

Я сделал приведенную ниже библиотеку специально для мультимедийного сайта. В обычном пользовательском сеансе может быть установлено и отключено> 1000 наблюдателей.

Поскольку все происходит вне основного потока, трудно наблюдать за использованием памяти, как показано здесь. Однако показатели показали нам один IntersectionObserver для всех элементов, что дало пользователям общее улучшение. Этот пакет должен быть относительно простым в использовании!

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

person snewcomer    schedule 29.02.2020