Layout Repaint & The Lessons Learned Irfan Maulana Principal Engineer Web Platform, Tokopedia Semarang

mazipan.space

Loading Performance Lighthouse CLS LCP Speed Index TTI TTFB

Runtime Performance DevTools FPS CPU Usage Main Thread GC

Pixel Pipeline

Visual Change Trigger (JS/CSS) Common pixel pipeline Style Calculation Layout Paint Composite

How to debug?

Paint Flashing On Chrome DevTools

Timeline on Safari

Recommendation

Recommendations 1. Optimize JavaScript Execution 2. Reduce the Scope and Complexity of Style Calculations 3. Avoid Large, Complex Layouts and Layout Thrashing 4. Simplify Paint Complexity and Reduce Paint Areas 5. Stick to Compositor-Only Properties and Manage Layer Count 6. Debounce Your Input Handlers

Lesson Learned

No content

Unnecessary Rendering See: https://codesandbox.io/s/aloha-css-uyox7 Problems: - Box repainting on sliding - Hello3 & Hello4 unnecessary repaint Hints: - Stacking context - will-change

Infinite hidden animation See: https://codepen.io/mazipan/details/gOGLpev Problems: - Skeleton loading for hidden element triggering repaint Alternatives: - Remove skeleton loading, or - Only show before the element will showing

JS First Problems: - Countdown timer w JS approach will always trigger repaint for every second Alternatives: - Use CSS/SVG transition w JS for only generating the initial state

50% * Reduce more than CPU usage *On idle state

No content

ksana.in/learn-render-perf

ksana.in/udacity-render-perf

Key Takeaways 1. Stick to the compositor-only props 2. Double check your Stacking Layer 3. Check the hidden element 4. CSS First 5. Measure periodically

Thank You.