Профайлинг в примерах: ищем бутылочное горлышко

Скорее всего, ваше приложение отлично себя чувствует на последнем Пикселе. Наверняка и на первом. Но как понять, достаточно ли хорошо оно работает на других устройствах? Что делать после обнаружения проблемы и как не допустить её повторения?

Доклад представляет из себя технический кейс. Мы не будем углубляться в дебри оптимизаций, но рассмотрим, с чего стоит начать.

Есть приложение, которое работает. Есть ощущение, что оно работает недостаточно быстро. Сначала мы разберёмся, насколько правдиво это ощущение, с помощью более точных инструментов, нежели интуиция. Затем «препарируем» это приложение, используя несколько инструментов один за другим, попутно внося оптимизации. Время ограничено, поэтому мы сосредоточимся на части инструментов: профилировщик GPU, Hierarchy Viewer, отображение Overdraw. Напоследок рассмотрим несколько инструментов, позволяющих следить за тем, насколько хорошо приложение работает от сборки к сборке.

Разумеется, серебряной пули не существует, как и универсального решения всех проблем. Однако для того, чтобы решить проблему, нужно её найти и локализовать. Понимание того, «где мы находимся сейчас» — неотъемлемая часть успешного движения вперёд.

Transcript

1. Vyng
2. Профайлинг в примерах Ищем бутылочное горлышко в скорости UI Артур Бадретдинов
 GDG lead, Vyng
3. «Работает, и хорошо»
4. «Работает , и хорошо»
5. Vyng Messaging • Нужно больше мессенджеров! • Неделя мессенджеров. Количество слайдов с чатиками увеличивается в 2 раза !5
6. План !6
7. План • Отрисовка: 101 !6
8. План • Отрисовка: 101 • Поиск проблем !6
9. План • Отрисовка: 101 • Поиск проблем • Анализ разметки !6
10. План • Отрисовка: 101 • Поиск проблем • Анализ разметки • Влияние наложения !6
11. План • Отрисовка: 101 • Поиск проблем • Анализ разметки • Влияние наложения • Удалённое наблюдение !6
12. Скорость UI
13. Что же видят люди? !8
14. Что же видят люди? • «Обратная связь» !8
15. Что же видят люди? • «Обратная связь» • Время появления ожидаемых данных !8
16. Что же видят люди? • «Обратная связь» • Время появления ожидаемых данных • FPS - количество кадров в секунду !8
17. FPS
18. Кадры решают всё !10
19. Кадры решают всё !10
20. Кадры решают всё • 10 кадров в секунду !10
21. Кадры решают всё • 10 кадров в секунду • 24 кадра в секунду !10
22. Кадры решают всё • 10 кадров в секунду • 24 кадра в секунду • 60 кадров в секунду !10
23. Кадры решают всё • 10 кадров в секунду • 24 кадра в секунду • 60 кадров в секунду • 120 кадров в секунду !10
24. 0 кадров в секунду
25. 16 мс
26. 16 мс ~ 1000 мс / 60 кадров
27. VSync
28. Screen tearing
29. Choreographer and VSync !15
30. Choreographer and VSync • Ввод !15
31. Choreographer and VSync • Ввод • Анимации !15
32. Choreographer and VSync • Ввод • Анимации • Создание View !15
33. Choreographer and VSync • Ввод • Анимации • Создание View • Отрисовка View !15
34. !16 Display Lists
35. !16 Display Lists • Кэш операций рендеринга API 11 (Android 3.0)
36. !16 Display Lists • Кэш операций рендеринга • Не содержит логики API 11 (Android 3.0)
37. !16 Display Lists • Кэш операций рендеринга • Не содержит логики • Каждой View - по Display List! https://www.youtube.com/watch?v=v9S5EO7CLjo API 11 (Android 3.0)
38. Display List Save 3 DrawPatch Save 3 ClipRext 20.00, 4.00, 99.00, 44.00, 1 Translate 20.00, 12.00 DrawText 9, 18, 9, 0.00, 19.00, 0x17e898 Restore RestoreToCount 0 !17
39. Buffer updates !18 Dropped Frame Build frame 16 ? ? 16 ? ? 16 ? ? Draw Draw Build frame Build frame Draw
40. Dropped frames !19 Build frame Build frame 16 ? ? 16 ? ? 16 ? ? Draw Draw? Nope! Dropped Frame Draw
41. Причины !20
42. Причины • Деятельность в главном потоке !20
43. Причины • Деятельность в главном потоке • IO !20
44. Причины • Деятельность в главном потоке • IO • «Дорогие» операции !20
45. Причины • Деятельность в главном потоке • IO • «Дорогие» операции • Проблемы разметки !20
46. Причины • Деятельность в главном потоке • IO • «Дорогие» операции • Проблемы разметки • Большая вложенность !20
47. Причины • Деятельность в главном потоке • IO • «Дорогие» операции • Проблемы разметки • Большая вложенность • Наложение !20
48. Причины • Деятельность в главном потоке • IO • «Дорогие» операции • Проблемы разметки • Большая вложенность • Наложение • Прозрачность !20
49. Причины • Деятельность в главном потоке • IO • «Дорогие» операции • Проблемы разметки • Большая вложенность • Наложение • Прозрачность • Большое количество view !20
50. Сложности разметки
51. Инструменты • Profile GPU rendering • HierarchyViewer • Debug GPU overdraw • SysTrace • TraceView !22
52. Очерчиваем проблему Сложности разметки
53. Инструменты • Profile GPU rendering • Gfxinfo • SysTrace !24
54. Профилируем отрисовку GPU !25
55. Профилируем отрисовку GPU !26
56. Информация профилирования !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
57. Информация профилирования • Ожидание главного потока !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
58. Информация профилирования • Ожидание главного потока • Measure/layout/animation/input handling !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
59. Информация профилирования • Ожидание главного потока • Measure/layout/animation/input handling • Обновление DisplayLists (onDraw()) !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
60. Информация профилирования • Ожидание главного потока • Measure/layout/animation/input handling • Обновление DisplayLists (onDraw()) • Передача изображений (bitmaps) в GPU !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
61. Информация профилирования • Ожидание главного потока • Measure/layout/animation/input handling • Обновление DisplayLists (onDraw()) • Передача изображений (bitmaps) в GPU • Отображение DisplayLists на экран !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
62. Информация профилирования • Ожидание главного потока • Measure/layout/animation/input handling • Обновление DisplayLists (onDraw()) • Передача изображений (bitmaps) в GPU • Отображение DisplayLists на экран • Смена буфера GPU !27 https://developer.android.com/studio/profile/inspect-gpu-rendering.html
63. Профилируем отрисовку GPU • Оранжевый — смена буфера GPU • Тёмно-зелёный - ожидание, пока главный поток освободится !28
64. GPU monitor • До Android Studio 3.0 !29 https://developer.android.com/studio/profile/am-gpu.html Возможная причина: https://stackoverflow.com/a/36345160/3675659
65. !30 Gfxinfo > adb shell dumpsys gfxinfo 
 <your.package> framestats
66. !30 Gfxinfo > adb shell dumpsys gfxinfo 
 <your.package> framestats
67. !30 Gfxinfo > adb shell dumpsys gfxinfo 
 <your.package> framestats
68. Агрегированные данные • Total frames rendered: 1836 • Janky frames: 1344 (73.20%) • 90th percentile: 31ms • 95th percentile: 40ms • Number Slow UI thread: 187 • Number Slow bitmap uploads: 17 • Number Slow issue draw commands: 1145 !31
69. Ничто не идеально !32
70. Ничто не идеально !32
71. Ничто не идеально !32
72. Тут нормально, там не очень… !33
73. –Nimbledroid «86% Пользователей удаляют медленные приложения сразу после установки». http://blog.nimbledroid.com/2015/09/03/why-you-should-care-about-app-performance.html
74. — Peter Drucker, Writer, Management Consultant “What gets measured gets managed”
75. Hierarchy Viewer Сложности разметки
76. Hierarchy Viewer
77. Запуск Hierarchy Viewer 1. Tools -> Android -> Enable ADB integration 2. Tools -> Android -> Android Device Monitor 3. Запуск профилировки !38
78. Запуск Hierarchy Viewer 1. Tools -> Android -> Enable ADB integration 2. Tools -> Android -> Android Device Monitor 3. Запуск профилировки !38
79. Цветные кружочки
80. Цветные кружочки • Measure • Layout • Draw !40
81. Цветные кружочки • Зеленый - быстрее 50% • Жёлтый - медленнее 50% • Красный - самый медленный !41
82. Всё относительно • 1 view • Measure: 0,023 ms • Layout: 0,001 ms • Draw: 0,426 ms !42 0.5 мс
83. Всё относительно • 138 views • Measure: 4,461 ms • Layout: 1,026 ms • Draw: 14,723 ms !43 20 мс
84. 300 спартанцев • 327 views • Measure: 21,420 ms • Layout: 17,690 ms • Draw: 3,863 ms !44 20 мс
85. Раз экранчик, два экранчик… !45
86. Раз экранчик, два экранчик… • 498 views • Measure: 4,101 ms • Layout: 106,855 ms • Draw: 9,173 ms !46 120 мс
87. To push or not to push? • 31 views • Measure: 0,427 ms • Layout: 4,818 ms • Draw: 0,923 ms !47 6 мс
88. To push or not to push? void setCurrentChatView(…) { … // Подготовка транзакции router.pushController(transaction); } Аналогично fragmentTransaction.add() !48
89. ViewStub <ViewStub android:id=«@+id/groupAvatarImage1" android:inflatedId="@+id/groupAvatarImage1" android:layout=«@layout/complex_layout" // width, height/> !49 setVisibility(int) inflate()
90. ViewStub vs Dynamic !50
91. ViewStub vs Dynamic • Вся разметка в одном месте !50
92. ViewStub vs Dynamic • Вся разметка в одном месте • Проще установить позицию в разметке !50
93. ViewStub vs Dynamic • Вся разметка в одном месте • Проще установить позицию в разметке • Видно в предпросмотре !50
94. ViewStub vs Dynamic • Вся разметка в одном месте • Проще установить позицию в разметке • Видно в предпросмотре • Размер - 0 !50
95. ViewStub vs Dynamic • Вся разметка в одном месте • Проще установить позицию в разметке • Видно в предпросмотре • Размер - 0 • Пустые onDraw/onLayout/onMeasure !50
96. Лишние контейнеры
97. Лишние контейнеры
98. Lint check • Android > 
 Lint > 
 Performance !53
99. Оптимизация? !54
100. Тестируйте на слабых устройствах !55 • Эмулятор 
 Macbook Pro 2017 • 280 views • ~ 11 ms
101. Тестируйте на слабых устройствах !55 • Эмулятор 
 Macbook Pro 2017 • 280 views • ~ 11 ms • Samsung 
 Galaxy J2 • 167 views • ~ 96 ms
102. Доверяй, но проверяй @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); SystemClock.sleep(1000); } !56
103. Доверяй, но проверяй @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); SystemClock.sleep(1000); } !56
104. Такое разное время !57
105. Такое разное время • Wall clock time !57
106. Такое разное время • Wall clock time • Thread time !57
107. Hierarchy Viewer - thread time @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); fib(39); } public static int fib(int n) { if (n == 0 || n == 1) { return 1; } else { return fib(n - 1) + fib(n - 2); } } !58
108. Display lists Root (ConversationListItemView 0x85463300) (Translate (left, top) 0, 869) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (ColorDrawable 0x86660880) RectOp [1080.00 x 212.00] /RenderNode(ColorDrawable 0x86660880) RenderNodeOp [1080.00 x 212.00] (FrameLayout 0x85464480) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (ColorDrawable 0x86660c00, empty) /RenderNode(ColorDrawable 0x86660c00) RenderNodeOp [1080.00 x 212.00] (LinearLayout 0x85464800) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (RippleDrawable 0x86660f80, empty) /RenderNode(RippleDrawable 0x86660f80) !59
109. Display lists Root (ConversationListItemView 0x85463300) (Translate (left, top) 0, 869) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (ColorDrawable 0x86660880) RectOp [1080.00 x 212.00] /RenderNode(ColorDrawable 0x86660880) RenderNodeOp [1080.00 x 212.00] (FrameLayout 0x85464480) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (ColorDrawable 0x86660c00, empty) /RenderNode(ColorDrawable 0x86660c00) RenderNodeOp [1080.00 x 212.00] (LinearLayout 0x85464800) (ClipRect 0, 0, 1080, 212) RenderNodeOp [1080.00 x 212.00] (RippleDrawable 0x86660f80, empty) /RenderNode(RippleDrawable 0x86660f80) !59
110. Hierarchy Viewer. Заключение !60
111. Hierarchy Viewer. Заключение • 10 измерений — 10 уникальных результатов !60
112. Hierarchy Viewer. Заключение • 10 измерений — 10 уникальных результатов • Красный != плохо !60
113. Hierarchy Viewer. Заключение • 10 измерений — 10 уникальных результатов • Красный != плохо • Оптимизации нужно подтверждать числами !60
114. Hierarchy Viewer. Заключение • 10 измерений — 10 уникальных результатов • Красный != плохо • Оптимизации нужно подтверждать числами • Метрики снимаются только вручную… !60
115. Немного о грустном Hierarchy Viewer is no longer being developed !61
116. Layout inspector
117. Overdraw Сложности разметки
118. Профилируем отрисовку GPU !64
119. Слои. Photoshop? Не только !65 https://www.youtube.com/watch?v=T52v50r-JfE
120. Отрисовка виджетов • onMeasure() - желаемый размер • onLayout() - фактический размер, положение • onDraw() - отрисовка в Display Lists !66
121. Ну и что? • Перерисовывка много раз • Каскадный вызов 
 requestLayout() !67 https://medium.com/google-developers/simplify-complex-view-hierarchies-5d358618b06f
122. Hierarchy View → Photoshop !68
123. Hierarchy View → Photoshop • Простая визуализация !68
124. Hierarchy View → Photoshop • Простая визуализация • Легко найти лишние слои !68
125. Hierarchy View → Photoshop • Простая визуализация • Легко найти лишние слои !68
126. Слои виджетов !69
127. Слои виджетов !69
128. Слои виджетов <LinearLayout android:background=«@color/white"> <FrameLayout android:background=«@color/white"> <android.support.v7.widget.RecyclerView android:background=«@color/white"> </android.support.v7.widget.RecyclerView> </FrameLayout> </LinearLayout> !70
129. До и после !71
130. До и после !71
131. Аватарки. Велосипед • Overdraw - красный !72
132. Аватарки. Велосипед • Overdraw - красный !72
133. Аватарки. Велосипед • Overdraw - красный • Реализация - 4 слоя !72
134. Аватарки. Велосипед • Overdraw - красный • Реализация - 4 слоя • 4,2 мс на отрисовку !72
135. Аватарки. Готовое решение !73
136. Аватарки. Готовое решение • Библиотека от Tango Agency !73
137. Аватарки. Готовое решение • Библиотека от Tango Agency • Статья о решении* !73 *https://medium.com/tangoagency/avatar-view-for-android-apps-c00091e85ab8
138. Аватарки. Готовое решение • Библиотека от Tango Agency • Статья о решении* • Overdraw - синий !73 *https://medium.com/tangoagency/avatar-view-for-android-apps-c00091e85ab8
139. Аватарки. Готовое решение • Библиотека от Tango Agency • Статья о решении* • Overdraw - синий • Отрисовка… 50 мс! !73 *https://medium.com/tangoagency/avatar-view-for-android-apps-c00091e85ab8
140. Привет, Кэп! !74
141. Привет, Кэп! • Иногда готовое решение лучше • Но велосипеды бывают неплохими • Главное - измерять! !74
142. Scalpel !75
143. Scalpel • Не нужно Фотошопа !75
144. Scalpel • Не нужно Фотошопа • Требует добавления специальную ViewGroup !75
145. Scalpel • Не нужно Фотошопа • Требует добавления специальную ViewGroup • Решение:
 https://github.com/gaket/scalpel !75
146. Overdraw !76
147. Overdraw • Легко проверить !76
148. Overdraw • Легко проверить • Легко исправить !76
149. Overdraw • Легко проверить • Легко исправить • Не стоит впадать в крайности !76
150. Отступать некуда Позади Москва
151. Android vitals !78
152. Android vitals !78
153. Android vitals !78
154. Android vitals !78
155. Android vitals !78
156. Frozen Frames
157. Render time
158. Render time anomaly
159. Подводя итоги
160. • SysTrace • TraceView (CPU Monitor) За кадром
161. — Instagram Engineering blog «At Instagram we’ve spent the last year reimagining and redesigning our Android app to work better for our users». https://engineering.instagram.com/building-a-better-instagram-app-for-android-c08f973662b
162. • Оптимизации - не всегда • Рука на пульсе - обязательно! Стоит ли овчинка выделки
163. Slide title Vyng Is Hiring • Remote positions • Senior Android Developer • Senior Back-End Developer (NodeJs, React) 
 Details:
 Telegram: @gaket, @travelernote
 https://www.linkedin.com/in/gaket/ artur@vyng.me Startup in California, We are making ringtones fun again :)

164. That’s all folks !87
165. Профайлинг в примерах Артур Бадретдинов, Vyng Telegram: @gaketo, @travelernote Facebook: https://www.facebook.com/gakett LinkedIn: https://www.linkedin.com/in/gaket !88