React Native VS Flutter評測

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

我在對比評測中提供了儘量多的數據, 並非想證實Flutter和原生比有多爛, 而是想告訴你若是選擇了Flutter你的App包會增加多少倍、對App啓動速度的影響會有多少秒, 好讓你們未來在定技術棧的時候可以儘可能心中有數.

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

Aireport(iOS原生)

Aireport Flutter(Flutter版)

RN版還在審覈中, 你們能夠自行下載體驗一下.

1.安裝包大小

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

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

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

• 基於iOS自帶的UI框架而非Flutter這樣的自有框架(Flutter SDK有30MB左右)
• RN最終轉換的代碼爲OC而對比的原生應用使用了Swift編寫(本次預測大失敗, Swift5並無隨着WWDC放出, 也就沒能集成到iOS12中....)

React Native較小的安裝包帶來的優點不只是下降了下載門檻、減小了磁盤佔用, 並且對於混合開發的壓力也更小. 試想一個原生App由於幾個頁面使用了Flutter, 一行代碼沒寫安裝包就憑空增長了30MB, 這樣的結果不是開發人員但願看到的.

2.啓動速度

啓動速度RN依然與原生不相上下, 而且要比Flutter好上一個等級. RN雖然使用js來構建應用程序, 但最終RN會使用js來調用成原生代碼生成原生UI控件. 至於Flutter, 正如我以前的評測中說的, 其App啓動的過程包含一個原生App啓動過程直至第一個原生VC初始化過程+Flutter運行時環境的初始化過程, 這個過程無疑拖累了Flutter的最終結果.

3.內存佔用

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

經過Xcode工具咱們能夠看到, RN(React Navigation)並無使用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原生)

Aireport(Flutter版)

Aireport(React Native版)