Done in 0.0166666666 seconds
summary
Browsers need a constant 16 ms budget per frame to hit 60fps, the rendering pipeline (style → layout → paint → composite) often takes ~6 ms leaving ~10 ms for application JavaScript, so a 40 ms handler can drop eight frames and cause jank. The demo uses the Chrome DevTools flame chart and a code sandbox to prove it, shows forced reflow warnings, and compares margin vs translate animations; using will-change promotion or requestAnimationFrame moves work to composite and makes animations smooth.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 2:10Performance
- 6:58Average
- 9:35Audit
- 14:11DOM Access
- 14:54Multiple DOM Access
- 17:03Layout Triggers
- 19:24Forced Reflow
- 20:12JavaScript
- 22:40Event throttling
- 23:53Passive event listeners
- 25:32Animations
- 27:12CSS animations
- 28:14Geometry
- 29:42Sandbox
- 30:53Will Change
- 31:18Recap
related talks
59mRendering Performance
33mSaving the Web 16 Milliseconds at a Time
59mProfiling JavaScript Like A Pro
31mJank Busters - Chrome Rendering Performance
39mPerformance Beyond Page Load
27mSaving the Web, 16ms at a Time
30mFast but not furious: debugging user interaction performance issues
49mRendering without lumpy bits