Watch your back, Browser! You're being observed
summary
Title shows a use case: a lazy‑load animation built with IntersectionObserver restores 60fps after replacing costly reads; measurement shows getBoundingClientRect cost 12ms per frame on scroll. DOM changes trigger a MutationObserver to count revealed items and fire cornification, and a ResizeObserver plus RxJS observables debounce and pairwise-filter resize events to avoid noisy callbacks. PerformanceObserver surfaces marks, FCP/paint and long tasks (>50ms); one demo measures the cornification at 6ms.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:25Why conferences
- 3:00Lazy loading
- 4:50Scroll handlers
- 6:45Intersection Observer
- 8:25Intersection Observer options
- 9:20Intersection Observer demo
- 11:20Incompatibilities
- 13:10Mutation Observer
- 14:25Web Performance
- 16:00Real User Metrics
- 17:30User Timing API
- 19:00Performance Observer
- 19:50Paint Timing API
- 22:30Safari
- 24:10Resize Observer
- 25:40Polyfill
- 26:20Resize
- 27:30Observables
- 28:25Collection
- 28:55Timeline
related talks
29mWatch 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
16mCoding Session: Stunning Performance
50mWeb Performance APIs You (probably) Didn't Know Existed
30mFast but not furious: debugging user interaction performance issues
07mData Driven Styling