【譯】Flutter vs React Native vs Native：深度效能比較

本文翻譯自 inVerita 的《Flutter vs React Native vs Native: Deep Performance Comparison》

原文連結： medium.com/swlh/flutte…)

研究背後的故事

inVerita(inveritasoft.com/)一直致力於移動跨平臺方案的效能問題，以此來解答哪種場景下開發者需要使用 Flutter 、 React Native 或原生開發，甚至是你需要選擇哪個職業。

在之前的 《Flutter vs Native vs React-Native: Examining performance》 對比中有一個頗有爭議的點，其中有人提出正常情況下我們是不會在 React Native 進行這些重複和複雜的計算，雖然在這種情況下，使用 Flutter 或 Native 確實會有更好的表現結果。

所以這一次我們決定研究 UI 的效能對比，因為它對移動應用開發的日常影響更大一些。

在移動平臺想要衡量 UI 效能很複雜，因為這需要開發者在每個平臺上，都以相同的方式去實現一樣的功能，而本文將使用 GameBench(www.gamebench.net/) 作為測試工具以確保測試的客觀性。

GameBench 本身還有很多改進的空間，但我們的目標是設法將每個測試程式都放置在一個測試環境中。

本書的測試程式碼是開源的，所以如果你有什麼想法也歡迎和我們分享。UI 動畫通常在不同平臺上需要使用不同的工具，因此我們會將所有的測試內容都縮小到每個平臺支援的庫中，這樣至少能儘量做到公平一些。

當然不同的執行方法可能會出現不一樣的測試結果，我們相信在某個領域真正的技術專家可以讓對應邏輯極限執行以超過我們的結果。本文的測試環境：

• 硬體資訊：小米Redmi Note 5和iPhone 6s。
• 原始碼：github.com/InVeritaSof…

測試用例1 — List view benchmarking

這裡我們使用原生、React Native 和 Flutter 在 Android 與 iOS 上實現了相同的 UI 列表，並且:

• Android 上的 RecyclerView.SmoothScroller 來自動化滾動速度;
• iOS 和 React Native 上使用了帶有計時器的方法，並以程式碼的方式滾動到位置；
• 在 Flutter 上使用 ScrollController 實現列表的平滑滾動；

在每種情況下列表檢視中都有 1000 個專案，並且以相同時間滾動到最後一個列表元素，同時在每個平臺都使用對應的庫進行影像快取，更多細節可以在原始碼中檢視，其中圖片使用的第三方庫：

• iOS： Nuke
• Android： Glide
• React Native：React-native-fast-image

Android — GPU 測試結果不支援 benchmark

Android 測試

檢測結果：

• 1. 所有測試均顯示出大致相同的FPS。
• 2. 與 Flutter 和 React Native 相比，Android 原生使用的記憶體只有一半。
• 3. React Native 需要較重的 CPU 利用，原因是在於目前的 JS 和原生之間的程式碼需要使用 JSBridge，這會在序列化和反序列化方面浪費資源。
• 4. 關於電池利用方法，Android 原生最省電，React Native 落後於 Android 和 Flutter，特備是執行連續動畫上 React Native 會消耗更多電池電量。

iOS 測試

檢測結果:

1、在 FPS 上 React Native 的結果比 Flutter 和 Swift 差，原因是無法在 iOS 上使用 IoT 編譯。 2、在記憶體上 Flutter 與原生的記憶體消耗幾乎相同，但在 Flutter 在 CPU 上消耗更重，在此測試中結果中 React Native 遠遠落後於 Flutter 和原生。 3、在測試結果中 Flutter 會利用更多CPU，而 iOS 原生會更多利用 GPU；

測試用例2 — Heavy animations test

如今大多數 Android 和 iOS 都具有強大的硬體，所以在大多數情況下是不會發現 fps 有明顯的下降，這就是為什麼我們決定增加複雜的動畫測試的原因，並且要足夠複雜以實現導致 fps 下降。

該測試用力在 Android，iOS，React Native 上使用了 Lottie 進行復雜向量動畫的展示，並在 Flutter 上使用了 Flare 實現相同的動畫。

如下圖所示，是在 Android 、iOS 和 React Native 上使用 Lottie ，而在 Flutter 上使用的Flare 的實現效果。

Android

• 1. Android 和 React Native 在效能表現上差不多。很明顯這是因為該場景下 Lottie for React Native 只需要使用的原生的繪製邏輯（16–19％CPU，30–29 FPS）。
• 2. Flutter的結果讓人有些驚訝，因為它的效果有點糟。（12％的CPU和9 FPS）。

而從上述網格動畫中刪除一個特定的動畫後，居然會使 Flutter 上的 FPS 最高提高 40％，所以這裡猜測可能是 Flare 對於類似乎任務沒有進行優化，或者 Flutter 本身對這種繪製存在相容問題的原因：

• 3. Android 原生需要的記憶體最少（205 Mb）；React Native 需要 280 Mb，Flutter 需要266 Mb。
• 4. 應用程式冷啟動後，Flutter處於領先地位（2秒），對於 Android 原生和 React Native 大約需要4秒鐘。

iOS

• 1. 不出意料 iOS 和 React Native 在此測試中的結果幾乎一致；
• 2. Flare 和 Flutter 依舊沒有好的表現；
• 3. iOS 原生需要的記憶體量 48 Mb ，React Native 需要 135 Mb，Flutter需要 117 Mb；
• 4. 應用程式冷啟動後，Flutter處於領先地位（2秒），對於 iOS 原生和 React Native 大約需要 10秒鐘；

請注意：在這種情況下我們為 Flutter 使用了一個不同的庫，該庫比我們在其他平臺上使用的庫重得多，這可能是fps下降的原因。（因為 Lottie 在 Flutter 上目前的開源效果更差）

用例3 - Even heavier animations test with rotations, scaling and fade.

在此測試中，我們對 200 張影像進行動畫執行（旋轉和淡入淡出），從而對比不同平臺的效能。

Android

• 1. 原生平臺顯示出最佳效能和最有效的記憶體管理。
• 2. Flutter 顯示出非常接近元素的 fps，但是記憶體開銷增加了兩倍。
• 3. React Native 在這種情況下表現不佳。

iOS

• 1. iPhone 6s 居然足夠強大，在3種情況下都不會降低fps。
• 2. 原生使用的資源較少，而 GPU 則最多使用。
• 3. React Native主要使用CPU進行渲染，而 Flutter 使用GPU。
• 4. React Native 使用了更多的記憶體。

總結

對於日常應用上需要使用的動畫和炫酷UI，無論哪種技術都不會有太大障礙，但是如果要一些繁重的動畫的情況下，原生才能獲得最好的效能，接下來才是 Flutter 和 React Native。

另外這裡不建議在需要 CPU 繁重的操作中使用 React Native，而 Flutter 從 CPU 和記憶體的角度來可能會比較適合此類任務。

當然選擇什麼框架工具取決於不同的業務場景，如果是需要開發單平臺MVP(最小可行性產品)，那最好使用原生Native開發，而 Flutter 的優勢還是在於可以為移動、Web、PC等構建相同的 UI 邏輯，尤其是在初期開發預算畢竟緊張，然後還需要效能不錯的情況下，當然這還和你的本身的技術棧有關係。

另外在 1.17 版本開始，底層繪製上 Android 可能會用到 Vulkan，而 iOS 可能會是 Metal，這主要和硬體還有系統版本有關係，比如在支援 Metal 的 iOS 上 Flutter 的效能繪製可以提高 50% 。