Jank Busters - Chrome Rendering Performance
summary
Explains that smoothness comes from fitting work into 16 milliseconds per frame and that jank is caused by unexpected repaints and slow image decodes; shows how painting differs from GPU compositing so costly CSS (shadows, border-radius, text antialias) and DOM reflows blow the frame budget. Demonstrates DevTools features like show paint rectangles, show composited layer borders and continuous repainting mode, uses the frame viewer to inspect layers, and recommends promoting animated elements with translate3d to avoid paints and reach steady 60Hz.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:10What is Jank
- 2:22What is rendering
- 3:10Green bars
- 7:10Layers
- 13:27Animation
- 20:21Viewing Layers
- 22:21Repaints
- 24:48Bad Content
- 28:39Conclusion
related talks
59mRendering Performance
30mFast but not furious: debugging user interaction performance issues
25mRendering Performance from the Ground Up
32mParallax Performance
37mRendering performance inside out
32mDone in 0.0166666666 seconds
49mRendering without lumpy bits
43mNo More Jank: Escaping the Matrix of Frame Drops