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

More Decks by Irfan Maulana

Other Decks in Programming


  1. 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
  2. Unnecessary Rendering See: https://codesandbox.io/s/aloha-css-uyox7 Problems: - Box repainting on sliding

    - Hello3 & Hello4 unnecessary repaint Hints: - Stacking context - will-change
  3. 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
  4. 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
  5. 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