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

2019年3月25日 234点热度 0人点赞 0条评论

图片

图片

【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 文章。

图片
喜欢就点击“好看”吧!
36980Google 为什么以 Flutter 作为原生突破口?| 技术头条

这个人很懒,什么都没留下

文章评论