Profiling Flutter Apps - GDD China 2018

Talk from GDD in Shanghai

Transcript

1. Flutter Performance Profiling and Theory Flutter的性能测试与理论 Xiao Yu 于潇
2. 听众收益 • 时间都去哪了? • 理念投入使用 • 使用工具调试 Talk Goals
3. 前言 • 不是入门题材 • 同场5:30请关注Flutter图像系统性能论坛 Preface
4. 什么是应用性能 What is Rendering Performance
5. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU
6. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
7. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
8. Flutter的渲染阶段 Flutter’s Rendering Pipeline VSync Animation Build Layout Paint Display list -> GPU
9. 检测Flutter的渲染 Instrumenting Flutter’s Rendering
10. Profile模式 Profile Mode
11. 检测Flutter的渲染 Instrumenting Flutter’s Rendering DEMO
12. 渲染责任部件 Rendering Actors android.view.View - construct/inflate/update - onMeasure(int, int) - onLayout(boolean, int, int, int, int) - onDraw(Canvas)
13. 渲染责任部件 Rendering Actors android.view.View - construct/inflate/update - onMeasure(int, int) - onLayout(boolean, int, int, int, int) - onDraw(Canvas) VSync Animation Measure Layout Draw Display list -> GPU
14. 渲染责任部件 Rendering Actors UIView - init/update - updateConstraints - layoutSubviews - drawRect:(CGRect)
15. 渲染责任部件 Rendering Actors UIView - init/update - updateConstraints - layoutSubviews - drawRect:(CGRect) VSync Animation Constraint Layout Display Display list -> GPU
16. Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() - paint(PaintingContext context, Offset offset)
17. Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() - paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
18. Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() - paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
19. Flutter的声明式UI Flutter’s Declarative UI VSync Animation Measure Layout Draw Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
20. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build
21. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer
22. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), ) Image RawImage Container DecoratedBox Row Text RichText
23. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer ComponentElement RenderObjectElement RenderObjectElement RenderObjectElement ComponentElement Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), )
24. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer StatelessElement Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), ) RenderObjectElement RenderObjectElement RenderObjectElement StatelessElement StatefulElement RenderObjectElement
25. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), ) StatefulWidget RenderObjectWidget StatelessWidget RenderObjectWidget RenderObjectWidget StatelessWidget RenderObjectWidget
26. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer StatelessElement SingleChildRenderObjectElement MultiChildRenderObjectElement Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), ) LeafRenderObjectElement StatelessElement StatefulElement LeafRenderObjectElement
27. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer RenderDecoratedBox RenderFlex RenderImage RenderParagraph Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), )
28. Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list -> GPU Build Widget Element RenderObject Layer PictureLayer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), )
29. 树工程 Tree Operations Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘A’), ], ), )
30. 了解build阶段 Understanding the Build Phase
31. 同类型更新 Same Type Update Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’),
32. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), 同类型更新 Same Type Update
33. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update 同类型更新
34. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update ? ? ? ? ? ? 同类型更新
35. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Element.updateChild() Same Type Update ? ? ? ? ? ? 同类型更新
36. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), ComponentElement.update() Same Type Update ? ? ? ? ? ? 同类型更新
37. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update ComponentElement.update() ? ? ? ? ? ? 同类型更新
38. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update Element.updateChild() ? ? ? ? ? ? 同类型更新
39. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), RenderObjectElement.update() Same Type Update ? ? ? ? ? 同类型更新
40. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update ? ? ? ? ? 同类型更新
41. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), @override void updateRenderObject(BuildContext context, RenderDecoratedBox renderObject) { renderObject ..decoration = decoration ..configuration = createLocalImageConfiguration(context) ..position = position; } Same Type Update 同类型更新
42. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), ? Same Type Update ? ? ? ? ? 同类型更新
43. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) ? ? ? ? ? Text(‘B’), ? set decoration(Decoration value) { assert(value != null); if (value == _decoration) return; _painter?.dispose(); _painter = null; _decoration = value; markNeedsPaint(); } Same Type Update 同类型更新
44. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), ? ? ? ? ? set decoration(Decoration value) { assert(value != null); if (value == _decoration) return; _painter?.dispose(); _painter = null; _decoration = value; markNeedsPaint(); } ? set decoration(Decoration value) { assert(value != null); if (value == _decoration) return; _painter?.dispose(); _painter = null; _decoration = value; markNeedsPaint(); } Same Type Update 同类型更新
45. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update ? ? ? ? 同类型更新 ...
46. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) Text(‘B’), Same Type Update 同类型更新
47. 如何提高build效率 How to Improve Build Efficiency
48. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 • debugPrintRebuildDirtyWidgets ◦ 什么组件被重新构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
49. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 • debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
50. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 • debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools DEMO
51. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer 如何提高build效率 How to Improve Build Efficiency Container( color: Colors.blue, child: Row( children: <Widget>[ Image.network( ‘.../1.png’ ), Text(‘B’), ], ), ) ? ? ? ? ? ?
52. 如何提高build效率 How to Improve Build Efficiency 降低遍历的出发点 ? ? ? ?
53. 如何提高build效率 How to Improve Build Efficiency 停止树的遍历 降低遍历的出发点
54. 如何提高build效率 How to Improve Build Efficiency 降低遍历的出发点 1. setState 2. InheritedWidget 3. 热重载 ? ? ? ?
55. ? ? ? ? 如何提高build效率 How to Improve Build Efficiency 降低遍历的出发点 1. setState 2. InheritedWidget 3. 热重载 DEMO
56. 如何提高build效率 How to Improve Build Efficiency 停止树的遍历 降低遍历的出发点 1. 重用同一子组件实例
57. 如何提高build效率 How to Improve Build Efficiency
58. 如何提高build效率 How to Improve Build Efficiency
59. 如何提高build效率 How to Improve Build Efficiency SlideTransition( ... child: Row(...) )
60. 了解layout阶段 Understanding the Layout Phase
61. 布局阶段 Layout Phase Layout Paint Display list -> GPU Build Widget Element RenderObject Layer 约 束 大 小
62. 布局阶段 Layout Phase 最小宽度 最大宽度 最 小 高 度 最 大 高 度
63. 了解paint阶段 Understanding the Paint Phase
64. 绘制阶段 Paint Phase Layout Paint Display list -> GPU Build Widget Element RenderObject Layer
65. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer 位置 Layer 绘制阶段 Paint Phase
66. Layer种类 Layer Types ContainerLayer ContainerLayer PictureLayer ContainerLayer PictureLayer ContainerLayer TextureLayer
67. Layer种类 Layer Types TransformLayer OffsetLayer PictureLayer OffsetLayer PictureLayer OffsetLayer TextureLayer
68. 如何提高paint效率 How to Improve Paint Efficiency
69. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer How to Improve Paint Efficiency ? ? ? 如何提高paint效率
70. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer RepaintBoundary RepaintBoundary How to Improve Paint Efficiency 如何提高paint效率
71. 调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 • debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在观测台里显示绘制树 Performance Debugging Tools
72. 调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 • debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在了望台里显示绘制树 Performance Debugging Tools DEMO
73. Layout Paint Display list -> GPU Build Widget Element RenderObject Layer xster@google.com @xster