Performant UIs Using CSS Magic
summary
A reusable scroll list view built with flexbox scroll list view reorders DOM nodes via the order property to recycle cells and works at steady pace but blanks the screen under fast scrolls. Profiling with Chrome timeline and Safari’s show compositing borders reveals repeated texture uploads to the GPU; CSS Triggers shows order causes layout and paint. Conclusion: prefer compositor-only properties (transform/opacity), batch reads/writes with requestAnimationFrame or FastDom, or use an abstraction like Famous to avoid GPU overload.
AI-written summary · about
chapters (8)
- 0:00Intro
- 1:07Animation to improve performance -Well executed animation instils perception of performance
- 6:17Performance -Cost of CSS property change
- 9:29Batching
- 11:50Chrome timeline
- 14:52Flooding the GPU -Uploading way too many textures
- 16:44Native performance on the web?
- 18:50Web platform needs low level controls - Controlling paints & reflows
