Flutter技术调研

smile_hahahaxixi

已于 2023-10-25 10:39:06 修改

阅读量254

点赞数

文章标签： flutter

于 2023-10-25 10:15:20 首次发布

本文链接：https://blog.csdn.net/smile_hahahaxixi/article/details/134016973

版权

一、Flutter简介

Flutter是谷歌的高性能、跨端UI框架，可以通过一套代码，支持iOS、Android、Windows、MAC、Linux等多个平台，且能达到原生性能。它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言。

二、性能

2.1 性能测试案例

测试用例1 — List view benchmarking

这里使用原生、rn、flutter 在android和iOS上实现了相同的1000个项目的列表图，并且以相同的时间滚动到最后一个元素。

Android测试结果数据对比
在这里插入图片描述
检测结果：
1、所有测试均显示出大致相同的FPS。
2、与Android 原生相比，Flutter使用的内存多了近一半，但比RN使用内存少。
3、RN 需要较重的 CPU 利用，原因是在于JS 和原生之间通信需要使用 JSBridge，这会在序列化和反序列化方面浪费资源。相比越来，没有桥接的Flutter就非常占优势。
4、电池利用方面，Flutter优于RN，劣于Android 原生。

ios测试结果数据对比
在这里插入图片描述
检测结果：
1、在 FPS上flutter表现与原生大致相同，React Native 的结果比 Flutter 差，原因是无法在 iOS 上使用 IoT 编译。
2、在内存上 Flutter 与原生的内存消耗几乎相同。
3、Flutter 在 CPU 上消耗较重，但相比起同类型的框架 React Native 却优先很多。
3、Flutter 在 GPU 的消耗上甚至少于原生。

测试用例2 — Heavy animations test

该测试用力在 Android，iOS，React Native 上使用了 Lottie 进行复杂矢量动画的展示，并在 Flutter 上使用了 Flare 实现相同的动画。

Android测试结果数据对比
在这里插入图片描述
检测结果：
1、Flutter的结果有点糟（12％的CPU和9 FPS），Android 和 React Native 在性能表现上差不多，这是因为该场景下 Lottie for React Native 只需要使用的原生的绘制逻辑（16–19％CPU，30–29 FPS）。
2、从上述网格动画中删除一个特定的动画后，居然会使 Flutter 上的 FPS 最高提高 40％，这里猜测可能是 Flutter 本身对这种绘制存在兼容问题的原因。
3、Android 原生需要的内存最少（205 Mb），其次是Flutter 需要266 Mb，React Native则需要 280 Mb。
4、应用程序冷启动后，Flutter处于领先地位（2秒），对于 Android 原生和 React Native 大约需要4秒钟。

IOS测试结果数据对比
在这里插入图片描述
检测结果：
1、Flutter表现结果糟糕（cpu 123、fps 8）。
2、Flutter需要的内存量是117 Mb，次于 IOS 原生的48 Mb ，优于 React Native 的135 Mb。
3、应用程序冷启动后，Flutter处于领先地位（2秒），对于 iOS 原生和 React Native 大约需要 10秒。
注意：这里给 Flutter 使用了一个不同的库，该库比在其他平台上使用的库重得多，这可能是fps下降的原因。

测试用例3 - Even heavier animations test with rotations, scaling and fade

在此测试中，我们对 200 张图像进行动画运行（旋转和淡入淡出），从而对比不同平台的性能。

Android测试结果数据对比
在这里插入图片描述
检测结果：
1、原生平台显示出最佳性能和最有效的内存管理；
2、相比起其它框架，Flutter的FPS更接近于原生，但是内存开销增加了一倍倍；
3、Flutter表现明显优于React Native。

IOS测试结果数据对比
在这里插入图片描述
检测结果：
1、所有测试均显示出大致相同的FPS。
2、Flutter主要使用GPU渲染，RN使用CPU渲染。
3、在内存的使用上，原生最少，其次Flutter，然后是RN。

2.2 Flutter高性能原因

从上面的对比可以看出，Flutter使用GPU渲染，在需要CPU繁重的操作中，使用Flutter更为适合，不管是从CUP还是内存的角度来看。
Flutter开发app性能最接近原生的原因有以下几点：

① 没有桥接层

与React Native、Weex等跨终端框架技术相比，Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

② 编译执行

Dart是编译执行的，与JavaScript解释执行相比，性能更优。

③ Flutter Engine虚拟机

Dart是编译执行的，与JavaScript解释执行相比，性能更优。
Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。

除此之外，Flutter还提供了自己的小部件用为构建UI。窗口小部件根据其当前配置和状态描述了它们的视图。当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

④ 自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。

三、Flutter的优缺点

3.1 优势

一套代码，多端运行，可以节省开发资源、测试资源。
性能强大，流畅，使用Skia作为其2D渲染引擎，既不使用WebView，也不使用操作系统的原生控件，这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
开发效率高，Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。
从底层C++到高层Dart，可扩展性高。
基于 Widget 的渲染框架设计，使得 Flutter 应用能够开发出非常漂亮的 UI 界面和提供优秀的用户体验。
整体开发环境要求不高，轻量编辑器+模拟器即可完成开发，已支持IDE:Android Studio和VSCode
支持插件，可以访问原生系统的调。