Flutter 区别于其他技术的关键是什么？附上Flutter知识体系图

最终的交叉解决方案经历了三个步骤。第一阶段是Web容器混合开发时代，第二阶段是以RN、Weex为代表的泛Web容器时代，第三阶段是Flutter自表示引擎时代。

最初为了解决原生开发成本高、效率高的问题，Hybrid混合开发出现了，即将依赖浏览器的WebView包含在原生中，❀网页浏览器可以在WebView中实现应用需求。但互联网的主要问题是它的性能和体验被发现与原生开发不同，因此不适合用人单位对性能和体验要求较高的场合。

RN 后来又打破了网页功能，因此用户体验更接近原生，但由于对业务的影响，支撑能力低于5 % 的浏览器，所以只适合低层次、低复杂度的通信页面。面对更复杂的交互和动画需求，需要通过调用原生代码进行扩展来实现。

之后，也就是现在，Flutter出现了。 Flutter 是构建 Google IoT Fuchsia 操作系统的 SDK。它使用Dart语言来创建APP。该系列代码可以在iOS和Android平台上运行。 Flutter使用自己的Native渲染引擎来渲染视图，自动完成渲染元素的闭环； RN、Weex等框架通过JavaScript虚拟机扩展调用系统组件，最终Android或iOS系统完成组件的渲染。

那么，Flutter 是如何填充元素的呢？需要从图像显示的基本原理开始。

我们显示器的电子CRT枪将从上到下看线，如上图所示。扫描完一行后，显示器上会出现一个框，然后电子枪会返回到初始位置，继续下一次扫描。水平扫描时，显示器发送水平同步（HSync）信号； 完成一次扫描后，电子枪回到初始位置，在准备下一次扫描之前，控制器会发出垂直同步信号（Vsync），显示屏会以固定频率刷新，并且这个刷新率就是Vsync信号的频率。

在计算机系统中，图形显示需要CPU、GPU和控制器的配合：CPU负责图像数据计算，GPU负责发布数据，Supervisor负责最终图像。表现。

CPU 提供要在 GPU 上显示的计算内容。 GPU完成渲染并将其放入帧缓冲区中。然后视频监视器根据垂直同步信号（Vsync）以每秒60次的速率从帧缓冲器中读取内容。读取的数据传递给控制器​​，完成图像的显示。

操作系统在渲染图像时遵循这种方法，Flutter作为跨平台开发框架也采用这种基本策略。这里用一张更详细的图来解释Flutter的绘制原理。

可以看到Flutter重点关注的是如何尽可能快的计算并合并两个硬件时钟上Vsych之间的数据，然后通过Skia交给GPU处理：UI线程使用Dart为了构建视图结构数据，这些数据将被加载到 GPU 线程中，然后提交给 Skia 引擎在数据 GPU 文件上进行处理，这些数据将通过 OpenGL 馈送到 GPU 进行渲染。

Skia 是什么

Skia 是 Fl​​utter 的图像渲染引擎。

Skia 是一个用 C++ 开发的强大的 2D 渲染引擎。以前是一个色情软件。 2005年被Google收购后，因其出色的图形能力而被广泛应用于Chrome、Android等核心产品中。 Skia在图像转换、文本渲染、位图渲染等方面都有良好的表现，并为开发者提供了API。

目前，Skia已经是Android官方的渲染引擎，所以Flutter Android SDK不需要包含Skia引擎♹，而且对于iOS平台来说，由于Skia是跨平台的平台上，它将作为 Flutter 的 iOS 渲染引擎包含在 Flutter iOS SDK 中，取代 iOS 锁源的 Core Graphics/Core Animation/Core Text。这也正是Flutter iOS SDK捆绑的APP包比Android大的原因。

基础渲染技巧结合，高端场景和工作经验立即结合。开发人员不再需要担心特定领域的翻译功能。换句话说，Skia确保提供相同代码在Android和iOS平台上调用的结果完全兼容。

为什么使用 Dart？

如前所述，Dart 同时支持 JIT 和 AOT，因此它具有高生产率、良好的速度和高性能。那么，除了这个特性之外，还有哪些特性促使 Flutter 选择 Dart over JavaScript 作为前端应用程序的官方首选语言呢？

很多人说dart是Flutter推广的一大弊端。毕竟，学习一门新语言意味着另一个障碍。但Google给出了解释：Dart语言开发团队已经接近门外，Flutter需要的一些新的语言特性可以在语法层面快速实现；如果你选择JavaScript，你必须经过各个委员会和浏览器提供商的漫长决定。

其实，Dart 得到了兄弟团队的密切支持。 Dart 2.0于2018年2月发布，Dart 2.1于2018年12月发布，Dart 2.2于2019年2月发布，Dart 2.3于2019年5月发布，每个版本都包含针对Flutter的内置功能。许多自定义更新。自然而然，Google 选择了 Dart 作为 Flutter 的开发语言。我认为还有其他更令人信服的原因：

1. Dart 同时支持即时 JIT 编译和预编译 AOT。 开发期间选择JIT，使得开发调试非常方便（热迭代）； 发布时使用AOT，本地代码执行效率更高。
2. 作为一种现代语言，Dart 融合了数百家的精华，并具有其他编程语言的许多特性。这就是为什么学习Dart的代价并没有那么高，因为你总能看到你熟悉的语言的影子。
3. Dart 避免了调度和共享内存，可以无锁地进行对象分配和垃圾回收，在性能方面表现良好。

Dart 是一种优秀的现代语言。它最初的目的是取代 JavaScript 成为 Web 开发的官方语言。但竞争如此激烈，最终的结果可想而知。

随着Flutter的发布，Dart开始发生变化，它的定位也发生了变化，专注于改善构建客户端应用程序的体验。因此，越来越多的开发人员开始了解这种语言并共同努力改善他们的环境。凭借Flutter的动态和Google的强大能力，相信Dart变革后的前景会非常光明。

Flutter原理

首先看Flutter的架构图：

Flutter架构采用分层设计，从下到上分为三层，依次为：Embedder、Engine、Framework。

• Embedder是操作系统兼容层，实现了Surface设置、线程设置、平台插件的传递等平台相关功能的兼容。从这里我们可以看到，Flutter平台相关的功能并不多，这使得在系统层面维护跨端连续性的成本很低。
• 引擎层主要包括Skia、Dart和Text，实现Flutter的渲染引擎、脚本、事件处理和Dart的运行时等功能。 Skia和Text为上层接口提供了调用基础渲染和脚本的能力，而Dart则为Flutter提供了调用Dart和运行时渲染引擎的能力。引擎层的作用是将它们组合起来，并根据它们生成的数据实现渲染视图。
• Framework层是用Dart实现的UI SDK，包含动画、图形、手势识别等功能。为了在绘制控件等固定图像时提供更好、更简单的界面，Flutter 在这些基本能力的基础上，捆绑了一套基于 Material 和 Cupertino 两种设计风格的 UI 元素库。我们在开发Flutter时，可以直接使用这些组件库。

Layout

Flutter 采用深度优先的机制来遍历渲染对象树，并确定渲染树中每个渲染对象在屏幕上的位置和大小。 在渲染过程中，渲染对象树中的每个渲染对象都会接收父对象的约束参数并确定其大小； 然后家长根据控制逻辑确定每个孩子的位置，完成规划过程。如下图所示：

为了防止整个控制树因为节点变化而重新排列，Flutter引入了一种新的机制——边界重新布局，可以自动或手动设置边界。当边界内的对象重新定位时，边界外的对象不会受到影响，反之亦然。如下图：

类型

配置完成后，对象树中的每个节点都有明确的大小和位置。 Flutter会将所有渲染对象拖动到不同的图层。和规划过程一样，绘制过程也是深度跟踪的，总是先绘制自身，然后再绘制子节点。

以下图为例。绘制完节点1后，会绘制节点2，然后绘制节点3、4和5，最后绘制节点6。

可以看到，由于其他原因（例如合并视图），子节点5的2 与其同级节点 6 位于同一层。这将使其在需要重绘时与节点 2 无关。节点6也将被重做，导致功能丧失。

为了解决这个问题，Flutter提出了布局边框的匹配机制——边框测量（Border Paint）。在 reddraw 边框内部，Flutter 会强制新建一个图层，避免边框内外接触，避免同一图层上放置不必要的内容而导致不必要的更新。

重置边框的常见情况是 ScrollView。当ScrollView滚动时，它需要更新视图的内容，导致内容刷新。当滚动内容重绘时，其他内容不需要重绘。现在有必要恢复边界。

合成与渲染

随着终端设备页面变得越来越复杂，Flutter的渲染树往往有多个层次，直接交付给渲染引擎进行多层渲染，这会导致图像重复。演示内容较多，所以还是需要先做图层合成，即根据大小、高度、透明度等规则计算出所有图层的最终显示结果，将相似的图层进行分类组合，简化工艺树，提高技能。

混合完成后，Flutter会将采集层数据提交给Skia引擎转换为两位图像数据，最后提交给GPU重新填充界面显示。

总结

Skia和Dart是构建Flutter底层的关键技术，也是Flutter区别于其他跨平台解决方案的核心。

跨平台方案的局限性在于，很难完全保证在众多终端上的正确一致性。 RN就不用说了，双方很多要素都是不同的。即使 Flutter 也只能处理渲染层之上的多维一致性。还有一些原生的东西（比如Push、地图、位置、蓝牙、WebView）是不可避免的，需要通过编写原生插件来解决。不过话说回来，如果真的安装了，Flutter就会成为操作系统，内置的包可能装不了几百兆。

最后附上一张Flutter的知识体系图，以供鼓励。