Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Optimizing & Profiling UI Performance

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Brenda Cook Brenda Cook
July 29, 2016
Programming
13k
6

Optimizing & Profiling UI Performance

Presented at 360|AnDev 2016

Avatar for Brenda Cook

Brenda Cook

July 29, 2016

More Decks by Brenda Cook

See All by Brenda Cook
Fragments: Why? How? and What For?
Avatar for Brenda Cook kenodoggy
3
3.8k

Other Decks in Programming

See All in Programming
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.1k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
200
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
870
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
Avatar for utakaha utakaha
3
960
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
160
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
370
Workers Cache を知る
Avatar for syumai syumai
0
370
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
190
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
170
最近”作らせてる” ローカルAIアプリの話
Avatar for ITO Akihiro akit37
0
480
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
210
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
940

Featured

See All Featured
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
440
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
370
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
380
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
310
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
910
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
610
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
610
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490

Transcript

  1. Optimizing & Profiling UI Performance

  2. What does it mean to have performant UI?

  3. Jank

  4. Frame Rate (FPS)

  5. Refresh Rate (Hz)

  6. 1 second (1000ms) / 60 frames = 16.67ms per frame

    FPS is capped by device display (refresh rate Hz) due to VSync

  7. VSync

  8. 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

  9. 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

  10. No VSync

  11. Optimize

  12. Flatten View Hierarchy

  13. Deeply Nested View Hierarchy

  14. Deeply Nested View Hierarchy

  15. Shallow View Hierarchy

  16. Deeply Nested Design View Optimized

  17. Hierarchy Viewer

  18. 3 2 1

  19. [show deeply nested hierarchy]

  20. [show shallow hierarchy]

  21. [show image of obtaining measure, layout and draw time]

  22. None
  23. None

  24. Know your Views

  25. GPU Overdraw

  26. None
  27. None
  28. None

  29. clipRect & quickReject

  30. Performance Profiling

  31. Profile GPU Rendering

  32. None

  33. Marshmallow

  34. None

  35. Android Studio Monitors

  36. None

  37. android { 
 buildTypes {
 debug {
 debuggable true
 }


    release {
 ...
 }
 }
 }

  38. None
  39. None

  40. Systrace

  41. $ cd android-sdk/platform-tools/systrace $ python systrace.py --time=10 -o mytrace.html sched

    gfx view wm
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None

  50. Image Libraries to the Rescue! Picasso

  51. Thank you Twitter @kenodoggy g+ +BrendaCook_kenodoggy