流言終結者- Flutter和RN誰才是更好的跨端開發方案？
來自專欄我是程序員
12 人贊了文章
背景
論壇上很多小夥伴關心為什麼閑魚選擇了Flutter而不選擇其他跨端方案？站在質量的角度，高性能是一個很重的因素，我們使用Flutter重寫了寶貝詳情頁之後，對比了Flutter和Native詳情頁的性能表現，結論是中高端機型上Flutter和Native不相上下，在低端機型上，Flutter會比Native更加的流暢，其實閑魚團隊在使用Flutter做詳情頁過程中，沒有更多地關注性能優化，為了更快地上線，也是優先功能的實現，不過測試結果出來之後，卻出乎意料地優於原先的Native的實現(具體的測試結果，屬於敏感數據，要走披露流程，傷不起…)
但是這樣很顯然不能敷衍過去，仔細想了想，確實Flutter的定位並不是要替代Native，他只想做一個極致的跨端解決方案，所以還是要回到跨端解決方案的賽道，給您從性能角度比一比，誰才是更好的跨端開發方案？
參賽選手
[Flutter]
Flutter is Google』s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
[REACT NATIVE]
Were working on a large-scale rearchitecture of React Native to make it more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps.
鳴鑼開賽
怎麼比
怎麼比較確實傷腦筋，自己也寫了一個Flutter 和 一個RN的App，但是實在太醜陋，擔心大家關注點都到我的爛代碼上了，所以在Github上找到了一個跨端開發高手Car Guo，用Flutter和RN分別實現的一個實際可用的App，Car Guo謙虛表示其實也寫的比較粗糙，但是在我看來這個是具備真實使用場景的App（Github客戶端App，提供豐富的功能，旨在更好的日常管理和維護個人Github），還是有代表性的
[Flutter] https://github.com/CarGuo/GSYGithubAppFlutter
[REACT NATIVE] https://github.com/CarGuo/GSYGithubApp
場景
1、默認登錄成功
2、「動態」頁，點擊搜索按鈕，搜索關鍵字「Java」，正常速度瀏覽3頁，等第4頁載入完成後回退
3、點擊「趨勢」頁Tab，瀏覽Feeds到頁面底部，點擊最底部的Item，進入Item後，瀏覽詳情+瀏覽3頁的動態後回退，到「我的」Tab頁
4、查看「我的」Feeds到底部，點擊右上角搜索按鈕，搜索關鍵字「C」，瀏覽3頁後，等第4頁載入完成後場景結束
測試工具
? iOS
? 掌中測(iOS端)：CPU，內存
? Instruments：FPS
? Android
? 基於Adb的Shell腳本：CPU，內存，FPS
測試機型
? iOS：iPhone 5c 9.0.1 / iPhone 6s 10.3.2
? Android：Xiaomi 2s 5.0.2 / Sumsung S8 7.0
數據分析
iOS
iPhone 5c 9.0.1
1、Flutter在低端和中端的iOS機型上，FPS的表現都優於RN
2、CPU的使用上Flutter在低端機上表現略差於RN，中端機型略優於RN
3、值得注意的是內存上的表現(上圖紅色箭頭區域)，Flutter在低端機型上的起始內存和RN幾乎一致，在中端機型上會多30M左右的內存(分析為Dart VM的內存)，可以想到這應該是Flutter針對低端和中端機型上內存策略是不一樣的，可用內存少的機型，Dart VM的初始內存少，運行時進行分配(這樣也可以理解為什麼在低端機上帶來了更多的CPU損耗)，中端機器上預分配了更多的VM內存，這樣在處理時會更加的遊刃有餘，減少CPU的介入，帶來更流暢的體驗.
可以看出，Flutter團隊在針對不同機型上處理更加的細膩，目的就是為了帶來穩定流暢的體驗。
Android
Xiaomi 2s 5.0.2
測試結論
1、Flutter在高低端機的CPU上的表現都優於RN，尤其在低端的小米2s上有著更優的表現
2、Android端在原來FPS基礎上增加了流暢度的指標，FPS和流暢度的表現Flutter優於RN(計算規則見附參考文章)
3、Android端的內存也是值得關注的一點，在小米2s上起始內存Flutter明顯比RN多40M，RN在測試過程中內存飛漲，Flutter相比之下會更穩定，內存上RN側的代碼是需要調優的，同一套代碼Flutter在Android和iOS上並沒有很大的差異，但是RN的卻要在單端調優，Flutter在這項比拼上又更勝一籌。
比較奇怪的是三星S8上Flutter和RN的初始內存是一致的，猜測是RN也Android高端機型上也會預分配一些內存，具體細節還需要更進一步的研究。
升旗儀式
看了之前的數據，做為裁判的我會把金牌頒給Flutter，在測試過程中的體驗和數據上來看Flutter都優於RN，並且開發這個App的是一位Android的開發同學，Flutter和RN對於他來說都是全新的技術棧，Car Guo同學更傾向性地讓大家得到一致性的使用體驗，性能方面並沒有投入太多的時間進行調優，由此看出Flutter在跨端開發上在同樣投入的情況下，可以獲得更佳的性能，更好的用戶體驗。
一些思考
拿到了這些數據，也感受到Flutter帶來福利，那Flutter為什麼可以做到這麼流暢呢？Flutter是如何優化了渲染，Dart VM的Runtime是怎麼玩的？請大家繼續關注後續解密文章，感興趣的同學歡迎加入閑魚，成為跨端解決方案的領軍者。
參考
? Android FPS&流暢度: https://testerhome.com/topics/4775
? Android 內存獲取方式:
dumpsys meminfo packageName
? Android CPU 通過busybox 執行 top命令獲取
? iOS CPU獲取方式：累計每個線程中的CPU利用率
如果對文本的內容有疑問或指正，歡迎告知我們。
閑魚技術團隊是一隻短小精悍的工程技術團隊。我們不僅關注於業務問題的有效解決，同時我們在推動打破技術棧分工限制（android/iOS/Html5/Server 編程模型和語言的統一）、計算機視覺技術在移動終端上的前沿實踐工作。作為閑魚技術團隊的軟體工程師，您有機會去展示您所有的才能和勇氣，在整個產品的演進和用戶問題解決中證明技術發展是改變生活方式的動力。
本文作者：閑魚技術
原文鏈接
更多技術乾貨敬請關注云棲社區知乎機構號：阿里云云棲社區 - 知乎
本文為雲棲社區原創內容，未經允許不得轉載。
推薦閱讀：
※長期腰背酸痛？系統性解決方案來了
※股權方案/諮詢 如何設計股權激勵方案？
※Eclipse 亂碼 解決方案總結（UTF8 -- GBK） (轉)