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
630
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
86
Other Decks in Programming
See All in Programming
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
290
Ruby GitHub Packages
bkuhlmann
0
630
Anthropic Cookbook のおすすめレシピ
schroneko
7
1k
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
"config" ってなんだ? / What is "config"?
okashoi
0
240
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
820
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Navigating Team Friction
lara
178
13k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
It's Worth the Effort
3n
180
27k
Code Reviewing Like a Champion
maltzj
514
39k
For a Future-Friendly Web
brad_frost
172
9k
Statistics for Hackers
jakevdp
789
220k
What the flash - Photography Introduction
edds
64
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
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