颤振框架详图

1.Flutter介绍Flutter是一个由Google创建的高性能、跨平台的UI框架。它可以为开发人员提供一种简单高效的方式来构建和部署跨平台、高性能的移动应用程序；为用户提供漂亮的app体验，无需平台差异化。

Flutter是如何做到这一点的？它的框架结构是什么？接下来，我们将主要介绍Flutter框架的概述。

2.Flutter架构Flutter被设计为一个可扩展的分层系统。它包含一系列依赖于其下层的独立库。其原理图见下图。

框架层中的每个组件都是可选的和可替换的。从上图可以看出，Flutter系统可以分为三层。框架的上层、引擎的中层和嵌入层的底层。

框架：框架层是用纯dart语言实现的响应框架。开发人员通常需要通过该层与Flutter系统交互。

引擎：引擎层主要用C++实现，这是Flutter系统的核心。该引擎提供了一系列Flutter核心API的底层实现，如图形（通过Skia）、文本布局、文件等，是框架和系统（Android/iOS）之间的桥梁。

嵌入式层：嵌入式层基本上由平台对应的语言实现，例如，在Android上，由Java和C++实现；在iOS中，它由Objective-C/Objective-C++实现。嵌入式层为Flutter系统提供了一个入口，通过该入口，Flutter系统可以访问底层系统提供的服务，例如输入方法、绘图表面等。

其中，框架是我们系列文章的主要焦点。从下到上，主要包括：

基本模块和基本服务（如动画、绘画和宝石）用于帮助上层调用基本模块的抽象。

渲染层为处理层提供抽象组件。使用此层，可以构建可绘制对象的树。您可以动态操作这些对象，树可以根据您的更改自动更新树。

Widgets层是组件的抽象。每个渲染对象都有一个相应的小部件对象。此外，小部件层允许您定义可以重用的复合组件。同时，该层引入了一个响应式编程模型。

Material和Cupertino库提供了一系列材质和iOS设计风格组件。

3.不同跨平台技术的比较市面上有很多文章比较不同的跨平台技术，比如在Flutter的实战中引入了移动开发技术。本文以表格的形式简要介绍了不同跨平台技术的特点、优缺点，然后解释了Flutter性能与原生app相当的原因。

目前，市场上主要有H5+原生、JavaScript+原生渲染和自绘制UI+原生。三种跨平台技术的比较结果如下。

技术类型UI渲染方法性能开发效率动态框架表示H5+原生WebView渲染通常支持Cordova、IonicJavaScript+原生渲染、原生控件渲染以及RN、Weex自绘制UI+原生引擎渲染。长笛演奏得很好。默认情况下，低QT不支持QT，从图中可以看到颤振。Flutter的最大优势是其出色的性能。根据谷歌的官方宣传，其性能与native相当。这可以从下面的结构图中看出。

本地app由其框架直接通过Skia调用GPU绘制。然而，JavaScript+本机渲染跨平台技术（如RN）需要其框架首先调用本机框架，然后通过本机框架调用Skia，最后调用GPU进行绘制。因此，它的调用步骤比原生多了一层，理论上它的渲染性能会更差。

然而，Flutter不同。因为其app也是由Flutter框架通过Skia调用GPU直接绘制的，所以只要其框架的性能与原生框架相当，其渲染性能就可以与原生框架媲美。不仅如此，由于Skia是Flutter的原生版本，其升级非常方便，而Android系统的升级速度相对较慢，如果Flutter使用更高性能的Skia库，其渲染性能甚至可能超过原生版本。