Flutter跨平台自绘引擎
Flutter 不使用WebView,也不使用操作系统的原生控件 Flutter使用自己的高性能渲染引擎来绘制widget。
在Android和iOS上UI的一致性,避免对原生控件依赖而带来的限制及高昂的维护成本。
Flutter使用Skia作为其2D渲染引擎,Skia是Google的一个2D图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia是跨平台的,提供了非常友好的API,Google Chrome浏览器和Android均采用Skia作为其绘图引擎。
Flutter默认支持iOS、Android、Fuchsia(Google新的自研操作系统)三个移动平台。
Flutter亦可支持Web开发(Flutter for web)和PC开发
Flutter高性能
Flutter高性能靠两点保证
首先,Flutter APP采用Dart语言开发 Dart在 JIT(即时编译)模式下,速度与 JavaScript基本持平。
但是 Dart以 AOT模式运行时,JavaScript便远远追不上了
其次,Flutter自己的渲染引擎绘制UI,布局数据等由Dart语言直接控制,在布局过程中不需要像RN那样要在JavaScript和Native之间通信,在滑动和拖动的场景下有明显优势,因为在滑动和拖动过程会引起布局发生变化,JavaScript需要和Native之间不停的同步布局信息,和在浏览器中要JavaScript频繁操作DOM所带来的问题是相同 会带来比较可观的性能开销
采用Dart语言开发
Flutter为什么选择了 Dart 而不是 JavaScript
两个概念 JIT和AOT
程序主要有两种运行方式:静态编译与动态解释。
静态编译的程序在执行前全部被翻译为机器码,通常将这种类型称为
AOT
(Ahead of time)即 “提前编译”解释执行的则是 边翻译边运行, 称为JIT
(Just-in-time)即“即时编译”AOT程序的代表 用C/C++开发的应用, 必须在执行前编译成机器码,JIT的代表 如JavaScript、python等 脚本语言都支持JIT模式 既可 以JIT方式运行也可 以AOT方式运行如Java、Python,
可以在第一次执行时编译成中间字节码、然后在之后执行时可以直接执行字节码 AOT的标准 看代码在执行之前是否需要编译,只要需要编译 都属于AOT。
Flutter为什么选择Dart语言?
对比Dart和JavaScript
开发效率高
Dart运行时和编译器支持Flutter的两个关键特性的组合:
基于JIT的快速开发周期
Flutter在开发阶段采用 JIT模式, 避免 每次改动都要进行编译 节省 开发时间;
基于AOT的发布包
Flutter在发布时 通过AOT生成高效的ARM代码 保证应用性能 JavaScript 不具有这个能力。
高性能
Flutter 旨在提供流畅、高保真的的UI体验。 Flutter 能够在每个动画帧中运行大量的代码。 Dart支持AOT 比JavaScript更好。
快速内存分配
Flutter框架使用函数式流, 依赖于底层的内存分配器。 Chrome V8的JavaScript引擎在内存分配上也已经做的很好 而Dart也正好满足。
类型安全
Dart是类型安全的语言,支持静态类型检测, 可以在编译前发现 类型的错误,并排除潜在问题。 JavaScript是 弱类型语言, 给JavaScript代码 静态类型检测的扩展语言和工具 如:微软的TypeScript以及Facebook的Flow。 Dart本身就支持静态类型,这是它的一个重要优势。
Dart团队
举足轻重 有Dart团队的积极投入,Flutter团队可以获得更多、更方便的支持,Dart团队专门为Flutter构建 Dart VM之前已经针对吞吐量进行了优化,团队优化VM的延迟时间 对于Flutter的工作负载更为重要。
Flutter框架结构 学习过程就是 按图索骥
Flutter Framework
纯 Dart实现的 SDK
底下两层(Foundation和Animation、Painting、Gestures)在Google的 视频中被合并为一个dart UI层,对应的是Flutter中的
dart:ui
包,它是Flutter引擎暴露的底层UI库,提供动画、手势及绘制能力。Rendering层 抽象的布局层 依赖于dart UI层,Rendering层会构建一个UI树,当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终将UI树绘制到屏幕上,这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分,它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
Widgets层是Flutter提供的的一套基础组件库,在基础组件库之上,Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。 Flutter开发的大多数场景,只是和这两层打交道。
Flutter Engine
纯 C++实现的 SDK,包括 Skia引擎 Dart运行时 文字排版引擎等 在代码调用 dart:ui
库时,调用最终会走到Engine层,然后实现真正的绘制逻辑。
总结
Flutter框架本身有着良好的分层设计 如何学习Flutter资源
Flutter官网的资源是快速入门的最佳方式,是了解最新Flutter发展动态的地方,去官网看看有没有新的动态
源码注释应作为学习Flutter的第一文档,Flutter SDK的源码是开源的,注释详细,多示例 源码结合注释可以 解决大多数问题。
如果遇到的问题在StackOverflow上也没有找到答案,可以去github flutter 项目下提issue。
Gallery是Flutter官方示例APP,里面有丰富的示例,Gallery的源码在Flutter源码“examples”目录下。
尊贵的董事大人
英文标题不为空时 视为本栏投稿
需要关键字 描述 英文标题