Layout Repaint & The Lessons Learned

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

13. None

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

18. None

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.