之前分別用iOS原生和Flutter寫了一個空氣質(zhì)量App并對它們對性能汉矿、容量等做了對比評測. 很多小伙伴在下方留言說這樣的對比沒有意義, 認(rèn)為Flutter根本不是用來替代原生也不可能超越原生開發(fā). 我這里先做一個解釋:
我在對比評測中提供了盡可能多的數(shù)據(jù), 并不是想證明Flutter和原生比有多爛, 而是想告訴你如果選擇了Flutter你的App包會增長多少倍女阀、對App啟動速度的影響會有多少秒, 好讓大家將來在定技術(shù)棧的時候能夠盡量心中有數(shù).
當(dāng)然也有網(wǎng)友提出和應(yīng)該React Native來做對比, 畢竟這兩個都是主攻跨平臺開發(fā). 其實我早就想做一個類似的對比評測, 前段時間公司出現(xiàn)變動, 周末難得抽空做了一個React Native版的Demo, 最終得出了今天這份評測報告.
RN版還在審核中, 大家可以自行下載體驗一下.
1.安裝包大小
Flutter應(yīng)用安裝包和安裝后容量
React Native應(yīng)用安裝包和安裝后容量
這個差距, emmmmmm, 這里給出iOS原生版應(yīng)用的大小大約在2.5MB, 也就是說RN已經(jīng)做到了比原生還要小的安裝包. 這主要歸功于兩點:
- 基于iOS自帶的UI框架而非Flutter這樣的自有框架(Flutter SDK有30MB左右)
- 使用了OC而非Swift作為開發(fā)語言(本次預(yù)測大失敗, Swift5并沒有隨著WWDC放出, 也就沒能集成到iOS12中....)
- iOS原生版其實實現(xiàn)了比其他版本更多的功能, 比如Weiget找爱、通知
React Native較小的安裝包帶來的優(yōu)勢不僅是降低了下載門檻、減少了磁盤占用, 而且對于混合開發(fā)的壓力也更小. 試想一個原生App因為幾個頁面使用了Flutter, 一行代碼沒寫安裝包就憑空增加了30MB, 這樣的結(jié)果不是開發(fā)人員希望看到的.
2.啟動速度
啟動速度RN依然與原生不相上下, 并且要比Flutter好上一個等級. RN雖然使用js來構(gòu)建應(yīng)用程序, 但最終RN會將js轉(zhuǎn)化成原生代碼. 這就讓RN的運行效率高出Flutter好幾倍.
3.內(nèi)存占用
內(nèi)存占用方面, RN顯然沒有原生做的好, 與Flutter的差距也不大, 而且經(jīng)測試發(fā)現(xiàn), RN的內(nèi)存占用不是很穩(wěn)定, 頁面剛生成的時候內(nèi)存占用會高一點, 之后緩慢回落.
通過Xcode工具我們可以看到, RN(React-Native-Navigate)并沒有使用iOS系統(tǒng)的導(dǎo)航系統(tǒng), 而是以一種相對粗暴的形式直接覆蓋在了上一個View上. 相反iOS原生系統(tǒng)的頁面切換會在新頁面顯示完畢后將前一個頁面去掉(不做渲染), 這樣可以有效節(jié)省內(nèi)存的消耗. 此外, RN的控件也沒有使用UIKit中的現(xiàn)有組件, 而是通過最基本的UIView去組合模仿(比如NavigationBar). 這樣做雖然可以減少安卓和iOS之間UI層的差異, 但顯然優(yōu)化的空間就變小了.
4.流暢度
React Native幀率
Flutter幀率
iOS原生幀率
我們可以看到, RN得益于UIKit的加持, 整體流暢度和原生非常接近, 比聲稱60幀的Flutter要好. 尤其是搜索頁滾動的幀率. 但是在頁面切換(紅色區(qū)域)時漏出了馬腳, 原因就在于上面提到的, RN并沒有使用系統(tǒng)自帶的導(dǎo)航系統(tǒng), 而是自己做了一個類似的平移動畫. 很可惜, 這個動畫并沒有跑滿60幀, 但也要比Flutter好一點.
觀察動畫的時間和曲線可以發(fā)現(xiàn), 原生的跳轉(zhuǎn)動畫時間更長, 但他的加速效果也是最好的, 其他兩個平臺的跳轉(zhuǎn)動畫就略顯生硬.
最后可以分別觀察一下CPU的占用, RN的表現(xiàn)可以說是非常好了, 尤其是在TableView滾動的時候, 其原因也很簡單, 它沒有使用reuse pool, 因此不需要頻繁修改已存在的Cell, 壞處是隨著Cell的增多, 內(nèi)存壓力也會越來越大.
5.iOS特性支持
由于最后還是用原生語言去實現(xiàn), RN先天可以得到iOS的部分特性. 而且相比于Flutter, 線上熱更新才是它真正的殺手锏. Flutter雖然理論上可以實現(xiàn), 但部署起來還有很多的問題需要解決, 一切還是未知數(shù). 此外, RN和Flutter都支持混編, 這就幾乎解決了實現(xiàn)上的所有問題. 唯一的問題是, 有多少功能和特性需要用原生去實現(xiàn), 這樣的維護(hù)成本又有多高.
最后的最后還是要說一下, Flutter目前還在測試版, 不建議在生產(chǎn)環(huán)境使用, 因此以上做出的對比并不能代表Flutter最終的真實水平. 但可以預(yù)見, 在短期內(nèi)Flutter還是無法撬動RN在跨平臺開發(fā)中的地位, RN仍舊是目前跨平臺開發(fā)的最優(yōu)解. 但不可否認(rèn)Flutter確實實現(xiàn)了Write Once,Run Anywhere, 只不過至少在Fuchsia出來之前, 我們都無法完整評估它的真實價值.
最后給出GitHub地址:
