Flutter vs React Native vs Native：深度性能比較

老孟導讀：這是老孟翻譯的付費文章，文章全部權歸原做者全部。

歡迎加入老孟Flutter交流羣，每週翻譯2-3篇付費文章，精彩不容錯過。

原文地址：https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433

讓咱們比較流行的移動開發工具在平常生活中的FPS，CPU，內存和GPU性能。

研究背後的故事

inVerita及其移動開發團隊不斷研究市場上提供的跨平臺移動解決方案的性能，以回答哪一種技術最適合您的產品，是 Flutter 或 React Native（或 Native）甚至是職業（原文是：maybe even career），這就是 Flutter vs React Native vs Native 第一篇文章出現的緣由。是的，這很有爭議，由於有人能夠說咱們不是天天使用React Native進行屢次計算（多是這種狀況），可是在這種狀況下，Flutter或Native應用程序能夠更好地執行CPU繁重的任務。

所以，在本文中，咱們決定研究UI的性能，該性能對平常使用移動應用程序的用戶影響更大。

衡量UI性能很複雜，這要求工程師在每一個平臺上以相同的方式實現相同的功能。咱們將 GameBench 做爲測試工具，並確保咱們保持客觀性（這並無改變咱們在不少方面都很是喜歡Flutter的事實：），而且仍在運行許多React Native和Native項目）。 GameBench有不少改進空間，但咱們的目標是設法將每一個應用程序置於一個測試環境中。

源代碼是開放的，所以請嘗試並與咱們分享您的想法。 UI動畫一般在不一樣平臺上使用不一樣的工具，所以咱們將全部內容都縮小到每一個平臺支持的庫中（但只有一種狀況），或者至少咱們作了可以作到的一切。測試結果可能會有所不一樣，而且取決於您的實施方法，咱們相信您做爲特定技術的潛在真正專家能夠將您的特定工具集推到極限，使其超過咱們的數量，若是您這樣作，咱們將很是高興。如今，讓咱們看一下案例。

硬件信息：

爲了進行測試，咱們使用了價格合理的小米Redmi Note 5和iPhone 6s。

倉庫地址

https://github.com/InVeritaSoft/Mobile_frameworks_UI-benchmarks

用例1 —列表視圖基準

咱們使用Native，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

1. 全部測試均顯示出大體相同的FPS。
2. 與Flutter和React Native相比，Android Native使用的內存只有一半。
3. React Native須要最多的CPU開發。緣由是在JS和本機代碼之間使用JSBridge，這會致使序列化和反序列化方面的資源浪費。
4. 關於電池開發，Android Native具備最佳效果。 React-native落後於Android和Flutter。運行連續動畫會在React Native上消耗更多電池電量。

iPhone 6s test

1. FPS，React Native的結果比Flutter和Swift差。緣由是沒法在iOS上使用IoT編譯。
2. 內存。 Flutter與Native在內存消耗上幾乎同樣，但在CPU上仍然較重。在此測試中，React Native遠遠落後於Flutter和native。
3. Flutter和Swift之間的區別。當iOS Native積極使用GPU時，Flutter積極使用CPU。 Flutter中的協調會增長CPU的負載。

用例2 —繁重的動畫測試

現在，大多數在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致使FPS降低的緣由。

怪這一個：

3. Android須要最少的內存（205 Mb）； React Native須要280 Mb，Flutter須要266 Mb。
4. 冷啓動應用程序。根據此指標，Flutter處於領先地位（2秒）。對於Android Native和React Native，大約須要4秒鐘。

iOS

1. iOS和React Native在此測試中的結果幾乎與Lottie for React Native使用本地方法相同。
2. Flare和Flutter不會使人驚訝。Flare 還有很長的一段路要走。
3. iOS Native須要最少的內存量（48 Mb）。 React Native須要135 Mb，Flutter須要117 Mb。
4. 冷啓動應用程序。根據此指標，Flutter處於領先地位（2秒）。對於iOS和React Native，大約須要10秒鐘。

請注意：在這種狀況下，咱們爲Flutter使用了一個不一樣的庫，該庫比咱們在其餘平臺上使用的庫重得多，這多是fps降低的緣由。

用例3-更重的動畫會測試旋轉，縮放和淡入淡出。

在此測試中，咱們比較了動畫200張圖像時的性能。刻度旋轉和淡入淡出動畫同時執行。

Android

1. Native 顯示出最佳性能和最有效的內存消耗。
2. Flutter顯示出很是接近本機fps，而且內存開銷增長了兩倍，但性能仍然不錯。
3. React Native-在這種狀況下表現不佳。

iOS

1. iPhone 6s足夠強大，在全部3種狀況下都不會下降fps。
2. Native 使用的資源較少，而GPU則最多使用。
3. React Native主要使用CPU進行渲染，而Flutter使用GPU。
4. React Native使用了更多的內存。

總結

對於具備次要動畫和閃亮外觀的常規商務應用程序，技術根本不重要。可是，若是要製做一些繁重的動畫，請記住，Native具備最強大的性能。接下來是Flutter和React Native。咱們絕對不建議在CPU繁重的操做中使用React Native，而Flutter從CPU和內存的角度來看都很是適合此類任務。

您選擇的工具取決於您的特定產品和業務案例。若是您要開發單平臺MVP，請使用Native，但請記住，Flutter應用程序能夠爲移動，Web和桌面環境構建，所以Flutter可能會成爲跨平臺開發之王將來並不是高不可攀，直到今天，Flutter仍是對Native開發工具進行了很是不錯的競爭，尤爲是在您的開發預算不太緊張但您仍在尋找應用程序性能不錯的狀況下。

咱們面對這樣一個事實，便可能有許多因素會影響每種技術的實施和基準，而且大家當中許多人多是特定平臺的真正專家，他們可能會從更多受歡迎的工具中擠出更多的錢。咱們經過爲每一個要測試的應用程序建立一個單一的環境以及一套用於衡量性能的工具，試圖爲流程帶來儘量多的透明度，我但願您喜歡這樣的結果。再一次，咱們的移動團隊和Flutter團隊很高興收到並承擔您全部反饋和建議的重擔。

交流

老孟Flutter博客地址（330個控件用法）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：