Layout Repaint & The Lessons Learned

The lessons learned from the real case we face related with layout repainting problem on the web

Transcript

1. Layout Repaint & The Lessons Learned Irfan Maulana Principal Engineer Web Platform, Tokopedia Semarang
2. mazipan.space
3. Loading Performance Lighthouse CLS LCP Speed Index TTI TTFB
4. Runtime Performance DevTools FPS CPU Usage Main Thread GC
5. Pixel Pipeline
6. Visual Change Trigger (JS/CSS) Common pixel pipeline Style Calculation Layout Paint Composite
7. How to debug?
8. Paint Flashing On Chrome DevTools
9. Timeline on Safari
10. Recommendation
11. 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
12. Lesson Learned
14. Unnecessary Rendering See: https://codesandbox.io/s/aloha-css-uyox7 Problems: - Box repainting on sliding - Hello3 & Hello4 unnecessary repaint Hints: - Stacking context - will-change
15. 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
16. 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
17. 50% * Reduce more than CPU usage *On idle state
19. ksana.in/learn-render-perf
20. ksana.in/udacity-render-perf
21. 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
22. Thank You.