关于performance
来源：6-6 性能面板的使用技巧及Dart内存调优
demonCry
2022-09-12
问题1：
1.1 上面这个柱状图的横纵坐标都是指什么
1.2 鼠标移上去的 UI 和 Raster 又是撒意思
1.3 Jank 和 Shader Compilation 又是撒…
总之就是没看懂…（-_-||）
问题2
2.1 选中上面的一块柱状图后, 线面的timeline会随之联动, 会出现蓝色的[],这和上面的柱状图有什么关系呢
2.2 这里也出现了UI和Raster ，显示的是不一样的东西，都是撒
意外往下拉了一拉, Timeline 下面还有很多…
问题3 Performance Ovelay 显示在手机上的两个图又是怎么看的
emmm… 很懵逼
希望老师写个demo然后根据这个demo具体展开讲讲，该怎么看这个东西 （文章视频皆可，但希望能有一个真实一点的可调试的那种demo来举例）
money is not problem O.O!
3回答
-
马超老师
2022-10-07
最后来看看Performance Overlay。
其实看懂了前面两段，这个就不难理解了，其实就是把数据更直接的展示到了屏幕上。
整体分为两个柱状图表：Raster和UI，分别表示Raster Thread（GPU Thread）和UI Thread（具体含义可回顾2.7小节讲的Flutter线程模型）
当你在App上进行一些操作触发页面刷新，就会出现针对每一帧的数据统计，其中蓝色表示正常的帧，超过了16ms的会用红色的柱体表示，绿色表示当前的帧。
然后柱状图的底部会有一个“max”和“avg”，分别表示最大值和平均值。
以上针对Performance工具作了简短的解释，如果大家有需求，可以留言。需求大的话我后面用文章或者视频的形式做一个系统的讲解
00 -
马超老师
2022-10-07
我们继续来看第二部分，TimeLine Event，它展示了App渲染所经历的所有事件时常。
TimeLine Event表示的是更详细的事件，所以当你点击一个柱状图的时候，它会联动的跳转到对应帧的具体事件时常，但是由于左右都有上一帧和下一帧的数据，所以用一个大括号把你选中的帧数据给框起来，目的就是方便你查阅你指定的帧数据；
这里的UI和Raster和上面的含义是一样的，只不过把具体的事件都展开来列举了，并且统计了每个事件的时常，实际工作中可以根据时常来做优化；
往下拉会有很多，应该看起来只有几毫秒的事情，Flutter的渲染实则经历了很多的流程，这里会把所有的流程都列举出来。往左右拉是时间线，和上面的帧是对应的
00 -
马超老师
2022-10-07
如果大家感兴趣的话，后面我出个文章来展开讲讲。这里我先简单说明一下你的问题
performance是用来监控卡顿，优化性能的工具。
首先聊一下柱状图相关的问题
柱状图表示就是每一帧的渲染时长。横坐标表示帧序号，纵坐标就是时长，单位ms；
UI是指“UI Thread”,raster表示“Raster Thread”(也就是GPU Thread)。这两个概念在课程的前面讲Flutter线程模型的时候有讲解过，具体可以回顾一下视频内容；
红色的柱状图表示Jank，也就是slow frame，直译就是慢帧。devTool把大于16ms的帧归为慢帧，用红色柱状图表示。（16ms的计算是按照FPS为60来算的，大于60被认为视觉卡顿）
剩下一种叫Shader Complilation，着色器编译。它发生在App第一次渲染某一种动画的时候，需要做着色器编译。Flutter为了优化App动画性能，在渲染好一次之后就会在本地生成一个缓存文件，下次在需要渲染这个动画的时候就可以直接使用解析好的文件，就不会重新做着色器编译了。
同时官方也提供了一种叫SKSL 预热的方案可以避免在第一次渲染的时候由于Shader Complilation导致卡顿。这里就不展开讲了，如果感兴趣的话可以在下方留言，我再展开讲讲这个东西的用法和原理。
00
相似问题