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

Profiling Flutter Apps - GDD China 2018

xster
September 20, 2018

Profiling Flutter Apps - GDD China 2018

Talk from GDD in Shanghai

xster

September 20, 2018
Tweet

More Decks by xster

Other Decks in Programming

Transcript

  1. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw

    Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU
  2. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw

    Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
  3. 什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw

    Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
  4. 渲染责任部件 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
  5. 渲染责任部件 Rendering Actors UIView - init/update - updateConstraints - layoutSubviews

    - drawRect:(CGRect) VSync Animation Constraint Layout Display Display list -> GPU
  6. Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() -

    paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
  7. Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() -

    paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
  8. Flutter的声明式UI Flutter’s Declarative UI VSync Animation Measure Layout Draw Display

    list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
  9. 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
  10. 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’), ], ), )
  11. 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
  12. 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
  13. 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
  14. 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’), ], ), )
  15. 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’), ], ), )
  16. 树工程 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’), ], ), )
  17. 同类型更新 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’),
  18. 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
  19. 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 同类型更新
  20. 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 ? ? ? ? ? ? 同类型更新
  21. 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 ? ? ? ? ? ? 同类型更新
  22. 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 ? ? ? ? ? ? 同类型更新
  23. 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() ? ? ? ? ? ? 同类型更新
  24. 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() ? ? ? ? ? ? 同类型更新
  25. 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 ? ? ? ? ? 同类型更新
  26. 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 ? ? ? ? ? 同类型更新
  27. 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 同类型更新
  28. 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 ? ? ? ? ? 同类型更新
  29. 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 同类型更新
  30. 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 同类型更新
  31. 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 ? ? ? ? 同类型更新 ...
  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. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •

    debugPrintRebuildDirtyWidgets ◦ 什么组件被重新构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
  34. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •

    debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
  35. 调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •

    debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools DEMO
  36. 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’), ], ), ) ? ? ? ? ? ?
  37. ? ? ? ? 如何提高build效率 How to Improve Build Efficiency

    降低遍历的出发点 1. setState 2. InheritedWidget 3. 热重载 DEMO
  38. 布局阶段 Layout Phase Layout Paint Display list -> GPU Build

    Widget Element RenderObject Layer 约 束 大 小
  39. Layout Paint Display list -> GPU Build Widget Element RenderObject

    Layer 位置 Layer 绘制阶段 Paint Phase
  40. Layout Paint Display list -> GPU Build Widget Element RenderObject

    Layer How to Improve Paint Efficiency ? ? ? 如何提高paint效率
  41. Layout Paint Display list -> GPU Build Widget Element RenderObject

    Layer RepaintBoundary RepaintBoundary How to Improve Paint Efficiency 如何提高paint效率
  42. 调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 •

    debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在观测台里显示绘制树 Performance Debugging Tools
  43. 调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 •

    debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在了望台里显示绘制树 Performance Debugging Tools DEMO