Intersection Observer
The standard way to implement lazy loading, infinite scroll, ad viewability tracking, and scroll-triggered animations. Far more performant than scroll event listeners — runs off the main thread.
What It Defines
Asynchronous API to observe when elements enter or exit the viewport (or a specified root element). Returns IntersectionObserverEntry objects with intersection ratios and bounding rects. Replaces scroll-based visibility detection.
Canonical (Normative)
Convenient (Practical)
Publishes web platform specs including CSS, accessibility, security policies, Service Workers, Web App Manifest, and many browser APIs. Also maintains some versioned HTML/DOM specs.
Related Specs
Every frontend framework (React, Vue, Svelte) ultimately produces DOM operations. Understanding the event model and tree structure prevents subtle bugs.
Essential for responsive components that need to adapt to their container size (not just viewport). Powers container-query polyfills, responsive charts, and layout-aware components.
The data source behind Core Web Vitals (LCP, FID/INP, CLS), RUM (Real User Monitoring), and performance debugging. PerformanceObserver is the modern API; the older performance.timing is deprecated.