Improve GlIntersectionObserver performance
Description
The GlIntersectionObserver creates an IntersectionObserver for every instance. When implementing the GlResizeObserver we learned that these observers are meant to be shared. This is because there's a bottleneck with passing messages from the native environment to the JavaScript environment.
Demo
Here's a patch that creates a 100x10 table filled with gl-intersection-observers which each update with the intersectionRatio of the triggered event.
0001-wip-big-table-example.patch
Observers created for every instance (on master) |
Observers shared (this proposal) |
|---|---|
| 20200311_lots_of_intersection_observers_slow | 20200311_shared_intersection_observer |
- Notice that the first example the numbers take a long time to update. This is because there's a huge lag for triggering every "IntersectionObservable" callback.
-
side note: I'm not sure where the decimals come from, but I think this has to do with the experimental nature of IntersectionObserver
🤷 - Here's a dummy WIP patch used for the "Observers shared" example: 0002-wip-shared-intersection-observer.patch
Proposal
I suggest following the implementation of ResizeObserver as an example for this behavior:
- Let's just create one intersection observable for now (later we can figure out what to do if we want some more explicit options)
- Let's move this to a directive (this way we don't create unnecessary
<div>s)
Edited by Paul Slaughter