背景

論壇上很多小伙伴關(guān)心為什么閑魚選擇了Flutter而不選擇其他跨端方案？站在質(zhì)量的角度，高性能是一個很重的因素，我們使用Flutter重寫了寶貝詳情頁之后，對比了Flutter和Native詳情頁的性能表現(xiàn)，結(jié)論是中高端機型上Flutter和Native不相上下，在低端機型上，Flutter會比Native更加的流暢，其實閑魚團(tuán)隊在使用Flutter做詳情頁過程中，沒有更多地關(guān)注性能優(yōu)化，為了更快地上線，也是優(yōu)先功能的實現(xiàn)，不過測試結(jié)果出來之后，卻出乎意料地優(yōu)于原先的Native的實現(xiàn)(具體的測試結(jié)果，屬于敏感數(shù)據(jù)，要走披露流程，傷不起…)

但是這樣很顯然不能敷衍過去，仔細(xì)想了想，確實Flutter的定位并不是要替代Native，他只想做一個極致的跨端解決方案，所以還是要回到跨端解決方案的賽道，給您從性能角度比一比，誰才是更好的跨端開發(fā)方案？

參賽選手

[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]

We're 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，但是實在太丑陋，擔(dān)心大家關(guān)注點都到我的爛代碼上了，所以在Github上找到了一個跨端開發(fā)高手Car Guo，用Flutter和RN分別實現(xiàn)的一個實際可用的App，Car Guo謙虛表示其實也寫的比較粗糙，但是在我看來這個是具備真實使用場景的App（Github客戶端App，提供豐富的功能，旨在更好的日常管理和維護(hù)個人Github），還是有代表性的
[Flutter]?https://github.com/CarGuo/GSYGithubAppFlutter
[REACT NATIVE]?https://github.com/CarGuo/GSYGithubApp

場景

1、默認(rèn)登錄成功
2、“動態(tài)”頁，點擊搜索按鈕，搜索關(guān)鍵字“Java”，正常速度瀏覽3頁，等第4頁加載完成后回退
3、點擊“趨勢”頁Tab，瀏覽Feeds到頁面底部，點擊最底部的Item，進(jìn)入Item后，瀏覽詳情+瀏覽3頁的動態(tài)后回退，到“我的”Tab頁
4、查看“我的”Feeds到底部，點擊右上角搜索按鈕，搜索關(guān)鍵字“C”，瀏覽3頁后，等第4頁加載完成后場景結(jié)束

測試工具

• iOS
• 掌中測(iOS端)：CPU，內(nèi)存
• Instruments：FPS
• Android
• 基于Adb的Shell腳本：CPU，內(nèi)存，FPS

測試機型

• iOS：iPhone 5c 9.0.1 / iPhone 6s 10.3.2
• Android：Xiaomi 2s 5.0.2 / Sumsung S8 7.0

數(shù)據(jù)分析

iOS

iPhone 5c 9.0.1

iPhone 6s 10.3.2

測試結(jié)論

1、Flutter在低端和中端的iOS機型上，FPS的表現(xiàn)都優(yōu)于RN
2、CPU的使用上Flutter在低端機上表現(xiàn)略差于RN，中端機型略優(yōu)于RN
3、值得注意的是內(nèi)存上的表現(xiàn)(上圖紅色箭頭區(qū)域)，Flutter在低端機型上的起始內(nèi)存和RN幾乎一致，在中端機型上會多30M左右的內(nèi)存(分析為Dart VM的內(nèi)存)，可以想到這應(yīng)該是Flutter針對低端和中端機型上內(nèi)存策略是不一樣的，可用內(nèi)存少的機型，Dart VM的初始內(nèi)存少，運行時進(jìn)行分配(這樣也可以理解為什么在低端機上帶來了更多的CPU損耗)，中端機器上預(yù)分配了更多的VM內(nèi)存，這樣在處理時會更加的游刃有余，減少CPU的介入，帶來更流暢的體驗.
可以看出，Flutter團(tuán)隊在針對不同機型上處理更加的細(xì)膩，目的就是為了帶來穩(wěn)定流暢的體驗。

Android

Xiaomi 2s 5.0.2

Sumsung S8 7.0

• 注: MFS - Max Frame Space: 指的是去掉buffer之后的兩幀的時間差

測試結(jié)論

1、Flutter在高低端機的CPU上的表現(xiàn)都優(yōu)于RN，尤其在低端的小米2s上有著更優(yōu)的表現(xiàn)
2、Android端在原來FPS基礎(chǔ)上增加了流暢度的指標(biāo)，FPS和流暢度的表現(xiàn)Flutter優(yōu)于RN(計算規(guī)則見附參考文章)
3、Android端的內(nèi)存也是值得關(guān)注的一點，在小米2s上起始內(nèi)存Flutter明顯比RN多40M，RN在測試過程中內(nèi)存飛漲，Flutter相比之下會更穩(wěn)定，內(nèi)存上RN側(cè)的代碼是需要調(diào)優(yōu)的，同一套代碼Flutter在Android和iOS上并沒有很大的差異，但是RN的卻要在單端調(diào)優(yōu)，Flutter在這項比拼上又更勝一籌。
比較奇怪的是三星S8上Flutter和RN的初始內(nèi)存是一致的，猜測是RN也Android高端機型上也會預(yù)分配一些內(nèi)存，具體細(xì)節(jié)還需要更進(jìn)一步的研究。

升旗儀式

看了之前的數(shù)據(jù)，做為裁判的我會把金牌頒給Flutter，在測試過程中的體驗和數(shù)據(jù)上來看Flutter都優(yōu)于RN，并且開發(fā)這個App的是一位Android的開發(fā)同學(xué)，Flutter和RN對于他來說都是全新的技術(shù)棧，Car Guo同學(xué)更傾向性地讓大家得到一致性的使用體驗，性能方面并沒有投入太多的時間進(jìn)行調(diào)優(yōu)，由此看出Flutter在跨端開發(fā)上在同樣投入的情況下，可以獲得更佳的性能，更好的用戶體驗。

一些思考

拿到了這些數(shù)據(jù)，也感受到Flutter帶來福利，那Flutter為什么可以做到這么流暢呢？Flutter是如何優(yōu)化了渲染，Dart VM的Runtime是怎么玩的？請大家繼續(xù)關(guān)注后續(xù)解密文章，感興趣的同學(xué)歡迎加入閑魚，成為跨端解決方案的領(lǐng)軍者。

參考

• Android FPS&流暢度:?https://testerhome.com/topics/4775
• Android 內(nèi)存獲取方式:
  dumpsys meminfo packageName
• Android CPU 通過busybox 執(zhí)行 top命令獲取
• iOS CPU獲取方式：累計每個線程中的CPU利用率

for (j = 0; j < thread_count; j++) { ATCPUDO *cpuDO = [[ATCPUDO alloc] init]; char name[256]; pthread_t pt = pthread_from_mach_thread_np(thread_list[j]); if (pt) { name[0] = '\0'; __unused int rc = pthread_getname_np(pt, name, sizeof name); cpuDO.threadid = thread_list[j]; cpuDO.identify = [NSString stringWithFormat:@"%s",name]; } thread_info_count = THREAD_INFO_MAX; kr = thread_info(thread_list[j], THREAD_BASIC_INFO,(thread_info_t)thinfo, &thread_info_count); if (kr != KERN_SUCCESS) { return nil; } basic_info_th = (thread_basic_info_t)thinfo; if (!(basic_info_th->flags & TH_FLAGS_IDLE)) { tot_sec = tot_sec + basic_info_th->user_time.seconds + basic_info_th->system_time.seconds; tot_usec = tot_usec + basic_info_th->system_time.microseconds + basic_info_th->system_time.microseconds; tot_cpu = tot_cpu + basic_info_th->cpu_usage / (float)TH_USAGE_SCALE * 100.0; cpuDO.usage = basic_info_th->cpu_usage / (float)TH_USAGE_SCALE * 100.0; if (container) { [container addObject:cpuDO]; } } } // for each thread

• iOS 內(nèi)存獲取方式：測試過程中使用的是phys_footprint，是最準(zhǔn)確的物理內(nèi)存，很多開源軟件用的是resident_size(這個值代表的是常駐內(nèi)存，并不能很好地表現(xiàn)出真實內(nèi)存變化，這可以另開文章細(xì)談)

if ([[UIDevice currentDevice].systemVersion intValue] < 10) { kern_return_t kr; mach_msg_type_number_t info_count; task_vm_info_data_t vm_info; info_count = TASK_VM_INFO_COUNT; kr = task_info(mach_task_self(), TASK_VM_INFO_PURGEABLE, (task_info_t)&vm_info,&info_count); if (kr == KERN_SUCCESS) { return (vm_size_t)(vm_info.internal + vm_info.compressed - vm_info.purgeable_volatile_pmap); } return 0; }task_vm_info_data_t vmInfo; mach_msg_type_number_t count = TASK_VM_INFO_COUNT; kern_return_t result = task_info(mach_task_self(), TASK_VM_INFO, (task_info_t) &vmInfo, &count); if (result != KERN_SUCCESS) return 0; return (vm_size_t)vmInfo.phys_footprint;

原文鏈接
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的流言终结者- Flutter和RN谁才是更好的跨端开发方案？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。