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
400
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
99
Mengukur dan meningkatkan performa website
mazipan
1
210
Testing JavaScript
mazipan
0
140
Membuat Website Zaman Sekarang
mazipan
0
490
Kinerja Web 101 - Edisi 2022
mazipan
1
440
Bagaimana implementasi mockup design
mazipan
0
470
Memulai karir sebagai web programmer
mazipan
0
720
Membuat laporan kecepatan web untuk blog
mazipan
0
510
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
500
Other Decks in Programming
See All in Programming
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.2k
Passkeys for Java Developers
ynojima
0
190
人には人それぞれのサービス層がある
shimabox
3
470
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
380
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
340
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
イベントストーミングから始めるドメイン駆動設計
jgeem
3
420
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Unsuck your backbone
ammeep
671
58k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
The Invisible Side of Design
smashingmag
299
50k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Agile that works and the tools we love
rasmusluckow
329
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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.