跨平台解决方案

  • NativeScript
  • Weex
  • React Native
  • Flutter
  • …

Weex不支持横竖屏的切换

Flutter内部机制

以下内容描述了Flutter工具箱内部实现Flutter API的工作机制。由于Flutter组件的构建是基于渐进式组合的方式，因此UI构建包含了大量的组件。为了支持这些workload，Flutter采用次线性算法进行布局和构建widget以及数据结构，这些方法通过常量因素优化算法提高组件树tree surgery的效率。

Aggressive Composability（渐进式组合）

Flutter最具特色的方面是其“Aggressive Composability”特性（这里我理解并翻译为：渐进式组合特性）。
例如：在Flutter中，Padding是一个Widget组件，而不是作为Widget的一种属性。因此，在构建用户UI的时候，Flutter会用到非常多的Widgets，这也是Flutter中“一切皆Widget”这句话的由来。

Sublinear Layout（ 次线性布局）

由于Flutter的UI构建过程会产生大量的组件和要渲染的对象，因此Flutter获得高性能的关键就是需要一个有效的算法支撑。

最重要的就是布局的性能，布局的性能是确定被渲染的对象的几何形状（如：大小、位置）的算法。
一些其他的工具使用的布局算法大部分都是Flutter架构概述 - 图1或者更差。
Flutter的目标是使初始化布局的性能达到线性效果（意思是让布局的算法的复杂度接近Flutter架构概述 - 图2)。

Sublinear widget building（次线性组件构建）

与布局算法类似，Fluter的widget构建算法也是次线性的。

Linear reconciliation（线性调和）

Flutter没有采用tree-diffing算法。相反，框架通过使用Flutter架构概述 - 图3算法来检查每个元素的子集列表来决定是否重用元素。

Tree Surgery（Tree 裁剪）

常量-因素优化（Constant-factor optimizations）

除了上述算法优化之外，为了达成渐进式兼容同样也以来一些重要的常量因素优化。

  • Child-model agnostic
  • Visual render tree, logical widget tree
  • Text handled by a specialized render object
  • Observable objects

拆分Element和RenderObject树

RenderObject 和 Element（Widget）树在flutter中是同构的（严格来说，RenderObject树是Element树的子集）。一个明显的简化是将这些树合并成一棵树。但是在实际实践中，将这些树拆分是有如下好处的：

  • 性能（Performance）
  • 清晰（Clarity）
  • 类型安全（Type Safety）

Flutter 概述

Flutter的引擎采用的核心技术包括：一个2D的图形渲染库 - Skia；Dart及其基于垃圾收集、面向对象的语言特性及相应的Dart VM管理技术；并将它们托管在Shell中。不同的平台有不同的Shell，例如Android和iOS都有各自的Shell。这些Shell实现特定于平台的代码（例如：与屏幕键盘（IME）进行通讯及系统应用程序的生命周期事件等）。

为提供最佳性能，Embedder 为 Flutter Engine 创建并管理线程（及Message Loops）。
主要的Task Runners包括：

  • Platform Task Runner
  • UI Task Runner
  • GPU Task Runner
  • IO Task Runner

flutter_framework_overview.svg

Flutter Framework

参考资料
https://github.com/flutter/flutter/wiki/The-Framework-architecture

Dart VM简介

参考资料：
https://dart.dev/tools/dart-vm
https://mrale.ph/dartvm/

Runtime System（运行时系统）

对象模型（Object Model）

垃圾回收（Garbage Collection）

快照（Snapshots）

核心库原生方法

通过服务协议访问的开发体验组件

  • Debugging
  • Profiling
  • Hot-reload（热重载）

JIT(Just-In-Time) & AOT(Ahead-Of-Time)

参考资料：
https://annatarhe.github.io/2019/01/31/introduction-to-dart-vm.html

  • Dart Native：对于诸如面向移动设备、桌面、服务器的程序，Dart Native包括了既具有JIT编译功能的Dart VM，也包括了用于生成机器代码的AOT预编译器。

Flutter的Debug模式采用的是JIT编译，Release模式采用的是AOT编译。Flutter在Debug模式下能支持Hot Reload的根本原因正是采用了JIT编译方式。

JIT

JIT是指在程序运行中，将热点代码编译成机器码，提高运行效率，JIT也是实现热重载的技术。

AOT

AOT指运行前编译，指的是在程序运行之前，已经编译成对应平台的机器码，不需要在运行中解释编译就可以直接运行。常见的例子如C和C++。

编译器（Interpreter）

ARM模拟器

渲染引擎

Skia官方网址：https://skia.org
image.png

Widgets介绍

Flutter中的组件实际上是受到了React的启发。（因此，作为使用过React相关技术的同学，理解起来多少有一些优势。）

StatelessWidget类

无需操作state，stateless widget主要用于构建不依赖用户操作或交互的UI组件。

StatefulWidget类

Flutter与Web开发特性对比

‘Flutter Hot Reload’ vs ‘Webpack HMR’

https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html
Webpack HMR原理解析
https://zhuanlan.zhihu.com/p/30669007
Webpack 热加载原理探索
http://shepherdwind.com/2017/02/07/webpack-hmr-principle/
Flutter Hot Reload详解
https://xiaozhuanlan.com/topic/0845671932

参考资料

关于AOT的google会议讨论
https://www.youtube.com/watch?v=lqE4u8s8Iik
Dart VM 简介
https://annatarhe.github.io/2019/01/31/introduction-to-dart-vm.html