Flutter vs React Native vs Native: Deep Performance Comparison by inVerita

Original link: medium.com/swlh/flutte…)

Research the back story

InVerita (inveritasoft.com/) has been working on the performance of mobile cross-platform solutions to answer the question of which scenarios to use Flutter, React Native or Native, and even which career to choose.

In previous Flutter vs Native vs React-Native: One of the controversial points in the Contrast from Examining Performance is that normally we don’t do these repetitive and complex calculations in React Native, although in this case, Using the Flutter or Native does have better performance results.

So this time we decided to look at UI performance comparisons because it has a bigger day-to-day impact on mobile application development.

Measuring UI performance on mobile platforms is complicated because it requires developers to implement the same functionality in the same way on each platform, and this article will use GameBench(www.gamebench.net/) as a testing tool to ensure objectivity.

GameBench itself has a lot of room for improvement, but our goal is to try to place every test application in a test environment.

The test code for this book is open source, so if you have any ideas, please share them with us. UI animations often require different tools for different platforms, so we’ll try to be at least as fair as possible by narrowing all of our testing down to the libraries supported by each platform.

Of course, different running methods may produce different test results, but we believe that true technical experts in the field can run the corresponding logical limits to exceed our results. The test environment of this paper:

  • Hardware info: Xiaomi Redmi Note 5 and iPhone 6s.
  • Source code: github.com/InVeritaSof…

Test case 1 – List view benchmarking

Here we implement the same UI list with Flutter on Android and iOS using Native, React Native, and Flutter:

  • On the AndroidRecyclerView.SmoothScrollerTo automate rolling speed;
  • IOS and React Native use a timer method that scrolls to positions in code;
  • Used on the FlutterScrollControllerThe list of smooth scrolling;

In each case, there are 1000 items in the following table view, scrolling to the last list element at the same time, and images are cached on each platform using the corresponding library. More details can be found in the source code, where the images use a third-party library:

  • IOS:Nuke
  • Android:Glide
  • The React Native:React-native-fast-image

Android-gpu test results do not support benchmark

The Android testing

Test results:

    1. All tests showed roughly the same FPS.
    1. The Android Native uses only half as much memory as the Flutter and React Native.
    1. React Native requires heavy CPU utilization because of the code used between current JS and NativeJSBridge, which wastes resources in serialization and deserialization.
    1. As for the battery utilization method, Android Native uses the most energy. React Native lags behind Android and Flutter. The special reason is that React Native consumes more battery power when running continuous animation.

The iOS test

Test results:

1. React Native results are worse on FPS than Flutter and Swift because IoT compilation is not available on iOS. 2. The memory consumption of Flutter is almost the same as that of Flutter Native, but the CPU consumption of Flutter is much heavier. In this test result, React Native is far behind Flutter and Native. 3. Test results show that Flutter uses more CPU, while iOS native uses more GPU.

Test case 2 – Heavy animations test

Most Android and iOS have powerful hardware these days, so in most cases you won’t see a noticeable drop in FPS, which is why we decided to add complex animation tests that are complex enough to cause FPS drops.

This test force uses Lottie for displaying complex vector animations on Android, iOS, and React Native, and uses Flare to implement the same animations on Flutter.

Shown below is an implementation of Lottie on Android, iOS, and React Native, but Flare on Flutter.

Android

    1. Android and React Native have similar performance. This is obviously because Lottie for React Native only needs the Native drawing logic used in this scenario (16 — 19% CPU, 30 — 29 FPS).
    1. The results of Flutter were somewhat surprising because it worked a little badly. (12% CPU and 9 FPS).

Removing a particular animation from the grid animation actually increases the FPS on the Flutter by up to 40%, so it may be that the Flare is not optimized for the class task, or the Flutter itself has compatibility issues with this drawing:

    1. Android native requires the least memory (205 Mb); React Native requires 280 Mb and The Flutter requires 266 Mb.
    1. The Flutter takes the lead (2 seconds) after the app cold starts, which takes about 4 seconds for Android Native and React Native.

iOS

    1. Not surprisingly, iOS and React Native showed almost the same results in this test;
    1. Flares and Flutter still don’t do well;
    1. The memory required for iOS Native is 48 Mb, React Native requires 135 Mb, and Flutter requires 117 Mb.
    1. Flutter takes the lead (2 seconds) after the app cold starts, taking about 10 seconds for iOS Native and React Native;

Please note: in this case we used a different library for Flutter which is much heavier than the libraries we use on other platforms and this may be the reason for the FPS drop. (Because Lottie’s current open source effect on Flutter is worse)

Use Case 3 – Even animations test with rotations, scaling and fade.

In this test, we animated 200 images (rotating and fading in and out) to compare the performance of different platforms.

Android

    1. The native platform shows the best performance and most efficient memory management.
    1. The Flutter shows a FPS that is very close to the element, but the memory overhead is twice as high.
    1. React Native doesn’t do well in this situation.

iOS

    1. The iPhone 6S is surprisingly powerful enough to not degrade the FPS in all three cases.
    1. Native uses fewer resources, while gpus use the most.
    1. React Native primarily uses a CPU for rendering, while Flutter uses a GPU.
    1. React Native uses more memory.

conclusion

Neither technology is too big a barrier to the animations and cool UIs that are required for everyday applications, but Native gets the best performance if some heavy animations are required. The Flutter and React Native come next.

It is also not recommended to use React Native for cpu-heavy operations. The Flutter may be suitable for such tasks from a CPU and memory perspective.

Of course, the framework tool chosen for Flutter depends on your business scenario. If you need to develop a single-platform MVP(minimum viable product), it is best to use Native development. The advantage of Flutter is that it can build the same UI logic for mobile, Web, PC, etc., especially if the initial development budget is tight. Then you have to have good performance, depending on your technology stack.

In addition, starting from version 1.17, Android may use Vulkan for underlying drawing, while iOS may use Metal. This mainly depends on the hardware and system version. For example, the performance of Flutter drawing on iOS that supports Metal can be improved by 50%.