As the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code, resulting in an experience that leaves the user frustrated with the browser, the web site, and their computer. The author of the web site may not even realize this is happening, since they may know very little about the inner workings of the two libraries they are using. Each of these has its own intersection detection routines, all running on the main thread. It uses a vendor-provided library to manage the advertisements placed periodically throughout the page, has animated graphics here and there, and uses a custom library that draws notification boxes and the like. When a site is loaded with these tests, things can get downright ugly.Ĭonsider a web page that uses infinite scrolling.
Since all this code runs on the main thread, even one of these can cause performance problems. Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected.
Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. 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.