Watch your back, Browser! You're being observed
summary
Demonstrates concrete wins: replacing scroll handlers and boundingClientRect cuts CPU and raises animation from ~31fps to ~59fps using IntersectionObserver for lazy loading; watches DOM changes with MutationObserver to trigger schedule effects; uses PerformanceObserver to receive paint and long‑task metrics (and discusses polyfills and browser gaps); experiments with ResizeObserver plus an Observable pipeline (skip, pairwise, filter) to dedupe open/close events for a confetti animation — the demos mostly work but reveal extra resize firings and cross‑vendor inconsistencies.
AI-written summary · about
chapters (14)
- 0:00Intro
- 0:58I'm excited about conferences and meetups
- 1:38Staying up to date is part of our job
- 2:01Browser APIs adapt common use cases
- 3:43WHAT FORCES LAYOUT / REFLOW
- 5:29Intersection Observer
- 9:27Incompatibilities between spec and implementations
- 10:04Let's celebrate the whole schedule!
- 10:35Mutation Observer
- 15:56Performance Observer
- 20:45I had to cheat a bit...
- 21:25Resize Observer
- 24:30Observables
- 26:04Collection super
related talks
31mWatch your back, Browser! You're being observed
31mWatch Your Back, Browser! You're Being Observed.
22mWeb Perf APIs That You (Probably) Never Knew Existed
59mWeb performance APIs you (probably) didn't know existed
38mReturn to Web Animation Wonderland
16mCoding Session: Stunning Performance
50mWeb Performance APIs You (probably) Didn't Know Existed
30mBrowser Graphics Under the Hood