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
380
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
Panduan untuk mempublikasikan kode ke publik
mazipan
0
80
Mengukur dan meningkatkan performa website
mazipan
1
190
Testing JavaScript
mazipan
0
120
Membuat Website Zaman Sekarang
mazipan
0
460
Kinerja Web 101 - Edisi 2022
mazipan
1
420
Bagaimana implementasi mockup design
mazipan
0
450
Memulai karir sebagai web programmer
mazipan
0
700
Membuat laporan kecepatan web untuk blog
mazipan
0
500
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
480
Other Decks in Programming
See All in Programming
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Introduction to kotlinx.rpc
arawn
0
770
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Jasprが凄い話
hyshu
0
180
Jakarta EE meets AI
ivargrimstad
0
520
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Rubyと自由とAIと
yotii23
6
1.8k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
500
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Typedesign – Prime Four
hannesfritz
41
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Site-Speed That Sticks
csswizardry
4
410
Building a Scalable Design System with Sketch
lauravandoore
461
33k
How to Ace a Technical Interview
jacobian
276
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
The Cult of Friendly URLs
andyhume
78
6.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.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.