Flutter DevTools （App性能检测）使用记录
type
status
date
slug
summary
tags
category
icon
password
学习内容
使用wandroid 的 api 花了 断断续续的时间写代码（四天），我的学习热情也逐渐减低（好想能多线程把KVMM，Jectpack Compose 学完呀！），最近打开写完的项目 ，想去优化一下， 又重燃我的热情了，下面这篇文章是关于如何使用Android Studio 自带的工具套件 DevTool ，做Flutter的性能检测 ，记录下这个学习。
DevTool是什么 ？
是对于Dart 和Flutter 开发人员的 一个工具套件， 有布局检查工具，性能工具，内存工具… 一些常用的调试工具被置在这个web套件中。
我打算 github 搞多个分支出来是作为优化版的代码 ，而默认分支则作为bug分支。
DevTool 的开启
（ vscode / androidstudio / command line ）
我用的是Android Studio， 你可以在 run / debug 应用 之后， console 控制台右边看到 devtool 的图标 ，点击即可启动
也可以使用命令去启动 ：
flutter run --profile 旧命令
点击 h （-help）命令缩写，会弹出 flutter 调试页面命令列表
比如我想打开 DevTools ，可以输入v ，之后会自动跳转到系统默认浏览器，命令页面如下：
Flutter Inspector
布局渲染相关的问题，可以在 Flutter Inspector 查看 FLutter 应用程序的总体布局。
如果你在调试布局样式的时候，看到有 一条黄黑条纹的警告条，这说明你的应用存在渲染溢出的问题。
这时候你查看应用的布局树，可查看对应的 Recent Object ，看有哪些是不受约束。不过说实话，我觉得看应用层级树去排查问题有点难度 。
使用一个叫 Layout Explorer 的玩意 ，用它能实现实时调整溢出的布局代码，协助你找到需要修改的布局代码，但这玩意我个人觉得使用起来有点鸡肋，如果能直接指向有渲染溢出的代码去修改不是更方便吗？
Performace
上图是提示我着色器导致的动画卡顿，我可以通过添加多命令的方式去处理这个问题。https://docs.flutter.dev/perf/shader 官方文档有给我们总结了情况。
之后我们可以看到 超过60fps 的地方有哪些。
这里展示了应用传入的所有时间轴的活动，如果你看到这些60FPS的高帧频的柱形条，要留意下是哪块代码可能存在问题了。
点击Timeline Event， 你能看到Flutter 框架中的异步事件，传入的http，API事件，Dart线程以及UI线程 。
占用CPU 耗费太多时
Track Widget Builds ，这里反映绘制的一些情况。
Memory
内存分布的情况
总大小 12.7mb 算小？
内存消耗 是 200 - 250 m 之间波动
我得学习下 怎么查 webview的内存分析
请求接口的耗时 362.9ms -1000+ms 都有， 这个得优化， 数据请求耗时
CPU Profiler ，使用了 recording 功能，很久未响应。 可能是我用模拟器的原因。
终于跑出来了，是太慢了
拿我第一项CPU 占用来说，打开后我们会发现 RenderObject 这个 父类耗时比较久，算正常的，这部份内容是跟flutter 渲染绘制有关的 。
之后我继续切换 callTree 相关的内容
可以看到 ，我们callTree 也类似前面的
Method Table 这个功能 右上角 有一个Search 搜索框 ，我们可以匹配包名 ，这里我匹配到的是31个地方，我继续检查。
去查看自己项目代码的占比份额。 举例 图中的，可以看到这里是json 解析相关的代码，我 感觉这个可以不用优化。
- 橙色 是匹配 search 搜索向下查询
- 是黄色 是匹配 search 框查找结果
- 灰色 是鼠标点击选中的一项
- 呼叫者 单词翻译，从程序角度 这里应该是调用者？？？？ （这里有待斟酌）
- callee 可以看到 5 这个地方是 指 调用的代码 所引用的方法。
就我现在这个项目，这个地方暂时我没有发现有需要优化的地方，感兴趣的友友们，可以下我bug版代码测下。（你很无聊的话）
好了，之后就是CPU Profile 的最后一个部分，CPU Flame Chart （确定 CPU 繁忙的原因是性能分析的一项例行任务 ）
右边有个类似倒三角的按钮 ，能过滤。这里我选了Natvie层 和 Flutter 相关的库的过滤 ，也可以自定义过滤查询。
Memory ：查看Dart 和 Android 的内存 情况，或者当发生垃圾收集时，你能查看代码的分布情况， 实例的占用
Network 页面是收集传入的Http请求，我们可以看到的抓包的请求信息，计时的数据等。
Debugger 源码调试器 ，我们在IDE 调试断点的功能 都有，跨过，进入，查看对应的变量，可以搜索源代码查看,断点对应的字段数据。
Logging
GC时间，常规的控制台日志 或者我们标记的日志
如下图，捕获了一个gc问题， 原因是 idle 造成的
