Menu
We have a few CustomElements in our page and some of them have an IntersectionObserver relative to the viewport observing them. That number might be increasing as the designer seems to like intersection animations.
Will that lead to performance issues? Is it better to have one IntersectionObserver that observes all elements or many IntersectionObservers that only observe one element?
414
observe() The IntersectionObserver method observe() adds an element to the set of target elements being watched by the IntersectionObserver . One observer has one set of thresholds and one root, but can watch multiple target elements for visibility changes in keeping with those.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
Experimental: This is an experimental technology. Check the Browser compatibility table carefully before using this in production. The IntersectionObserver interface's read-only rootMargin property is a string with syntax similar to that of the CSS margin property.
As already stated, there are a lot of factors to consider!
I made the below library specifically for a media heavy site. A normal user session might setup and teardown > 1000 observers.
Since everything happens off the main thread it is hard to observer memory usage as show here. However, metrics showed us one IntersectionObserver for all the elements gave users an overall improvement. This package should be relatively easy to use!
https://github.com/snewcomer/intersection-observer-admin
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
