Flutter 性能优化

一、统计应用启动时间

使用如下命令行运行项目

$ flutter run --trace-startup --profile

它会在flutter的build下面生成start_up_info.json文件。里面包含四个时间（以微秒为单位）：

• 进入flutter引擎的时间
• 展示应用第一帧时间
• 初始化flutter框架时间
• 完成flutter初始化时间

{
  "engineEnterTimestampMicros": 1529286666907,
  "timeToFrameworkInitMicros": 750731,
  "timeToFirstFrameRasterizedMicros": 839979,
  "timeToFirstFrameMicros": 832027,
  "timeAfterFrameworkInitMicros": 81296
}

二、跟踪Dart代码性能

Timeline.startSync('interesting function');
// iWonderHowLongThisTakes();
Timeline.finishSync();

使用profile模式运行，打开你应用程序的Observatory timeline页面，在“Recorded Streams”中选择‘Dart’复选框，并执行你想测量的功能。这个我试了试，似乎不太好用，没找到自己要的时间差。

debugDumpLayerTree()

三、调试应用程序层

flutter框架的每一层都提供了讲其当前状态或事件转储（dump）到控制台（使用debugPrint）功能。

• Widget 树 debugDumpApp();
• 渲染树 debugDumpRenderTree();
• Layer树 debugDumpLayerTree()；

但是由于这几个方法的输出都是很多的，而且控制台的格式都不太好看，所以很难用来做分析。

四、可视化调试

我们也可以通过设置debugPaintSizeEnabled为true以可视方式调试布局问题。 这是来自rendering库的布尔值。它可以在任何时候启用，并在为true时影响绘制。 设置它的最简单方法是在void main()的顶部设置。

当它被启用时，所有的盒子都会得到一个明亮的深青色边框，padding（来自widget如Padding）显示为浅蓝色，子widget周围有一个深蓝色框， 对齐方式（来自widget如Center和Align）显示为黄色箭头. 空白（如没有任何子节点的Container）以灰色显示。

debugPaintBaselinesEnabled (opens new window)做了类似的事情，但对于具有基线的对象，文字基线以绿色显示，表意(ideographic)基线以橙色显示。

debugPaintPointersEnabled (opens new window)标志打开一个特殊模式，任何正在点击的对象都会以深青色突出显示。 这可以帮助我们确定某个对象是否以某种不正确的方式进行hit测试（Flutter检测点击的位置是否有能响应用户操作的widget）,例如，如果它实际上超出了其父项的范围，首先不会考虑通过hit测试。

如果我们尝试调试合成图层，例如以确定是否以及在何处添加RepaintBoundary widget，则可以使用debugPaintLayerBordersEnabled (opens new window)标志， 该标志用橙色或轮廓线标出每个层的边界，或者使用debugRepaintRainbowEnabled (opens new window)标志， 只要他们重绘时，这会使该层被一组旋转色所覆盖。

所有这些标志只能在调试模式下工作。通常，Flutter框架中以“debug...” 开头的任何内容都只能在调试模式下工作

五、DevTools

运行debug版本，在Android studio下面有个run控制台，上面的dart图标点击一下就可以进入可视化调试界面。

image.png