第四弹：Flutter图形渲染性能

目标：

1）Flutter图形渲染性能能够媲美原生？

2）Flutter性能优于React Native?

一、Flutter图形渲染原理

1.1 Flutter图形渲染原理

Flutter直接调用Skia

1）Flutter将一帧录制成SkPicture（skp）送给skia进行渲染。

捕捉skp, 并利用 debugger.skia.org, 我们可以但不分析每一条绘图指令；

捕捉图片指令

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

1.2 Skia图形开源引擎

Skia有两套很不同的后端，Flutter在iOS模拟器采用的纯CPU后端；而实际设备一般采用GPU硬件加速后端。

1.3 分析Flutter应用的Skia调用情况

flutter run --profile --trace-skia

常见性能瓶颈

请注意以下的skia函数调用

• saveLayer
• clipPath

尽量减少上述两个函数的调用，将性能提升2倍。