Google 为什么以 Flutter 作为原生突破口？| 技术头条

【CSDN 编者按】去年Google 推出了 Flutter ，其目标是为了解决移动中的两个重要问题：一是实现原生应用的性能和与平台的集成，二是提供一个多平台，可移植的 UI 工具包来支持高效的应用开发。

那么它底层实现架构是怎么样的呢？一来看看吧。

Android 的前生今世

Android 系统作为全球第一大系统，基于 Java 开发的移动端有着诸多的性能优势。

但由于2018年前 H5 的性能瓶颈和 React-Native 的一系列缺点（动画性能、第三方依赖、逻辑上的额外开销、调试的困难、不能完全屏蔽原生平台等）导致业界对跨平台开发失去信心。 

直到 2018 年 10 月 Google 推出首个 Flutter 跨平台解决方案，打破整个移动开发的方向。

为什么 Flutter 成为 Android 方向标

Flutter 有以下优点：

1. 跨平台性: Flutter 基于图像绘制引擎进行渲染，在不同平台下绘制效果是绝对一致的，能做到真正的跨平台，一处写处处运行。

2. 性能优异性: 不同于 H5 通过 DOM 渲染 和 RN 映射组件，Flutter 直接基于 Native 进行绘制，在性能上完全能超过原生。

3. 热重载性: Android 原生开发时会遇到“编译-打包-安装”这三部曲。开发效率迟迟得不到提升。热重载技术在 Flutter 内完美体现。

Flutter 详细介绍

Flutter 架构图

1. Dart 语法编译

   Dart 是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植易学的风格。Dart 主要由 Google 负责开发和维护。

2. Flutter 插件

   Flutter 使用的 Dart 语言无法直接调用 Android 系统提供的 Java 接口，这时就需要使用插件来实现中转。Flutter 官方提供了丰富的原生接口封装。

3. Skia 图像处理引擎

   2005 年 Skia 图像处理引擎成立，用来展示 Chrome  火狐 和其他 Google 自家的产品使用。2007 年 第一个 Android 系统问世，于是 Google 开发者将 Skia 移植到 Android 平台。Skia 作为一个 2D 的图形系统，包括绘图、渲染、显示图片都是用 Skia 完成。

   
   

   Skia 引擎详解图：

为什么 Flutter 会实现三大特性

Flutter 实现以下三大特性：

跨平台

性能优异

渲染流程

React 渲染与 Flutter 渲染相同点

React 渲染与 Flutter 渲染不同点

1. 绘制树：ReactNative 基于 ReactShadow 的链式结构在内存中形成一个虚拟的 Dom 树，Flutter 是通过引擎实现不同图层的渲染方式。

2. 机制不一样：ReactNative 最终被反射成原生控件，而 Flutter 是底层通过引擎直接渲染，不存在映射的说法。

Flutter 渲染

在 Flutter 界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在 Flutter 框架中完成合成则交由引擎负责。

Flutter优势

在 Flutter 的响应式框架中，控件树中的控件直接通过可移植的图形加速渲染引擎、高性能的本地 ARM 代码进行绘制，不再需要通过虚拟 DOM 或虚拟控件、真实 DOM 或平台控件这些中间对象来绘制。

Flutter 响应式框架通过“无中间商赚差价”的⽅式直接利⽤硬件的所有性能，所以正如前⾯所说的，Flutter 应⽤的性能比原生 App 更加优秀。

相对于几大跨平台框架，个人还是很看好 Flutter 的。毕竟是 Google 的亲儿子嘛，还是可以先入坑的，自己动手写一个 Flutter App 出来。在不同设备上跑一下，自己体验一下。

来源：https://juejin.im/post/5c91f0f25188256b7463868e

声明：本文经作者授权转载，如需转载请联系作者，责编伍杏玲。

【完】

 热 文 推 荐 

☞ 腾讯服务器崩溃！

☞ 苹果春季发布会已开启直播；滴滴回应网约车司机被害；微软Chromium内核浏览器曝光 | 极客头条

“我在故宫写代码”

☞ 18 岁少年盗取价值 90 万元的萌乃币, 交易所被迫关停！

李笑来登顶 GitHub TOP 榜！币圈大佬要教程序员如何自学编程

马云：蚂蚁金服这样做区块链！

女生适合做程序员吗？

Google首页玩起小游戏，AI作曲让你变身巴赫

曝光！月薪 5 万的程序员面试题：73% 人都做错，你敢试吗?

System.out.println("点个在看吧！");
console.log("点个在看吧！");
print("点个在看吧！");
printf("点个在看吧！\n");
cout << "点个在看吧！" << endl;
Console.WriteLine("点个在看吧！");
Response.Write("点个在看吧！");
alert("点个在看吧！")
echo "点个在好看吧！"

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。

喜欢就点击“好看”吧！