Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Layout Repaint & The Lessons Learned
Irfan Maulana
January 03, 2022
Programming
0
150
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
88
Testing JavaScript
mazipan
0
60
Membuat Website Zaman Sekarang
mazipan
0
240
Kinerja Web 101 - Edisi 2022
mazipan
0
170
Bagaimana implementasi mockup design
mazipan
0
180
Memulai karir sebagai web programmer
mazipan
0
480
Membuat laporan kecepatan web untuk blog
mazipan
0
250
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
260
Menjadi web developer di masa pandemi
mazipan
0
340
Other Decks in Programming
See All in Programming
レガシーフレームワークからの移行
ug
0
130
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
Functional Fun in Kotlin
nomisrev
1
130
CPU/GPU高速化セミナー 浮動小数点から文字列への高速変換の論文を読んでみた / cpugpu acceleration seminar 20230201
fixstars
0
110
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
330
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
140
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
400
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
140
低レイヤーから始める GUI
fadis
18
9.5k
An Advanced Introduction to R
nicetak
0
1.9k
ECテックカンファレンス2023
kspace
1
390
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
Featured
See All Featured
Building Adaptive Systems
keathley
27
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Designing for Performance
lara
600
65k
A Philosophy of Restraint
colly
193
15k
Designing for humans not robots
tammielis
245
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Debugging Ruby Performance
tmm1
67
11k
Robots, Beer and Maslow
schacon
154
7.3k
Adopting Sorbet at Scale
ufuk
65
7.8k
Automating Front-end Workflow
addyosmani
1351
200k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
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.