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