= IntersectionObserver = ''by Ali Juma (ajuma@chromium.org)'' - Goal: find out if an element is visible - Fully visible? - Partially visible? - Entirely offscreen? - Sites do this with JS with bounding boxes over and over again - API Overview - var observer = new InstesectionObserver(callback, options); - Options: - root: Interseection with respect to an element or if null the viewport - threshold: what fraction of intersection triggers notfication - `observer.observe(target)` - Implementation Challenges - Lifetime management - The observer and its callback need to live as long as there are targets to observe. - Even if the observer no longer has any JS references - The callback will keep the document alive. - It’s easy to accidentally keep the document alive indefinitely - Lack of Event Loop support - HTML EventLoop - https://webkit.org/b/160711 - https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8 - Blink and Gecko schedule rAF in-sync with “updating the rendering” (that is, producing a frame) - Any setTimeout call during rAF is guaranteed to fire after style/layout/paint for producing a frame - IntersectionObserver WPTs depend on this model - So do other WPTs