Flutter性能分析工具使用

使用前提

flutter常用的性能分析工具，这些工具都集成在android studio中，基本能满足我们的需求了。在下面介绍的几个工具中，Flutter Performance和Flutter Inspector都能够直接在debug模式下使用，但是DevTools只能在profile模式下使用，Profile模式和release模式比较接近，都是使用了AOT预编译，运行速度快，其性能介于debug和release之间，兼顾了性能和调试。一般的纯flutter项目，直接在工程目录下使用命令flutter run --profile启动，如果是混合工程，则需要在flutter的安装目录下找到flutter/packages/flutter_tools/gradle/flutter.gradle文件，在buildModelFor函数中强制返回profile就行了。

要使用这些工具，需要先在android studio中装上flutter和dart插件。

1、Flutter Performance工具

首先打开flutter performance面板，看一下它的工作区

• 1、将渲染情况显示到手机上
• 2、在手机上显示debug面板，可以观察组件的布局情况，列表滚动方向等，方便调整UI
• 3、显示文本的Baseline，数字、英文、汉字的绘制不一样，在对齐要求比较严格时可以打开这个功能，通过调整TextStyle对齐。
• 4、允许减慢动画播放速度
• Frame Rendering times, 每帧的渲染时长，红色的表示渲染时长过大，可能造成卡顿。
• Memory usage，内存使用情况
• Widget rebuild stats， 勾选上Track widget rebuilds， 就可以跟踪widget的构建情况，方便查看哪些widget是build次数最多的，下面显示的依次是widget名字，代码位置，上一帧构建的个数，以及总的构建个数。这个应该算是最有用的功能之一吧，很容易帮助定位到哪些widget构建次数最多，针对性优化。

2、flutter Inspector

这个应该算是我们最常用，同时也是最简单的工具了，一般点击工具栏中的flutter Inspector打开

这里面的几个小功能都比较简单，基本鼠标移动过去看看说明就知道是什么意思了，我最常用的有1、widget选择工具，可以帮助我们很快的定位到widget的位置，以及在代码中的位置；2、显示widget边界线帮助我们定位布局问题，3、图片占有内存较大时，会高亮翻转显示出来。

3、DevTools

如果直接在终端通过flutter run --profile命令打开项目，它会输出一个html地址，点击打开，就能在浏览器中打开flutter DevTools，可以看到这里面的功能就多了很多，基本把我们上面两个工具都包含进去了。

工具中Performance的功能和flutter performance提供的差不多，我们主要看看Cpu Profile和Memory两个。首先是Cpu profile, 这是使用需要有一个采样的过程，先点击record, 然后再app上一番操作，比如快速滑动列表，然后点击stop，我们就得到了一段样本，经过分析，我们主要看看CPU Flame Chart，它列出了一些函数的耗时，长度越大的耗时越多，然后我们就可以知道是哪一个函数耗时比较大了，针对耗时较大的函数进行优化。