再学不会 Flutter 你来打我！

https://mp.weixin.qq.com/s/4G6hWW6GxnmV_j6d2rVBpA

我很看好Flutter，也希望能带着大家一起学习。但是我发现网上的Flutter文章系统性不够，知识比较零散，所以我就想亲自规划一系列文章。

近期我公号陆续发了7篇Flutter文章，算上今天这篇共8篇。我自己写了一篇，剩下7篇都是我赞助别人写的，每篇200元，共花了1400元。我花钱不要紧，只是希望大家能把这8篇文章利用起来，提高自己，这样这件事情的价值才能得以体现。

“Flutter学习指南”

今天这篇文章的作者是：Xiasm，主要讲述Flutter和原生APP的性能对比，下面是正文。

前言

自从今年google IO大会推出flutter跨平台开发框架以来，flutter在各个技术论坛里被吵得如日中天.flutter团队直言flutter可以帮助开发者轻松实现恒定60fps的性能体验。

我们知道flutter跨平台的原理是采用飞镖语言预编译的方式直接编译出各个平台的原生代码，而不需要类似RN用JavaScript的桥接器执行原生代码，那么这样做的性能究竟如何呢？是否能达到和原生一样的流畅度，是否如官方所说达到恒定的60fps的性能体验？今天我们就以机器人为例从几个不同的维度来实际测试一下！

安装包对比

我们分别用flutter和android原生来编写一个ui效果一模一样的apk，然后打出释放版本的安装包，为了保证测试结果的可靠性，我们不引入任何第三方库，只用框架提供的控件做一些简单ui ，这里附上demo源码：flutter demo，android demo。好了，我们打出各自的发布版本apk，然后使用AndroidStudio自带的APK Analyzer进行分析，如下图：

apk大小
可以明确的看出来，原生的安装包要比flutter安装包小约6M左右。
classes.dex大小
看dex大小你会不会很奇怪，原生的classes.dex竟然比flutter版的dex大六百多KB，这是因为原生的dex里引入了支持库和各种基础控件（ImageView TextView等等），而flutter的dex里面没有支持库，也没有原生控件，实际上flutter实现了一套自己的控件，包括Material Design和Cupertino（iOS风格的小部件）。
res对比
可以看到原生的资源文件要比flutter大约200多k，而我们项目中没有编写任何资源文件，所以这些资源文件大多是支包和sdk自带的。
lib库
大家可能会发现，我们的flutter版app多出了一个lib库，打开里边是一个libflutter.so，因为Flutter引擎是用C，C ++来编写的，在android上会使用ndk编译，在iOS上使用LLVM编译，而我们自己写的dart代码会通过AOT编译成各个平台的本地代码。

通过对比我们了解到，flutter版的apk大小会比android原生的多出约6M左右，其中核心引擎大约3.2MB，框架+应用程序代码大约是1.25MB，必需的Java代码.dex将近60k，而资产文件里还约有2.1MB的ICU数据等，单纯从安装包上来说，原生是要优于flutter的。

运行性能测试

为了测试覆盖更加充分，我们分别在调试和释放模式上进行性能测试。而据官方介绍flutter的调试模式在性能上是要略于发布版的，所以他们提供了简介模式供我们测试，profile模式编译和启动Flutter应用程序几乎与释放模式完全相同。

我们先看android原生的调试和flutter的proflle模式性能对比，这里我们用Android Profiler进行性能指标检测，演示只有一个界面，用ListView展示10000条数据。下面看图：

CPU资源占用
首先，我们看CPU的占用，在启动的时候，android原生对cpu的占用峰值在26.8％，而且几乎是比较平稳的变化，而flutter对cpu的占用峰值达到了35.5％，是一种很陡峭的形态，然后在大约十六七秒的时候，分别滑动了listview，android原生对cpu资源的占用峰值约23％，而flutter约22.5％。从图中也可以看得出，flutter对cpu资源的占用是突然之间占用很高，而android则相对平稳一些。
内存占用
内存占用表现上两者都很相似，因为在第一时间
，两个表现也很一致内存占用。达到稳定状态后，因为flutter为52.5MB。

debug和profile模式的性能测试如果你还不放心的话，那么下面我分别打包出用flutter和android原生构建出的发布apk，然后将手机开启ROOT权限，以便可以用Android Profiler检测到这两个版本的进程，进行性能测试下面看图：

我在打开app并锁定当前进程后，分别在大约第10秒的时候，用手指轻轻滑动了ListView，下面我们分析下两种方式的资源占用情况。

CPU资源占用
首先，我们看CPU的占用，正常情况下，两者都没有占用多少CPU资源，当我滑动listview的时候，原生的大约会占用最高7.7％的CPU资源，而flutter版的则占用高一些，峰值大概在18.8％。
内存占用
原生的app内存占用维持在12M左右，而flutter版的则维持在21M左右，原生应用比flutter大约低了9M的内存占用。

从上边两种模式的性能检测结果分析我们可以总结出，flutter应用在CPU和内存的资源占用上会比原生方式多一些，所以单纯的从性能上来说，android原生是肯定要优于flutter的，但是从用户体验上来说，两者的滑动同样顺畅无比，几乎感觉不到差别。

应用启动对比

启动是我们衡量一个应用程序性能的重要指标，下面我先通过一个gif来演示下android版和flutter版启动app的体验：

看得出，android版和flutter版从启动体验上来说几乎不相上下。这里我大胆做一个猜测，flutter app的启动机制和原生还是一模一样，所以调用启动应用也是创建ActivityThread然后最终执行应用程序的onCreate方法，所以从启动上来说相差无几。下面我贴出android原生和flutter版的启动恍惚文件，

trance 文件几乎一模一样，我一度都怀疑是自己弄错了，然后又仔细确认了一下没出错才放心，可以得出结论，flutter 版的启动流程跟原生是一模一样的。

flutter 60帧/秒的刷新率测试

Flutter 官方指出其旨在提供 60 帧/秒的刷新率，60 fps 意味着大约平均每 16 ms 渲染一帧。我们知道，当 UI 不能平滑的渲染时就会出现掉帧。举个例子，假如有一帧执行的东西太多，花费了 160 ms 的时间去渲染，这段期间就会产生丢帧现象，从而就会看到动画出现了明显的抖动。flutter release 版本是没法去测试渲染指数的，这里我们还是以 profile 模式运行，然后在用官方给我们提供的 Flutter Inspector 工具去展示 fps 变化。下面看 Gif 图：

我的手机是小米Note 2，高通骁龙821处理器 4G 内存，性能大概属于 Anroid 阵营中上等。我打开 app 后先是平稳的滑动 listview，然后又快速的滑动，由图可看出，刷新率起初恒定在 60fps，当我快速滑动的时候，刷新率大约保持在58~59 之间，所以 flutter 官方所说 fps 恒定在 60fps 还是可信的。

总结

通过以上的分析，我们可以很明确的得出结论，android 原生在内存、CPU 资源占用方面要低于 flutter，并且安装包的体积也要小于 flutter，所以，不考虑其他因素，单纯从性能角度来说，android 原生肯定是要优于 flutter 的。但 flutter 也有它的优点，比如跨平台的开发、毫秒级的热重载等等，另外跨端开发也逐渐的流行起来，所以，我们在学好android原生的基础上，对跨端开发也要抱有积极的心态。

参考

flutter中文网：https://flutterchina.club
flutter官网：https://flutter.io

编程·思维·职场
欢迎扫码关注