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

D83b3739651001461f48763639b90b50?s=128

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
  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.