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
Optimizing & Profiling UI Performance
Search
Brenda Cook
July 29, 2016
Programming
6
13k
Optimizing & Profiling UI Performance
Presented at 360|AnDev 2016
Brenda Cook
July 29, 2016
Tweet
Share
More Decks by Brenda Cook
See All by Brenda Cook
Fragments: Why? How? and What For?
kenodoggy
3
3.5k
Other Decks in Programming
See All in Programming
明日から始めるリファクタリング
ryounasso
0
140
dynamic!
moro
10
7.9k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
770
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
私はどうやって技術力を上げたのか
yusukebe
43
18k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
860
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.5k
CSC509 Lecture 04
javiergs
PRO
0
300
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Language of Interfaces
destraynor
162
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Fireside Chat
paigeccino
40
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Transcript
Optimizing & Profiling UI Performance
What does it mean to have performant UI?
Jank
Frame Rate (FPS)
Refresh Rate (Hz)
1 second (1000ms) / 60 frames = 16.67ms per frame
FPS is capped by device display (refresh rate Hz) due to VSync
VSync
3 Double Buffering 0 1 2 1 2 CPU GPU
Display 1 1 Front Buffer CPU GPU Back Buffer 2 3 3 VSync VSync VSync VSync Frame Drop
4 3 Triple Buffering 0 1 2 3 1 2
CPU GPU Display 1 1 Front Buffer CPU GPU Back Buffer CPU GPU 3rd Buffer 2 3 4 VSync VSync VSync VSync Frame Drop
No VSync
Optimize
Flatten View Hierarchy
Deeply Nested View Hierarchy
Deeply Nested View Hierarchy
Shallow View Hierarchy
Deeply Nested Design View Optimized
Hierarchy Viewer
3 2 1
[show deeply nested hierarchy]
[show shallow hierarchy]
[show image of obtaining measure, layout and draw time]
None
None
Know your Views
GPU Overdraw
None
None
None
clipRect & quickReject
Performance Profiling
Profile GPU Rendering
None
Marshmallow
None
Android Studio Monitors
None
android { buildTypes { debug { debuggable true }
release { ... } } }
None
None
Systrace
$ cd android-sdk/platform-tools/systrace $ python systrace.py --time=10 -o mytrace.html sched
gfx view wm
None
None
None
None
None
None
None
None
Image Libraries to the Rescue! Picasso
Thank you Twitter @kenodoggy g+ +BrendaCook_kenodoggy