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
320
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
400
Kinerja Web 101 - Edisi 2022
mazipan
1
350
Bagaimana implementasi mockup design
mazipan
0
360
Memulai karir sebagai web programmer
mazipan
0
630
Membuat laporan kecepatan web untuk blog
mazipan
0
430
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
400
Menjadi web developer di masa pandemi
mazipan
0
460
Other Decks in Programming
See All in Programming
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
CSC307 Lecture 08
javiergs
PRO
0
330
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
CSC307 Lecture 14
javiergs
PRO
0
220
継続的な活動で築く地方エンジニアの道
myamashii
2
360
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
CSC307 Lecture 12
javiergs
PRO
0
220
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
71
8.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Six Lessons from altMBA
skipperchong
24
3.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
It's Worth the Effort
3n
181
27k
Docker and Python
trallard
37
2.9k
A better future with KSS
kneath
231
17k
How GitHub (no longer) Works
holman
305
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
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.