Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Layout Repaint & The Lessons Learned
Search
Irfan Maulana
January 03, 2022
Programming
0
340
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
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Mengukur dan meningkatkan performa website
mazipan
1
160
Testing JavaScript
mazipan
0
110
Membuat Website Zaman Sekarang
mazipan
0
430
Kinerja Web 101 - Edisi 2022
mazipan
1
380
Bagaimana implementasi mockup design
mazipan
0
400
Memulai karir sebagai web programmer
mazipan
0
670
Membuat laporan kecepatan web untuk blog
mazipan
0
470
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
450
Menjadi web developer di masa pandemi
mazipan
0
490
Other Decks in Programming
See All in Programming
Synchronizationを支える技術
s_shimotori
1
150
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
Golang と Erlang
taiyow
8
1.9k
CSC509 Lecture 08
javiergs
PRO
0
110
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
520
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
Gamification - CAS2011
davidbonilla
80
5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Why Our Code Smells
bkeepers
PRO
334
57k
How to Ace a Technical Interview
jacobian
275
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
Layout Repaint & The Lessons Learned Irfan Maulana Principal Engineer
Web Platform, Tokopedia Semarang
mazipan.space
Loading Performance Lighthouse CLS LCP Speed Index TTI TTFB
Runtime Performance DevTools FPS CPU Usage Main Thread GC
Pixel Pipeline
Visual Change Trigger (JS/CSS) Common pixel pipeline Style Calculation Layout
Paint Composite
How to debug?
Paint Flashing On Chrome DevTools
Timeline on Safari
Recommendation
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
Lesson Learned
None
Unnecessary Rendering See: https://codesandbox.io/s/aloha-css-uyox7 Problems: - Box repainting on sliding
- Hello3 & Hello4 unnecessary repaint Hints: - Stacking context - will-change
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
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
50% * Reduce more than CPU usage *On idle state
None
ksana.in/learn-render-perf
ksana.in/udacity-render-perf
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
Thank You.