【譯】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 測試

檢測結果:

一、在 FPS 上 React Native 的結果比 Flutter 和 Swift 差，緣由是沒法在 iOS 上使用 IoT 編譯。 二、在內存上 Flutter 與原生的內存消耗幾乎相同，但在 Flutter 在 CPU 上消耗更重，在此測試中結果中 React Native 遠遠落後於 Flutter 和原生。 三、在測試結果中 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% 。