Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Profiling Flutter Apps - GDD China 2018
Search
xster
September 20, 2018
Programming
3
620
Profiling Flutter Apps - GDD China 2018
Talk from GDD in Shanghai
xster
September 20, 2018
Tweet
Share
More Decks by xster
See All by xster
SV Flutter iOS Meetup - 18/08/20
xster
0
110
Flutter GMTC
xster
0
84
Other Decks in Programming
See All in Programming
htmx is fun!
codehex
2
190
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.1k
上手な探索的テストとその上達方法について
matsu802
4
650
Creating Retro-Style Photos Using Swift
ski
1
340
オブジェクトしこう
okuramasafumi
2
130
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
980
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Become a Pro
speakerdeck
PRO
8
4.4k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
For a Future-Friendly Web
brad_frost
170
8.9k
Side Projects
sachag
451
41k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
It's Worth the Effort
3n
180
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Web development in the modern age
philhawksworth
201
10k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Transcript
Flutter Performance Profiling and Theory Flutter的性能测试与理论 Xiao Yu 于潇
听众收益 • 时间都去哪了? • 理念投入使用 • 使用工具调试 Talk Goals
前言 • 不是入门题材 • 同场5:30请关注Flutter图像系统性能论坛 Preface
什么是应用性能 What is Rendering Performance
什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw
Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU
什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw
Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
什么是应用性能 What is Rendering Performance VSync Animation Measure Layout Draw
Display list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
Flutter的渲染阶段 Flutter’s Rendering Pipeline VSync Animation Build Layout Paint Display
list -> GPU
检测Flutter的渲染 Instrumenting Flutter’s Rendering
Profile模式 Profile Mode
检测Flutter的渲染 Instrumenting Flutter’s Rendering DEMO
渲染责任部件 Rendering Actors android.view.View - construct/inflate/update - onMeasure(int, int) -
onLayout(boolean, int, int, int, int) - onDraw(Canvas)
渲染责任部件 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
渲染责任部件 Rendering Actors UIView - init/update - updateConstraints - layoutSubviews
- drawRect:(CGRect)
渲染责任部件 Rendering Actors UIView - init/update - updateConstraints - layoutSubviews
- drawRect:(CGRect) VSync Animation Constraint Layout Display Display list -> GPU
Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() -
paint(PaintingContext context, Offset offset)
Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() -
paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
Flutter的渲染责任部件 Flutter’s Rendering Actors RenderObject - createRenderObject/updateRenderObject - performLayout() -
paint(PaintingContext context, Offset offset) VSync Animation Build Layout Paint Display list -> GPU
Flutter的声明式UI Flutter’s Declarative UI VSync Animation Measure Layout Draw Display
list -> GPU VSync Animation Constraint Layout Display Display list -> GPU Declarative -> Imperative
Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list
-> GPU Build
Flutter的树与渲染阶段 Flutter’s Trees and Rendering Phases Layout Paint Display list
-> GPU Build Widget Element RenderObject Layer
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
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’), ], ), )
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
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
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
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’), ], ), )
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’), ], ), )
树工程 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’), ], ), )
了解build阶段 Understanding the Build Phase
同类型更新 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’),
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
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 同类型更新
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 ? ? ? ? ? ? 同类型更新
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 ? ? ? ? ? ? 同类型更新
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 ? ? ? ? ? ? 同类型更新
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() ? ? ? ? ? ? 同类型更新
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() ? ? ? ? ? ? 同类型更新
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 ? ? ? ? ? 同类型更新
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 ? ? ? ? ? 同类型更新
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 同类型更新
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 ? ? ? ? ? 同类型更新
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 同类型更新
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 同类型更新
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 ? ? ? ? 同类型更新 ...
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 同类型更新
如何提高build效率 How to Improve Build Efficiency
调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •
debugPrintRebuildDirtyWidgets ◦ 什么组件被重新构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •
debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools
调试工具 • debugPrintBeginFrameBanner/debugPrintEndFrameBanner ◦ 每帧开始/结束 • debugPrintScheduleBuildForStacks ◦ 为什么被构建 •
debugPrintRebuildDirtyWidgets ◦ 什么组件被重构建了 • debugProfileBuildsEnabled ◦ 在观测台里显示构建树 Performance Debugging Tools DEMO
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’), ], ), ) ? ? ? ? ? ?
如何提高build效率 How to Improve Build Efficiency 降低遍历的出发点 ? ? ?
?
如何提高build效率 How to Improve Build Efficiency 停止树的遍历 降低遍历的出发点
如何提高build效率 How to Improve Build Efficiency 降低遍历的出发点 1. setState 2.
InheritedWidget 3. 热重载 ? ? ? ?
? ? ? ? 如何提高build效率 How to Improve Build Efficiency
降低遍历的出发点 1. setState 2. InheritedWidget 3. 热重载 DEMO
如何提高build效率 How to Improve Build Efficiency 停止树的遍历 降低遍历的出发点 1. 重用同一子组件实例
如何提高build效率 How to Improve Build Efficiency
如何提高build效率 How to Improve Build Efficiency
如何提高build效率 How to Improve Build Efficiency SlideTransition( ... child: Row(...)
)
了解layout阶段 Understanding the Layout Phase
布局阶段 Layout Phase Layout Paint Display list -> GPU Build
Widget Element RenderObject Layer 约 束 大 小
布局阶段 Layout Phase 最小宽度 最大宽度 最 小 高 度 最
大 高 度
了解paint阶段 Understanding the Paint Phase
绘制阶段 Paint Phase Layout Paint Display list -> GPU Build
Widget Element RenderObject Layer
Layout Paint Display list -> GPU Build Widget Element RenderObject
Layer 位置 Layer 绘制阶段 Paint Phase
Layer种类 Layer Types ContainerLayer ContainerLayer PictureLayer ContainerLayer PictureLayer ContainerLayer TextureLayer
Layer种类 Layer Types TransformLayer OffsetLayer PictureLayer OffsetLayer PictureLayer OffsetLayer TextureLayer
如何提高paint效率 How to Improve Paint Efficiency
Layout Paint Display list -> GPU Build Widget Element RenderObject
Layer How to Improve Paint Efficiency ? ? ? 如何提高paint效率
Layout Paint Display list -> GPU Build Widget Element RenderObject
Layer RepaintBoundary RepaintBoundary How to Improve Paint Efficiency 如何提高paint效率
调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 •
debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在观测台里显示绘制树 Performance Debugging Tools
调试工具 • debugDumpLayerTree ◦ 查看layer树 • debugPaintLayerBordersEnabled ◦ 查看layer界限 •
debugRepaintRainbowEnabled ◦ 被重新绘制的RenderObject • debugProfilePaintsEnabled ◦ 在了望台里显示绘制树 Performance Debugging Tools DEMO
Layout Paint Display list -> GPU Build Widget Element RenderObject
Layer
[email protected]
@xster