Author: Idle fish technology – Lamp Yang

background

A lot of people on the forum are concerned about why Xianyu chose Flutter and not other cross-end solutions. From the point of view of quality, high performance is a heavy factor. After rewriting the detail page with the Flutter, we compared the performance of the Flutter and the Native detail page. The conclusion is that the Flutter is about the same as the Native on the middle and high end models. In fact, xianyu team did not pay more attention to performance optimization in the process of using the Flutter for the detailed page. In order to get to the line faster, it was also the implementation of the priority function. However, after the test results came out, it was unexpectedly better than the original implementation of Native (specific test results, It’s sensitive data, so we need to go through the disclosure process.

It’s clear that the Flutter is not meant to be a replacement for the Native. It’s meant to be an extreme cross-end solution. So it’s time to get back to the cross-end solution track and give you a performance comparison of which is the best cross-end development.

The contestants

[Flutter]

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

[REACT NATIVE]

We’re working on a large-scale rearchitecture of React Native to make it more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps.

Gong kick-off

How do you than

I also wrote a Flutter and an RN App, but it was too ugly for everyone to focus on my bad code, so I found a cross-terminal developer Named Car Guo on Github who implemented a practical App with the Flutter and RN respectively. Car Guo is modest, but in my opinion, this is an App with real usage scenarios (Github client App, providing rich functions, aiming at better daily management and maintenance of personal Github). Still representative [Flutter] github.com/CarGuo/GSYG… [the REACT NATIVE] github.com/CarGuo/GSYG…

scenario

Click the “Trend” Tab, browse Feeds to the bottom of the page, click the Item at the bottom, enter the Item, browse details + browse the 3 pages of the dynamic back, Go to the “My” Tab page 4. View the bottom of “My” Feeds. Click the search button in the upper right corner and search for the keyword “C”

Testing tools

  • iOS
  • Handheld test (iOS) : CPU, memory
  • Instruments: FPS
  • Android
  • Shell scripts based on Adb: CPU, memory, FPS

The test model

  • IOS: iPhone 5C 9.0.1 / iPhone 6S 10.3.2
  • Android: Xiaomi 2S 5.0.2 / Sumsung S8 7.0

The data analysis

iOS

The iPhone 5 c 9.0.1

The iPhone 6 s 10.3.2

The test results

1. The Flutter performs better on FPS than the RN on both low – and mid-range iOS models. 2. CPU usage the Flutter performs slightly worse on the low – and mid-range iOS models, and slightly better on the RN. The initial memory and RN of the Flutter are almost the same on the low-end model, but there is about 30M more memory on the mid-range model (analyzed as the MEMORY of the Dart VM). It can be assumed that the memory strategy of the Flutter is different on the low-end and mid-range models. The models with less available memory have less initial memory for the Dart VM. Allocation at runtime (which understandably leads to more CPU wastage on low-end machines), and more VM memory is preallocated on mid-range machines, which makes processing easier, with less CPU involvement and a smoother experience. As you can see, the Team with the Flutter has done a lot more elaborate work on different models in order to provide a stable and smooth experience.

Android

2 s 5.0.2 Xiaomi

Sumsung S8 7.0

  • Note: Mfs-max Frame Space: refers to the time difference between two frames after removing the buffer

The test results

1. The Flutter outperforms the RN on both high and low cpus, especially on the low-end Mi 2S. 2. The initial memory of the Mi 2S was significantly 40M more than that of the RN. The MEMORY of RN skyrocketed during the test, and the Flutter was more stable. The code on the RN side of the memory needs to be tuned. The same code Flutter is not very different on Android and iOS, but the RN code has to be tuned on a single end, and the Flutter is better at this competition. The odd thing is that the initial memory of the Flutter and RN on the Samsung S8 is the same. It is assumed that the RN also preallocates some memory on the higher end Android models. More details are needed.

The flag-raising ceremony

After looking at the previous data, AS a judge, I will award the gold medal to Flutter. In terms of the experience and data during the test, Flutter is better than RN. And the developer of this App is a classmate who developed Android. Car Guo is more inclined to let everyone get a consistent use experience, and did not spend too much time on performance tuning. Therefore, with the same investment in cross-end development, Flutter can get better performance and better user experience.

Some think

Given the data and the benefits of the Flutter, why does it work so well? How the Flutter is optimized for rendering, and how does the Dart VM Runtime play? Please continue to follow the decrypt article, interested students welcome to join idle fish, become a leader in cross-end solutions.

reference

  • Android FPS & fluency: testerhome.com/topics/4775

  • Obtain the Android memory by dumpsys meminfo packageName

  • Run the top command in busybox to obtain the Android CPU

  • IOS CPU usage: Accumulates the CPU usage of each thread

for (j = 0; j < thread_count; j++) { ATCPUDO *cpuDO = [[ATCPUDO alloc] init]; char name[256]; pthread_t pt = pthread_from_mach_thread_np(thread_list[j]); if (pt) { name[0] = '\0'; __unused int rc = pthread_getname_np(pt, name, sizeof name); cpuDO.threadid = thread_list[j]; cpuDO.identify = [NSString stringWithFormat:@"%s",name]; } thread_info_count = THREAD_INFO_MAX; kr = thread_info(thread_list[j], THREAD_BASIC_INFO,(thread_info_t)thinfo, &thread_info_count); if (kr ! = KERN_SUCCESS) { return nil; } basic_info_th = (thread_basic_info_t)thinfo; if (! (basic_info_th->flags & TH_FLAGS_IDLE)) { tot_sec = tot_sec + basic_info_th->user_time.seconds + basic_info_th->system_time.seconds; tot_usec = tot_usec + basic_info_th->system_time.microseconds + basic_info_th->system_time.microseconds; Tot_cpu = tot_cpu + basic_info_th->cpu_usage/(float)TH_USAGE_SCALE * 100.0; Cpudo. usage = basic_info_th->cpu_usage/(float)TH_USAGE_SCALE * 100.0; if (container) { [container addObject:cpuDO]; } } } // for each threadCopy the code
  • IOS memory acquisition: Phys_footprint was used during the test, which is the most accurate physical memory. Many open source software uses resident_size(this value represents resident memory, which is not a good representation of real memory changes, which can be discussed in another article).
if ([[UIDevice currentDevice].systemVersion intValue] < 10) { kern_return_t kr; mach_msg_type_number_t info_count; task_vm_info_data_t vm_info; info_count = TASK_VM_INFO_COUNT; kr = task_info(mach_task_self(), TASK_VM_INFO_PURGEABLE, (task_info_t)&vm_info,&info_count); if (kr == KERN_SUCCESS) { return (vm_size_t)(vm_info.internal + vm_info.compressed - vm_info.purgeable_volatile_pmap); } return 0; } task_vm_info_data_t vmInfo; mach_msg_type_number_t count = TASK_VM_INFO_COUNT; kern_return_t result = task_info(mach_task_self(), TASK_VM_INFO, (task_info_t) &vmInfo, &count); if (result ! = KERN_SUCCESS) return 0; return (vm_size_t)vmInfo.phys_footprint;Copy the code

Contact us

If you have any questions or corrections about the text, please let us know.

Xianyu technical team is a short and concise engineering and technical team. We not only focus on the effective solution of business problems, but also push the cutting edge practice of breaking the constraints of the technology stack (the unification of android/iOS/Html5/Server programming model and language), computer vision technology on mobile terminals. As a software engineer in the Xianyu Technical team, you have the opportunity to demonstrate all of your talents and courage in the evolution of the entire product and user problem solving to prove that technology development is a power to change the way of life.

Resume delivery: [email protected]