The opening

I’ve been watching Flutter for the first two months and it feels a little different from the previous cross-platform frameworks. I think it’s already 3.0 in the cross-platform era. Now that the Flutter is a major Google release, it’s kind of exciting. Here is a Demo of the Flutter compared to a native iOS Demo that I made with the same basic functionality.

The body of the

The comparisons in terms of memory usage, CPU usage, FPS, and package volume are shown below. Note: The image resolution is on the order of 1000 * 1000.

The Demo page

Flutter Demo page

IOS native Demo page

Of course the iOS and Flutter Demo are slightly different in terms of some UI and design styles. But the key points are pretty much the same.

CPU usage -Flutter vs iOS native

Flutter

IOS native

As shown in the figure above, using the classic comparison at the beginning, the spike is that the maximum CPU usage is 115% when sliding to download and load images. Between 1 minute and 1 minute and 30 seconds, it was scrolling over already downloaded images, with an average usage rate of around 18%. Static and scrolling are actually much better on iOS than the Flutter.

The results of

Native wins slightly.

Memory usage -Flutter vs iOS native

Flutter

The test lasted for 6 minutes, from 1 minute to 3 minutes, and the maximum memory usage was 263Mib.

IOS native

This round, with no extra treatment, Flutter wins.

Memory usage -Flutter vs iOS native

Flutter

This is a good performance above 58, but because the Flutter refreshes the interface every second, so I seem to refresh without moving, and at a FPS above 58. GPU utilization peaked at 68%, and everything else remained around 30%. The memory leak is negligible due to the use of the image frame and is not a problem with the Dart or Flutter.

IOS native

When scrolling on iOS native, this is done using SDWebImage and the result is around 57fps +. The GPU usage is lower than the Flutter and still needs to be optimized, but there is a problem with the Flutter still using the GPU while the native still does not use the GPU.

In this respect, native is slightly ahead.

Pack Volume -Flutter vs iOS native

When the Flutter is not optimized, it is about 10M larger than the original one. This is because the App. Framework and the framework package in the Flutter.

Flutte inclusions size optimization can refer to idle fish: mp.weixin.qq.com/s/IIoaY2uw6…

However, there is no room to optimize the size of the package body, because there is less logic, so it can not be optimized very much.

conclusion

The performance of the Flutter is not very different from the original, but it does have some drawbacks, such as the constant use of the GPU (which was Stateful control), and the programming style and some control styles that were quite different from iOS. There are also some life-cycle approaches that are relatively sparse. But Flutter has a layout syntax close to the front end and a relatively simple Api that will make it easy for new students to get their hands on.

Demo

Github.com/KoonChaoSo/…