深入了解 Flutter 的高性能图形渲染

1、Flutter直接运行在Dart上，而Dart可以直接集成Skia，同步升级更方便，其他的APP开发方式需要先通过安卓框架才能调用到Skia，Dart明显比其他开发方式少了一步，这里也是性能优于其他应用的核心原因所在，另外，如果想要升级或者用最新的Skia版本，需要先升级安卓版本，这个就非常被动了，Dart却可以非常便捷的升级最新版本的Skia。一张图看到Skia在其中的重要作用，自己体会。

调用方式对比图

2、Skia开源图形引擎,隶属于Google的一个项目，用于Chrome,Android，Firefox，Sublime，Adobe...

3、FLutter直接调用Skia拥有媲美原生的高性能，16ms60帧算是一个标准，如果离这个标准差的越远，则看到的绘图效果就会卡顿或不连续。下面对Flutter调用Skia的情况进行分析：

flutter run --profile --trace-skia

输入命令

命令展示界面

打开提示地址：http://127.0.0.1:53649

时间轴

可以放大process中帧数显示，可以看到Skia函数的调用情况，选中某些函数，可以看到调用的函数个数以及函数调用花费的时间

4、flutter screenshot捕捉SkPicture,可以单步检测每一条绘图指令

flutter screenshot --type=skia --obervatory-port=<port>

Fluter将一帧录制成SkPicture（skp）送给Skia进行渲染。捕捉skp，并利用debugger.skia.org我们可以单步分析每一条绘图指令。

录制skp

执行完指令后，选择录制好的skp文件，点击“UPLOAD”，如下图所示，可以看到每条绘图指令的执行情况。

skp渲染

调用函数图

可以很清楚的看到冗余渲染，有针对性的进行优化，例如前面的图形被后面的背景板挡住了，我们清除后面的背景板，用命令表达如下图。

清除多余帧数

改进后的界面

改进后调用函数图

5、容易成为性能瓶颈的Skia函数

saveLayer：每调用一次需要在GPU中分配一块新的绘图缓冲区，并告诉GPU，切换绘图目标，这个过程非常耗时，尤其在老的设备上。

clipPath：一旦调用，每一个绘图指令都需要和clipPath做交互

如果在Flutter的App中，尽量减少上述两个函数的调用，性能能够提升2倍以上

例如下面的skp，优化前需要13ms，使用saveLayer多达35次

优化前

优化前saveLayer具体调用

优化后只需要8s-10ms的渲染时间，调用了一次saveLayer

优化后

优化后调用次数

Skia的渲染过程是异步的，先预处理，然后统一渲染，所以上面所展示的具体秒数只是预处理时间，具体消耗巨大性能是在SkCanvas::Flush里，所以如果saveLayer次数增加对于Flutter的APP的性能影响非常大。

SkCanvas::Flush

这些消耗性能的函数会出现在哪里？

消耗性能的地方

6、总结：如何处理Flutter性能问题

a、捕捉timeline（flutter --profile --trace-skia...）

b、捕捉skp(flutter screenshot --type=skia)

c、给谷歌发邮件