Cross-browser Virtual Scrolling
summary
Claims that CSS content-visibility:auto and selective contain:layout/contain:paint cut layout and paint work dramatically, often to near zero for offscreen items; shows reproducible DevTools flame-chart benchmarks, throttled runs and a demo app that adds 50 tiles and measures before/after. Implements roughly 10 lines of CSS (e.g. height:238px plus content-visibility rules) and reports moving items 3000px offscreen produces no layout tasks. Case studies and screenshots back the measured wins.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:03Why this conference
- 1:44Talk focus: CSS performance
- 3:39Browser render pipeline basics
- 5:26Browser render waterfall
- 10:53Key concepts: borderbox, visual boundaries, viewport
- 11:56CSS triggers performance
- 15:06Measuring layout and paint
- 17:50Reproducible demo setup
- 20:43Introducing CSS contain
- 23:36Contain layout performance
- 29:46Measuring contain layout impact
- 31:36Contain paint performance
- 34:34Downsides of contain
- 35:43Introducing content visibility
- 37:13How content visibility works
- 39:36Demo: strict vs content visibility
- 41:01Content visibility performance
- 42:07Real-world impact results
- 43:52Optimizing with content visibility
- 45:39Sources and implementation steps
- 47:52Q&A
related talks
22mPerformant UIs Using CSS Magic
38mRock’n’Scroll
37mModern CSS Rendering Performance - Full-Scale Optimization
36mScroll-Driven Animations with CSS
46mEfficient CSS Animations
39mModern CSS Layout is Awesome!
30mCutting-edge CSS features: Gaining control of Web Design
25mImproving Website Performance with CSS Containment