Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing & Profiling UI Performance

Avatar for Brenda Cook Brenda Cook
July 29, 2016
Programming
6
13k

Optimizing & Profiling UI Performance

Presented at 360|AnDev 2016

Avatar for Brenda Cook

Brenda Cook

July 29, 2016
Tweet

More Decks by Brenda Cook

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

Other Decks in Programming

See All in Programming
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1k
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.3k
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
510
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
560
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
200
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
3
1.3k
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
110
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
110
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
720
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
560

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
61
52k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
150
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
190
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
390
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
140

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