Flutter框架分析（一）--架构总览

1. 前言

Flutter是Google打造的高性能、跨平台的UI框架。它能够给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用；给用户提供漂亮、无平台区分的app体验。 Flutter是如何作到这一点的呢？它的框架结构是怎么样的呢？接下来，我将写一系列的文章分析Flutter的框架层，结合源码分析Flutter框架所采用的各类黑科技。本文是这个系列文章的第一篇，主要介绍Flutter框架的总览。

2. Flutter体系架构

Flutter被设计成一个可扩展，分层的系统。它包含了一系列依赖其下层的独立库。其示意图见下图.

其中，framework层中的每个组件均是可选的和能够代替的。从上图可知，Flutter系统总共能够分为三层。上层的框架（Framework），中层的引擎（Engine），以及底层的嵌入层（Embedder）。

• 框架（Framework）：框架层是纯dart语言实现的一个响应式框架，开发者日常须要经过该层和Flutter系统交互。
• 引擎（Engine）：引擎层绝大部分是用C++实现的，其为Flutter系统的核心。引擎提供了一系列Flutter核心API的底层实现，例如图形（经过Skia），文字布局，文件等，是链接框架和系统（Andoird/iOS）的桥梁。
• 嵌入层（Embedder）：嵌入层基本是由平台对应的语言实现的，例如：在Android上是由Java和C++实现；在iOS是由Objective-C/Objective-C++实现。嵌入层为Flutter系统提供了一个入口，Flutter系统经过该入口访问底层系统提供的服务，例如输入法，绘制surface等。

其中，Framework是咱们这一系列文章主要关注的部分。从下到上，其主要包括：

• 基础模块（foundational）及基础服务，例如animation，painting，以及gestures，这三种基础服务是为了方便上层调用对基础模块的抽象。
• Rendering 层，为处理图层提供了抽象组件。经过这一层，你能构建一棵可绘制对象的树。你能够动态操做这些对象，这棵树能够根据你的修改自动更新这棵树。
• Widgets层，是组件的抽象。每一个render对象都有对应的widget对象。除此以外，widgets层容许你定义你能重复使用的组合组件。同时，此层引入了响应式编程模型。
• Material和Cupertino库提供了一系列Material和iOS设计风格的组件。

3. 不一样跨平台技术对比

市面上有不少对比不一样跨平台技术的文章，例如Flutter实战中的移动开发技术简介。本文以表格形式简单介绍一下不一样跨平台技术的特色和优劣势等，而后说明一下flutter性能能媲美原生应用的缘由。 目前市面上主要有H5+原生，JavaScript+原生渲染，自绘UI+原生。三种跨平台技术，其对比结果以下。

技术类型	UI渲染方式	性能	开发效率	动态化	框架表明
H5+原生	WebView渲染	通常	高	支持	Cordova、Ionic
JavaScript+原生渲染	原生控件渲染	好	高	支持	RN、Weex
自绘UI+原生	自带引擎渲染	很是好	Flutter高, QT低	默认不支持	QT、Flutter

由图可见，Flutter最大的优点，是其出色的性能。根据Google官方的宣传，其性能是能够媲美原生的。这一点咱们能够经过如下结构示意图看出来。

原生应用是由其框架直接经过Skia调用GPU进行绘制，可是RN等JavaScript+原生渲染跨平台技术是须要由其框架先调用原生框架，再经过原生框架调用Skia，最后调用至GPU进行绘制的。所以，其调用步骤上相对于原生多了一层，理论上其绘制性能将比原生差。 可是Flutter则不一样，因为其应用也是由Flutter框架直接经过Skia调用GPU进行绘制，所以只要其框架的性能能媲美原生框架的性能，则其绘制性能就能够媲美原生。不只如此，因为Skia是Flutter自带的，其升级很是方便，而Android系统相对而言升级比较缓慢，所以若是Flutter使用了更高性能的Skia库，其绘制性能甚至可能超过原生。

4. 小结

本文主要介绍了Flutter框架体系，其中重点介绍了Flutter的Framework层结构。以后对比了Flutter和其余跨平台技术，并经过它们绘制原理的对比分析，解释了Flutter性能能够媲美原生应用的缘由。

5. 相关文章

Flutter框架分析（二）-- Widget
Flutter框架分析（三）-- Element
Flutter框架分析（四）-RenderObject
Flutter框架分析（五）-Widget，Element，RenderObject树
Flutter框架分析（六）-Constraint
Flutter框架分析（七）-relayoutBoundary
Flutter框架分析（八）-Platform Channel
Flutter框架分析- Parent Data
Flutter框架分析 -InheritedWidget