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
   

   View Slide

2. mazipan.space
   

   View Slide

3. Loading Performance
   Lighthouse
   CLS LCP
   Speed
   Index
   TTI TTFB
   

   View Slide

4. Runtime Performance
   DevTools
   FPS
   CPU
   Usage
   Main
   Thread
   GC
   

   View Slide

5. Pixel Pipeline
   

   View Slide

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

   View Slide

7. How to debug?
   

   View Slide

8. Paint
   Flashing
   On
   Chrome
   DevTools
   

   View Slide

9. Timeline
   on Safari
   

   View Slide

10. Recommendation
    

    View Slide

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
    

    View Slide

12. Lesson Learned
    

    View Slide

13. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

18. View Slide

19. ksana.in/learn-render-perf
    

    View Slide

20. ksana.in/udacity-render-perf
    

    View Slide

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
    

    View Slide

22. Thank You.
    

    View Slide