Author| InVerita
Translator| Sambodhi
Planning| 蔡芳芳
Flutter is Google’s open source mobile user interface framework, which can quickly build high-quality native user interfaces on iOS and Android. It is being used globally More and more developers and organizations use it. And React Native (RN for short) is Facebook's open source cross-platform mobile application development framework. It is a derivative of Facebook's earlier open source JS framework React in the native mobile application platform, supporting both iOS and Android platforms. As for Native, it is the traditional native App development model. So the question is, how should we select the three types of development technologies? This article will conduct an in-depth comparison of the performance of these three development solutions, including their performance in FPS, CPU, memory, and GPU in multiple application scenarios. I hope to help readers.
This article was originally published on the Medium blog, authorized by the original author inVerta, translated and shared by InfoQ Chinese.
Research background
inVerita and its mobile development team continue to study the performance of cross-platform mobile solutions available on the market in order to answer the question: for your product and even your career , Flutter, React Native (or Native), which technology is the best? This is the origin of the article "Flutter vs React Native vs Native: Performance Survey". Yes, this article has caused some controversy, because some people think that we are not using React Native to perform many calculations every day, but if this is the case, it would be even better for tasks with higher CPU usage to be completed by Flutter or Native apps. it is good.
That is why in this article, we decided to study the performance of the user interface, because it has a greater impact on ordinary users of mobile applications.
Measuring user interface performance is very complicated. It requires engineers to implement the same functions in the same way on each platform. We chose GameBench as a global testing tool to ensure that we can remain objective (this does not change the fact that we love Flutter in many ways, and we also run a large number of React Native and Native projects). Although GameBench still has a lot of room for improvement, with its help, we successfully put each application into a separate test environment, which is also our goal.
The source code is open source, so if you want, you can experiment by yourself and share your thoughts with us. User interface animations usually use different tools on different platforms, so we limit the scope to libraries supported by each platform (except in one case), or at least we have done our best to achieve this. Now, let's take a look at these use cases.
Hardware information: To complete this test, we used affordable phones: Redmi Note5 and iPhone 6S.
GitHub link :
https://github.com/InVeritaSoft/Mobile_frameworks_UI-benchmarks
Use case 1: List view benchmarking
We use Native, React Native and Flutter The same user interface is implemented on Android and iOS. We also use RecyclerView to automate the scrolling speed. On Android we use SmoothScroller; On iOS and React Native, we use a timer and programmatically scroll to position; on Flutter, we use ScrollController to scroll the list smoothly. In each case, we have 1000 items in the list view and all use the same scrolling time to reach the last list element. In each case, we use image caches of different libraries on each platform. More details can be found in the source code.
Third-party library used in this case:
iOS
Loading and caching images: Nuke
Android
Loading and caching images: Glide1a7d#
React Native
Load and cache images: React-native-fast-image
Test results:
Android
GPU test results are not supported by benchmarks (Unfortunately, we still have many such devices).
All tests show that FPS is about the same.
Compared with Flutter and React Native, Android Native uses only half of the memory.
React Native requires maximum CPU utilization. The reason is that JSBridge is used between JS and Native code, which leads to a waste of resources in serialization and deserialization.
In terms of battery development, Android Native has achieved the best results. React Native lags behind Android and Flutter. Running continuous animations on React Native will consume more battery power.
iOS
FPS: The result of React Native is worse than Flutter and Swift. The reason is that IoT compilation cannot be used on iOS.
Memory: Flutter's memory consumption is based on the equivalent of the native method, but the CPU usage is still high. In this test, React Native lags far behind Flutter and Native.
The difference between Flutter and Swift: When iOS Native is using GPU, Flutter is using CPU. Coordination in Flutter increases the load on the CPU.
Use case 2: Re-animation test
Nowadays, most Android and iOS phones have powerful hardware configurations. In most cases, using ordinary applications, the drop in FPS will not be noticeable. This is why we decided to perform some tests with heavy animation. These animations are heavy enough to make FPS drop to a noticeable point. We use vector animations made by Lottie on Android, iOS, and React Native, and use the same animation on Flare on Flutter.
Use Android, iOS and React Native versions of Lottie and Flutter to test animations.
Lottie
Android on LottieTest result
iOS Test result
Android
Android and React Native behave similarly in performance. This is obvious because the React Native version of Lottie uses the native method (CPU The occupancy rate is 16~19%, FPS is 30~29).
Flutter's results are surprising, although it was a bit messed up in the performance demo (12% CPU usage and 9 FPS).
We found that deleting a specific animation from the grid can increase the FPS on Flutter by up to 40%. We think Flare is heavier and is not optimized for this type of task, which is why Flutter gets such a high FPS drop.
Android requires the least memory (205MB), React Native requires 280MB, and Flutter requires 266MB.
The application cold starts. Flutter performed best on this indicator (2 seconds), while Android Native and React Native took about 4 seconds.
iOS
The results of iOS and React Native in this test are almost the same as Lottie's React Native using native methods.
Flare and Flutter are still surprising, and Flare must have some way to go.
iOS Native requires the least memory (48MB), React Native requires 135MB, and Flutter requires 117MB.
The application cold starts. Flutter performed best on this indicator (2 seconds), while iOS and React Native took about 10 seconds.
Please note : In this use case, Flutter uses a different library, which is much heavier than the libraries we use on other platforms, which may cause the FPS to drop the reason.
Use case 3: Rotate, zoom, and fade
In this test, we compared the animation performance of 200 moving pictures, and zoom, rotate and fade in and out were performed simultaneously.
200 pictures
Android test results
Android
Native shows the highest performance and the most efficient memory consumption.
Flutter shows the FPS very close to Native, the memory overhead has been more than tripled, but there is still good performance.
React Native does not perform well in this use case.
iOS test result
iOS
iPhone 6S is powerful enough, in all three use cases, FPS will not drop.
Native occupies less resources, and GPU occupies the most.
React Native mainly uses CPU for rendering, while Flutter uses GPU.
React Native takes up more memory.
Summary
For general applications, small animations and cool appearance, which technical root to chooseThis is not important. But if you want to do some heavy animation, please remember that Native has the strongest performance. The second is Flutter and React Native. We definitely don't recommend using React Native in operations with high CPU usage, and Flutter is very suitable for this kind of task, whether from a CPU or memory perspective.
Which tool to choose depends on the specific product and business case. If you want to develop a single-platform MVP-use the native method, but remember that Flutter applications can be built for mobile, web and desktop environments at the same time, and we have a hunch that Flutter is expected to become a cross-platform development in the near future King, because even today, Flutter is a very good competitor to native development tools, especially if your development budget is not too tight, but you still want to seek good performance for your application.
The fact that we are facing is that there may be many factors that affect the implementation and benchmarking of each technology, and many of you, who may be true experts on a particular platform, can get more information from your favorite toolset. Many benefits. We try to create a single test environment for each application, and a single set of tools to measure performance, so as to maximize the transparency of the entire process, I hope you like the results we get.
Reference reading:
https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433
Click a little bug
