Efficient CSS Animations
summary
Explains which CSS properties avoid layout and paint by running on the compositor—notably opacity and transform—and why that can move most work off the main thread. Describes how getComputedStyle and similar queries getComputedStyle flushes force style/layout work, breaking coalescing. Shows profiling with the Gecko profiler add-on on a Firefox OS UI: samples show roughly two thirds of time in painting (about 32% in one paint path) and about one third in restyle/layout, so optimize to reduce repaints.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:10DOM and Frame Trees
- 6:00Tradeoffs
- 8:47Optimizations
- 10:54Skipping Steps
- 15:25Coalescing
- 22:31Performance
- 25:04Compositing
- 30:11Experimenting
- 33:20Profile
- 35:46Call Stacks
- 39:31Performance Questions
related talks
30mBrowser Graphics Under the Hood
30mPulling Back the Curtains From Your Stylesheets
37mModern CSS Rendering Performance - Full-Scale Optimization
22mPerformant UIs Using CSS Magic
37mPractical Web Animation
25mRendering Performance from the Ground Up
22mPerformant web animations — Emily Hayman
58mRendering performance from the ground up