共计 4178 个字符，预计需要花费 11 分钟才能阅读完成。
导语 | Flutter 框架是当下十分热门的跨端解决方案，可能帮忙开发者通过一套代码库高效构建多平台精美利用，反对挪动、Web、桌面等多端开发。但依然有很多产品、设计、甚至开发同学并不理解 Flutter，所以本文将深入浅出和大家聊聊 Flutter 的设计背景、技术特点，以及与其余同类技术之间的比照，心愿与大家一起交换。
一、跨平台背景
1. 挪动互联网的重要性
如上图所示，与 2019 年 1 月相比，寰球应用互联网的人数已减少到 45.4 亿，增长了 7%（2.98 亿新用户）。
到 2020 年 1 月，寰球有 38 亿社交媒体用户，与去年同期相比，这个数字增长了 9%以上（3.21 亿新用户）。
在寰球范畴内，当初有超过 51.9 亿人应用手机，在过来的一年中，用户数量减少了 1.24 亿（2.4%）。
当初，一般的互联网用户每天在线破费 6 个小时 43 分钟，相当于每个互联网用户每年连接时间超过 100 天。如果咱们每天须要大概 8 小时的睡眠，那就意味着醒来的工夫中，有 40%以上是通过互联网度过的。
在挪动互联网的浪潮下，开发效率和应用体验能够说是等同重要。然而，应用原生的形式来开发 App，就要求咱们必须针对 iOS 和 Android 这两个平台别离开发。
这样就导致了咱们不仅须要在不同的我的项目间尝试用不同的语言去实现同样的性能，还要承当由此带来的保护工作。如果还要持续向其余平台（比方 Web、Mac 或 Windows）拓展的话，须要付出的工夫和老本将成倍增长。而这，显然是难以承受的。于是，跨平台开发的概念趁势走进了大家的视线。
从实质上讲，跨平台开发是为了减少业务代码的复用率，缩小因为要适配多个平台带来的工作量，从而升高开发成本。
2. 跨平台开发计划的三个时代
依据实现形式的不同，业内常见的观点是将支流的跨平台计划划分为三个时代。
（1）Web 容器时代
基于 Web 相干技术通过浏览器组件来实现界面及性能，典型的框架包含 Cordova(PhoneGap)、Ionic 和微信小程序。
Web 时代的计划，次要采纳的是原生利用内嵌浏览器控件 WebView 的形式进行 HTML5 页面渲染。
因为采纳了 Web 开发技术，社区和资源十分丰盛，开发效率也很高。然而，一个残缺 HTML5 页面的展现要经验浏览器控件的加载、解析和渲染三大过程，性能耗费要比原生开发减少 N 个数量级。
（2）泛 Web 容器时代
采纳类 Web 规范进行开发，但在运行时把绘制和渲染交由原生零碎接管的技术，代表框架有 React Native、Weex 和快利用，狭义的还包含天猫的 Virtual View 等。
泛 Web 容器时代的解决方案优化了 Web 容器时代的加载、解析和渲染这三大过程，把影响它们独立运行的 Web 规范进行了裁剪，以绝对简略的形式反对了构建挪动端页面必要的 Web 规范（如 Flexbox 等），也保障了便捷的前端开发体验。
同时，采纳原生自带的 UI 组件实现代替了外围的渲染引擎，仅放弃必要的根本控件渲染能力，从而使得渲染过程更加简化，也保障了良好的渲染性能。
也就是说，在泛 Web 容器时代，咱们依然采纳前端敌对的 JavaScript 进行开发，整体加载、渲染机制大大简化，并且由原生接管绘制，行将原生零碎作为渲染的后端，为依靠于 JavaScript 虚拟机的 JavaScript 代码提供所须要的 UI 控件的实体。
这也是当初绝大部分跨平台框架的思路，而 React Native 和 Weex 就是其中的佼佼者。总结起来其实就是利用 JS 来调用 Native 端的组件，从而实现相应的性能。
（3）自绘引擎时代
自带渲染引擎，客户端仅提供一块画布即可取得从业务逻辑到性能出现的多端高度一致的渲染体验。Flutter，是为数不多的代表。
这一时期的代表 Flutter 开拓了一种全新的思路，即从头到尾重写一套跨平台的 UI 框架，包含渲染逻辑，甚至是开发语言。
渲染引擎依附跨平台的 Skia 图形库来实现，Skia 引擎会将应用 Dart 构建的形象的视图构造数据加工成 GPU 数据，交由 OpenGL 最终提供给 GPU 渲染，至此实现渲染闭环，因而能够在最大水平上保障一款利用在不同平台、不同设施上的体验一致性。
而开发语言选用的是同时反对 JIT（Just-in-Time，即时编译）和 AOT（Ahead-of-Time，预编译）的 Dart，不仅保障了开发效率，更晋升了执行效率（比应用 JavaScript 开发的泛 Web 容器计划要高得多）。
二、Flutter 的前世今生
1. Flutter 呈现的历史背景
为不同的操作系统开发领有雷同性能的应用程序，开发人员只有两个抉择：
- 应用原生开发语言（即 Java 和 Objective-C），针对不同平台别离进行开发；
- 应用跨平台解决方案，对不同平台进行对立开发。
原生开发方式的体验最好，但研发效率和研发老本绝对较高；而跨平台开发方式研发尽管效率高，但为了抹平多端平台差别，各类解决方案裸露的组件和 API 较原生开发相比少很多，因而研发体验和产品性能并不完满。
所以，最胜利的跨平台开发计划其实是依靠于浏览器控件的 Web。浏览器保障了 99% 的概率下 Web 的需要都是能够实现的，不须要业务“将就”技术。
不过，Web 最大的问题在于它的性能和体验与原生开发存在肉眼可感知的差别，因而并不适用于对体验要求较高的场景。
对于用户体验更靠近于原生的 React Native，对业务的反对能力却还不到浏览器的 5%，仅实用于中低复杂度的低交互类页面。面对略微简单一点儿的交互和动画需要，开发者都须要 case by case 地去 review，甚至还可能要通过原生代码去扩大能力实现。
带着这些问题，咱们终于迎来了本次的配角——Flutter。
Flutter 是构建 Google 物联网操作系统 Fuchsia 的 SDK，主打跨平台、高保真、高性能。开发者能够通过 Dart 语言开发 App，一套代码能够同时运行在 iOS 和 Android 平台。Flutter 应用 Native 引擎渲染视图，并提供了丰盛的组件和接口，这无疑为开发者和用户都提供了良好的体验。
那么，Flutter 是怎么实现组件渲染的呢？
这须要从图像显示的基本原理说起。在计算机系统中，图像的显示须要 CPU、GPU 和显示器一起配合实现：CPU 负责图像数据计算，GPU 负责图像数据渲染，而显示器则负责最终图像显示。
随后视频控制器会以每秒 60 次的速度，从帧缓冲区读取帧数据交由显示器实现图像显示。
能够看到，Flutter 关注如何尽可能快地在两个硬件时钟的 VSync 信号之间计算并合成视图数据，而后通过 Skia 交给 GPU 渲染：UI 线程应用 Dart 来构建视图构造数据，这些数据会在 GPU 线程进行图层合成，随后交给 Skia 引擎加工成 GPU 数据，而这些数据会通过 OpenGL 最终提供给 GPU 渲染。
2. 对于 Skia
Skia 是一个开源的 2D 图形库，提供各种罕用的 API，并可在多种软硬件平台上运行。谷歌 Chrome 浏览器、Chrome OS、安卓、Flutter、火狐浏览器、火狐操作系统以及其它许多产品都应用它作为图形引擎。
Skia 在图形转换、文字渲染、位图渲染方面都体现卓越，并提供了开发者敌对的 API。
因而，架构于 Skia 之上的 Flutter，也因而领有了彻底的跨平台渲染能力。通过与 Skia 的深度定制及优化，Flutter 能够最大限度地抹平平台差别，进步渲染效率与性能。
底层渲染能力对立了，下层开发接口和性能体验也就随即对立了，开发者再也不必操心平台相干的渲染个性了。也就是说，Skia 保障了同一套代码调用在 Android 和 iOS 平台上的渲染成果是完全一致的。
同样的在界面渲染、绘制的过程中，Flutter 也做了很多优化解决，晋升合成、渲染效率。
3. FLutter 的劣势
（1）在所有的平台下，都能够放弃同样 UI 款式，同样的业务逻辑
大多数跨平台框架中的 UI 出现如下图所示：
而 Flutter 是间接画在画布上：
（2）缩小开发所需的工夫
- Flutter 的热重载能够高效疾速的看到扭转，甚至保留利用状态；
- 官网提供的各种现成的组件（Material 和 Cupertino）。
（3）疾速迭代上线
不须要独自适配 iOS、Android 双端的 UI 层面。
（4）更靠近 native 的性能体现
Flutter 不依赖任何中间代码，最终间接构建成机器码，进步了性能。
（5）自定义简单动画
Flutter 最大的劣势之一就是能够定制你在屏幕上看到的任何货色，不论它有多简单。
（6）有本人的渲染引擎
Flutter 应用 Skia 将界面渲染到平台提供的画布上，意味着不需调整，即可迁徙到其余平台。
（7）更不便调用 native api
获取 GPS 坐标、蓝牙通信、收集传感器数据、权限解决等，未反对的也可通过 platform channel。
（8）更高的后劲
iOS、Android、Web、Desktop…
三、Flutter 与 React Native (Hippy)
1. UI 方面
在新旧设施上也能保持一致
android 5.1
android 8.1
Flutter 动画成果：
2. 性能方面
基于 ListView，咱们做了一个基准测试。在 ListView 中，有 1000 个元素，并且达到列表最初一个元素的滚动工夫雷同，这里应用到了一些第三方库：
- ios Nuke
- Android Glide
- react native React-native-fast-image
后果展现：
3. Flutter 毛病
- 开发者社区的规模和第三方库
- 继续集成的能力
- APK 的大小
- Dart 语言学习老本
- 动静更新能力
Q&A
Q：Flutter 和 Hippy 有什么区别，为什么用 Flutter，不必 Hippy？
A： 第一，Flutter 开发效率高，可缩小客户端开发工夫；第二，Flutter 在跨端 UI 差别小；第三，Flutter 动画反对很全面；第四，它更靠近 native。
Q：Flutter 和 Hippy 在计划选型上有一些差别，比方自定义 UI 组件性能方面有哪些差别，接口怎么通信？
A：Flutter 自定义 UI 组件 platformview 的性能还有待晋升，接口通信方面，Hippy 与客户端通过 jsbridge，而 Futter 是通过 methodchannel。
Q：Flutter 为什么临时还不反对动静更新？
A： 初期思考到利用平安和苹果方面的策略，所以不反对动静更新。当初 Android 端能够通过整包形式实现动静更新，iOS 目前还不反对。