React Native VS Flutter評測

06-26

之前分別用iOS原生和Flutter寫了一個空氣質量App並對它們對性能、容量等做了對比評測. 很多小夥伴在下方留言說這樣的對比沒有意義, 認為Flutter根本不是用來替代原生也不可能超越原生開發. 我這裡先做一個解釋:

我在對比評測中提供了儘可能多的數據, 並不是想證明Flutter和原生比有多爛, 而是想告訴你如果選擇了Flutter你的App包會增長多少倍、對App啟動速度的影響會有多少秒, 好讓大家將來在定技術棧的時候能夠盡量心中有數.

當然也有網友提出和應該React Native來做對比, 畢竟這兩個都是主攻跨平台開發. 其實我早就想做一個類似的對比評測, 前段時間公司出現變動, 周末難得抽空做了一個React Native版的Demo, 最終得出了今天這份評測報告.

Aireport(iOS原生)?

link.juejin.im

Aireport Flutter(Flutter版)?

link.juejin.im

RN版還在審核中, 大家可以自行下載體驗一下.

1.安裝包大小

Flutter應用安裝包和安裝後容量

React Native應用安裝包和安裝後容量

這個差距, emmmmmm, 這裡給出iOS原生版應用的大小大約在2.5MB, 也就是說RN已經做到了比原生還要小的安裝包. 這主要歸功於兩點:

基於iOS自帶的UI框架而非Flutter這樣的自有框架(Flutter SDK有30MB左右)
使用了OC而非Swift作為開發語言(本次預測大失敗, Swift5並沒有隨著WWDC放出, 也就沒能集成到iOS12中....)
iOS原生版其實實現了比其他版本更多的功能, 比如Weiget、通知

React Native較小的安裝包帶來的優勢不僅是降低了下載門檻、減少了磁碟佔用, 而且對於混合開發的壓力也更小. 試想一個原生App因為幾個頁面使用了Flutter, 一行代碼沒寫安裝包就憑空增加了30MB, 這樣的結果不是開發人員希望看到的.

2.啟動速度

啟動速度RN依然與原生不相上下, 並且要比Flutter好上一個等級. RN雖然使用js來構建應用程序, 但最終RN會將js轉化成原生代碼. 這就讓RN的運行效率高出Flutter好幾倍.

3.內存佔用

內存佔用方面, RN顯然沒有原生做的好, 與Flutter的差距也不大, 而且經測試發現, RN的內存佔用不是很穩定, 頁面剛生成的時候內存佔用會高一點, 之後緩慢回落.

通過Xcode工具我們可以看到, RN(React-Native-Navigate)並沒有使用iOS系統的導航系統, 而是以一種相對粗暴的形式直接覆蓋在了上一個View上. 相反iOS原生系統的頁面切換會在新頁面顯示完畢後將前一個頁面去掉(不做渲染), 這樣可以有效節省內存的消耗. 此外, RN的控制項也沒有使用UIKit中的現有組件, 而是通過最基本的UIView去組合模仿(比如NavigationBar). 這樣做雖然可以減少安卓和iOS之間UI層的差異, 但顯然優化的空間就變小了.

4.流暢度

React Native幀率

Flutter幀率

iOS原生幀率

我們可以看到, RN得益於UIKit的加持, 整體流暢度和原生非常接近, 比聲稱60幀的Flutter要好. 尤其是搜索頁滾動的幀率. 但是在頁面切換(紅色區域)時漏出了馬腳, 原因就在於上面提到的, RN並沒有使用系統自帶的導航系統, 而是自己做了一個類似的平移動畫. 很可惜, 這個動畫並沒有跑滿60幀, 但也要比Flutter好一點.

觀察動畫的時間和曲線可以發現, 原生的跳轉動畫時間更長, 但他的加速效果也是最好的, 其他兩個平台的跳轉動畫就略顯生硬.

最後可以分別觀察一下CPU的佔用, RN的表現可以說是非常好了, 尤其是在TableView滾動的時候, 其原因也很簡單, 它沒有使用reuse pool, 因此不需要頻繁修改已存在的Cell, 壞處是隨著Cell的增多, 內存壓力也會越來越大.

5.iOS特性支持

由於最後還是用原生語言去實現, RN先天可以得到iOS的部分特性. 而且相比於Flutter, 線上熱更新才是它真正的殺手鐧. Flutter雖然理論上可以實現, 但部署起來還有很多的問題需要解決, 一切還是未知數. 此外, RN和Flutter都支持混編, 這就幾乎解決了實現上的所有問題. 唯一的問題是, 有多少功能和特性需要用原生去實現, 這樣的維護成本又有多高.

最後的最後還是要說一下, Flutter目前還在測試版, 不建議在生產環境使用, 因此以上做出的對比並不能代表Flutter最終的真實水平. 但可以預見, 在短期內Flutter還是無法撬動RN在跨平台開發中的地位, RN仍舊是目前跨平台開發的最優解. 但不可否認Flutter確實實現了Write Once,Run Anywhere, 只不過至少在Fuchsia出來之前, 我們都無法完整評估它的真實價值.

最後給出GitHub地址:

Aireport(iOS原生)?

link.juejin.im

Aireport Flutter(Flutter版)?

link.juejin.im

Aireport Flutter(React Native版)?

link.juejin.im