Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Layout Repaint & The Lessons Learned

Layout Repaint & The Lessons Learned

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

Irfan Maulana

January 03, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

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