1、Flutter直接運行在Dart上，而Dart可以直接集成Skia，同步升級更方便，其他的APP開發(fā)方式需要先通過安卓框架才能調(diào)用到Skia，Dart明顯比其他開發(fā)方式少了一步，這里也是性能優(yōu)于其他應(yīng)用的核心原因所在，另外，如果想要升級或者用最新的Skia版本，需要先升級安卓版本，這個就非常被動了，Dart卻可以非常便捷的升級最新版本的Skia。一張圖看到Skia在其中的重要作用，自己體會。

調(diào)用方式對比圖

2、Skia開源圖形引擎,隸屬于Google的一個項目，用于Chrome,Android，F(xiàn)irefox，Sublime，Adobe...

3、FLutter直接調(diào)用Skia擁有媲美原生的高性能，16ms60幀算是一個標準，如果離這個標準差的越遠，則看到的繪圖效果就會卡頓或不連續(xù)。下面對Flutter調(diào)用Skia的情況進行分析：

flutter run --profile --trace-skia

輸入命令

命令展示界面

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

時間軸

可以放大process中幀數(shù)顯示，可以看到Skia函數(shù)的調(diào)用情況，選中某些函數(shù)，可以看到調(diào)用的函數(shù)個數(shù)以及函數(shù)調(diào)用花費的時間

4、flutter screenshot捕捉SkPicture,可以單步檢測每一條繪圖指令

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

Fluter將一幀錄制成SkPicture（skp）送給Skia進行渲染。捕捉skp，并利用debugger.skia.org我們可以單步分析每一條繪圖指令。

錄制skp

執(zhí)行完指令后，選擇錄制好的skp文件，點擊“UPLOAD”，如下圖所示，可以看到每條繪圖指令的執(zhí)行情況。

skp渲染

調(diào)用函數(shù)圖

可以很清楚的看到冗余渲染，有針對性的進行優(yōu)化，例如前面的圖形被后面的背景板擋住了，我們清除后面的背景板，用命令表達如下圖。

清除多余幀數(shù)

改進后的界面

改進后調(diào)用函數(shù)圖

5、容易成為性能瓶頸的Skia函數(shù)

saveLayer：每調(diào)用一次需要在GPU中分配一塊新的繪圖緩沖區(qū)，并告訴GPU，切換繪圖目標，這個過程非常耗時，尤其在老的設(shè)備上。

clipPath：一旦調(diào)用，每一個繪圖指令都需要和clipPath做交互

如果在Flutter的App中，盡量減少上述兩個函數(shù)的調(diào)用，性能能夠提升2倍以上

例如下面的skp，優(yōu)化前需要13ms，使用saveLayer多達35次

優(yōu)化前

優(yōu)化前saveLayer具體調(diào)用

優(yōu)化后只需要8s-10ms的渲染時間，調(diào)用了一次saveLayer

優(yōu)化后

優(yōu)化后調(diào)用次數(shù)

Skia的渲染過程是異步的，先預(yù)處理，然后統(tǒng)一渲染，所以上面所展示的具體秒數(shù)只是預(yù)處理時間，具體消耗巨大性能是在SkCanvas::Flush里，所以如果saveLayer次數(shù)增加對于Flutter的APP的性能影響非常大。

SkCanvas::Flush

這些消耗性能的函數(shù)會出現(xiàn)在哪里？

消耗性能的地方

6、總結(jié)：如何處理Flutter性能問題

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

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

c、給谷歌發(fā)郵件