Flutter和iOS原生性能對比測試

開篇

剛剛起步看了兩個月Flutter，感受和以前那些跨平臺框架略有不一樣，我認爲已經到跨平臺時代的3.0（隨便說說哈）。 如今Flutter是谷歌主推的一個東西，感受仍是有點期待。下面是一個Flutter的Demo和本身作的一個基本功能差很少的iOS原生Demo作一個性能對比。

正文

下文使用，從內存使用率、CPU使用率、FPS和包體積方面去作對比。注意：圖片分辨率都是 1000 * 1000的量級。

Demo頁面

Flutter Demo頁面

iOS原生Demo頁面

固然iOS和Flutter Demo從一些UI和設計風格上略有不一樣。可是基本在關鍵點上面已經作到基本一致。

CPU使用率-Flutter vs iOS原生

Flutter

上圖所示，測試5分鐘雙圖片列表滑動3分鐘以前是一直下拉滑動加載圖片列表。3分鐘以後是靜止等圖片顯示完。 滾動時候的尖刺是由於網絡下載時候cpu使用率最高達113%，平均達55%左右。由於用到了Stateful的Widget因此會有不斷刷新界面的操做因此cpu會在多圖狀況下cpu使用率平均38%左右。

iOS原生

上圖所示，使用一開始比較經典的對比，有突刺的是滑動下載和加載圖片的時候最高在115%CPU使用率。在1分鐘到1分30秒區間中是滾動在已經下載好的圖片，平均在18%左右的使用率。和Flutter 對比靜止和滾動時候其實都是iOS原生好點。

結果

平均	最高	靜止
55	113	38
18	115	0

原生略勝。

內存使用率-Flutter vs iOS原生

Flutter

測試了6分鐘，其中從1分鐘到3分鐘不斷下拉不斷下載圖片時間，內存最高使用率到263Mib。

iOS原生

使用SDWebImage框架以後，而且設置最大使用內存以後原生保持在 400Mib左右。

這個回合，若是不額外處理的話，Flutter勝出。

內存使用率-Flutter vs iOS原生

Flutter

這個表現良好基本在58以上，不過是由於Flutter每一秒都會刷新界面的緣故吧~~因此我不動貌似都會刷新，而且是在FPS爲58以上。GPU使用率最高會利用到68%，其餘都保持在30%左右。這麼厲害的內存泄漏是由於使用了圖片框架形成的能夠忽略，不是Dart或者Flutter原本的問題。

iOS原生

iOS原生滾動的時候，這是使用SDWebImage處理結果大約都在57fps以上。GPU使用率比Flutter低，還須要優化，不過還有一個問題，Flutter靜止圖像的時候還會使用GPU，而原生在靜止時候，就不會使用GPU了。

這方面原生略微勝出。

包體積-Flutter vs iOS原生

iOS原生	Flutter
213KB	11.4MB

Flutter沒有優化的時候，比原生大10M左右，這個是由於Flutter.ipa裏面App.framework和Flutter.framework包比較大，因此這個回合是原生勝。

Flutte包體大小優化能夠參考閒魚的：mp.weixin.qq.com/s/IIoaY2uw6…

可是這個包體大小已經沒有什麼空間能夠優化了，由於邏輯比較少，因此基本作不到很大的優化。

總結

Flutter其實性能和原生不會相差十分遠，可是也有缺陷，好比不斷使用GPU（在Stateful控件中），並且編程風格和部分控件風格也和iOS相差比較遠。還有一些生命週期方面的方法也相對少。可是Flutter有接近前端的佈局語法和相對簡單的Api也是讓新學習的同窗很快地上手。

Demo

github.com/KoonChaoSo/…