Watch Your Back, Browser! You're Being Observed.
summary
Replaces scroll+getBoundingClientRect polling with IntersectionObserver, raising a demo effect from about 8fps to 18fps by avoiding layout thrashing; uses MutationObserver to count added classes when third‑party code injects elements; measures a repeated third‑party hook with user timing / PerformanceObserver and finds 20 calls costing ~4ms each against a 10ms target; prototypes element resize handling with ResizeObserver plus RxJS to coalesce events so confetti fires only on open, not on every intermediate resize.
AI-written summary · about
chapters (10)
- 0:00Intro
- 1:43Web Platform Evolution
- 7:45Intersection Observer
- 12:42Unicorns
- 13:21Invitation Observer
- 15:07Performance Metrics
- 18:13Performance Observer
- 21:15Resize Observer
- 24:49Observables
- 29:27Conclusion
related talks
31mWatch your back, Browser! You're being observed
29mWatch your back, Browser! You're being observed
22mWeb Perf APIs That You (Probably) Never Knew Existed
24mSuperpowers of browser's Web API
38mRock’n’Scroll
50mWeb Performance APIs You (probably) Didn't Know Existed
45mSolving container queries today
59mWeb performance APIs you (probably) didn't know existed