前言

自從今年google IO大會(huì)推出flutter跨平臺(tái)開(kāi)發(fā)框架以來(lái)，flutter在各個(gè)技術(shù)論壇里被吵得如日中天。flutter團(tuán)隊(duì)直言flutter可以幫助開(kāi)發(fā)者輕松實(shí)現(xiàn)恒定60fps的性能體驗(yàn)。這里附上flutter官方性能介紹：flutter應(yīng)用程序性能介紹
我們知道flutter跨平臺(tái)的原理是采用dart語(yǔ)言預(yù)編譯的方式直接編譯出各個(gè)平臺(tái)的原生代碼，而不需要類似RN用JavaScript橋接器執(zhí)行原生代碼。那么這樣做的性能究竟如何呢？是否能達(dá)到和原生一樣的流暢度，是否如官方所說(shuō)達(dá)到恒定60fps的性能體驗(yàn)？今天我們就以android為例從幾個(gè)不同的維度來(lái)實(shí)際測(cè)試一下！

安裝包對(duì)比

我們分別用 flutter 和 android 原生來(lái)編寫一個(gè)ui效果一模一樣的 apk，然后打出 release 版本的安裝包，為了保證測(cè)試結(jié)果的可靠性，我們不引入任何第三方庫(kù)，只用框架提供的控件做一些簡(jiǎn)單ui，這里附上demo源碼：flutter demo，android demo。好了，我們打出各自的release版本apk，然后使用AndroidStudio自帶的APK Analyzer進(jìn)行分析，如下圖：

• apk 大小 可以明確的看出來(lái)，原生的安裝包要比 flutter 安裝包小約 6M 左右。
• classes.dex 大小 看 dex 大小你會(huì)不會(huì)很奇怪，原生的 classes.dex 竟然比 flutter 版的dex大六百多KB，這是因?yàn)樵?dex 里引入了 support 庫(kù)和各種基礎(chǔ)控件(ImageView TextView等等)，而 flutter 的 dex 里面沒(méi)有support庫(kù)，也沒(méi)有原生控件，實(shí)際上 flutter 實(shí)現(xiàn)了一套自己的控件，包括 Material Design 和 Cupertino（iOS風(fēng)格的widget）。
• res 對(duì)比 可以看到原生的資源文件要比 flutter 大約200多k，而我們項(xiàng)目中沒(méi)有編寫任何資源文件，所以這些資源文件大多是 support 包和 sdk 自帶的。
• lib 庫(kù) 大家可能會(huì)發(fā)現(xiàn)，我們的 flutter 版 app 多出了一個(gè) lib 庫(kù)，打開(kāi)里邊是一個(gè) libflutter.so，因?yàn)?Flutter 引擎是用 C、C++ 來(lái)編寫的，在 android 上會(huì)使用 ndk 編譯，在 iOS 上使用 LLVM 編譯，而我們自己寫的 dart 代碼會(huì)通過(guò) AOT 編譯成各個(gè)平臺(tái)的本地代碼。

通過(guò)對(duì)比我們了解到，flutter 版的 apk 大小會(huì)比 android 原生的多出約 6M 左右，其中核心引擎大約 3.2MB，框架+應(yīng)用程序代碼大約是 1.25MB，必需的 Java 代碼 .dex 將近 60k，而 assets 文件里還約有 2.1MB 的 ICU 數(shù)據(jù)等，單純從安裝包上來(lái)說(shuō)，原生是要優(yōu)于 flutter 的。

運(yùn)行性能測(cè)試

為了測(cè)試覆蓋更加充分，我們分別在 debug 和 release 模式上進(jìn)行性能測(cè)試。而據(jù)官方介紹 flutter 的 debug 模式在性能上是要略于 release 版的，所以他們提供了 profile 模式供我們測(cè)試，profile 模式編譯和啟動(dòng) Flutter 應(yīng)用程序幾乎與 release 模式完全相同。
我們先看 android 原生的 debug 和 flutter 的 proflle 模式性能對(duì)比,這里我們用 Android Profiler 進(jìn)行性能指標(biāo)檢測(cè)，demo 只有一個(gè)界面，用 ListView 展示 10000 條數(shù)據(jù)。下面看圖：

• CPU資源占用 首先，我們看 CPU 的占用，在啟動(dòng)的時(shí)候，android 原生對(duì) cpu 的占用峰值在 26.8%，而且?guī)缀跏潜容^平穩(wěn)的變化，而 flutter 對(duì) cpu 的占用峰值達(dá)到了 35.5%，是一種很陡峭的形態(tài)，然后在大約十六七秒的時(shí)候，分別滑動(dòng)了 listview， android 原生對(duì) cpu 資源的占用峰值約 23%，而flutter約 22.5%。從圖中也可以看得出，flutter 對(duì) cpu 資源的占用是突然之間占用很高，而 android 則相對(duì)平穩(wěn)一些。
• 內(nèi)存占用 內(nèi)存占用表現(xiàn)上兩者都很相似，android 原生在啟動(dòng)時(shí)占用內(nèi)存最高達(dá)到 58.1MB，而 flutter 則為 72MB，在滑動(dòng) listview 的時(shí)候，兩者表現(xiàn)也很一致，都沒(méi)有突然出現(xiàn)很高的內(nèi)存占用。達(dá)到穩(wěn)定狀態(tài)后，android 原生內(nèi)存占用穩(wěn)定在35MB，而 flutter 為 52.5MB。

debug 和profile 模式的性能測(cè)試如果你還不放心的話，那么下面我分別打包出用 flutter 和 android 原生構(gòu)建出的release apk，然后將手機(jī)開(kāi)啟ROOT權(quán)限，以便可以用 Android Profiler 檢測(cè)到這兩個(gè)版本的進(jìn)程，進(jìn)行性能測(cè)試。下面看圖：

我在打開(kāi) app 并鎖定當(dāng)前進(jìn)程后，分別在大約第 10 秒的時(shí)候，用手指輕輕滑動(dòng)了 ListView，下面我們分析下兩種方式的資源占用情況。

• CPU資源占用 首先，我們看 CPU 的占用，正常情況下，兩者都沒(méi)有占用多少 CPU 資源，當(dāng)我滑動(dòng) listview 的時(shí)候，原生的大約會(huì)占用最高 7.7% 的 CPU 資源，而 flutter 版的則占用高一些，峰值大概在 18.8%。
• 內(nèi)存占用 原生的app內(nèi)存占用維持在 12M 左右，而 flutter 版的則維持在 21M 左右，原生應(yīng)用比 flutter 大約低了 9M 的內(nèi)存占用。

從上邊兩種模式的性能檢測(cè)結(jié)果分析我們可以總結(jié)出，flutter 應(yīng)用在 CPU 和內(nèi)存的資源占用上會(huì)比原生方式多一些，所以單純的從性能上來(lái)說(shuō)，android 原生是肯定要優(yōu)于 flutter 的，但是從用戶體驗(yàn)上來(lái)說(shuō)，兩者的滑動(dòng)同樣順暢無(wú)比，幾乎感覺(jué)不到差別。

應(yīng)用啟動(dòng)對(duì)比

啟動(dòng)是我們衡量一個(gè)應(yīng)用程序性能的重要指標(biāo)，下面我先通過(guò)一個(gè) gif 來(lái)演示下 android 版和 flutter 版啟動(dòng) app 的體驗(yàn)：

看得出，android 版和 flutter 版從啟動(dòng)體驗(yàn)上來(lái)說(shuō)幾乎不相上下。這里我大膽做一個(gè)猜測(cè)，flutter app的啟動(dòng)機(jī)制和原生還是一模一樣，所以調(diào)用啟動(dòng) Application 也是創(chuàng)建 ActivityThread 然后最終執(zhí)行 Application 的 onCreate 方法，所以從啟動(dòng)上來(lái)說(shuō)相差無(wú)幾。下面我貼出 android 原生和 flutter 版的啟動(dòng)trance文件，

trance 文件幾乎一模一樣，我一度都懷疑是自己弄錯(cuò)了，然后又仔細(xì)確認(rèn)了一下沒(méi)出錯(cuò)才放心，可以得出結(jié)論，flutter 版的啟動(dòng)流程跟原生是一模一樣的。

flutter 60幀/秒的刷新率測(cè)試

Flutter 官方指出其旨在提供 60 幀/秒的刷新率，60 fps 意味著大約平均每 16 ms 渲染一幀。我們知道，當(dāng) UI 不能平滑的渲染時(shí)就會(huì)出現(xiàn)掉幀。舉個(gè)例子，假如有一幀執(zhí)行的東西太多，花費(fèi)了 160 ms 的時(shí)間去渲染，這段期間就會(huì)產(chǎn)生丟幀現(xiàn)象，從而就會(huì)看到動(dòng)畫出現(xiàn)了明顯的抖動(dòng)。flutter release 版本是沒(méi)法去測(cè)試渲染指數(shù)的，這里我們還是以 profile 模式運(yùn)行，然后在用官方給我們提供的 Flutter Inspector 工具去展示 fps 變化。下面看 Gif 圖：

我的手機(jī)是小米Note 2，高通驍龍821處理器 4G 內(nèi)存，性能大概屬于 Anroid 陣營(yíng)中上等。我打開(kāi) app 后先是平穩(wěn)的滑動(dòng) listview，然后又快速的滑動(dòng)，由圖可看出，刷新率起初恒定在 60fps，當(dāng)我快速滑動(dòng)的時(shí)候，刷新率大約保持在58~59 之間，所以 flutter 官方所說(shuō) fps 恒定在 60fps 還是可信的。

總結(jié)

通過(guò)以上的分析，我們可以很明確的得出結(jié)論，android 原生在內(nèi)存、CPU 資源占用方面要低于 flutter，并且安裝包的體積也要小于 flutter，所以，不考慮其他因素，單純從性能角度來(lái)說(shuō)，android 原生肯定是要優(yōu)于 flutter 的。但 flutter 也有它的優(yōu)點(diǎn)，比如跨平臺(tái)的開(kāi)發(fā)、毫秒級(jí)的熱重載等等，另外跨端開(kāi)發(fā)也逐漸的流行起來(lái)，所以，我們?cè)趯W(xué)好android原生的基礎(chǔ)上，對(duì)跨端開(kāi)發(fā)也要抱有積極的心態(tài)。