Flutter渲染机理学习记录一. 跨平台历史本世纪初嵌入式设备井喷式发展，极大的丰富了人类日常生活，但也给开发者带来

一. 跨平台历史

本世纪初嵌入式设备井喷式发展，极大的丰富了人类日常生活，但也给开发者带来了多倍工作量，当然最主要的原因还是多倍人力成本降低了老板换车的频率。因此跨平台方案的呼声从未断绝。

原生应用内嵌浏览器控件进行 HTML5 页面渲染，并通过JS Bridge（桥），将部分原生系统能力暴露给 HTML5，从而扩展 HTML5 的边界。

评价：

开发效率：★★★★☆

维护成本：★★☆☆☆

方案性能：★☆☆☆☆

裁剪Web标准，保留移动端页面必要标准，同时放弃浏览器控件渲染，采用原生自带引擎渲染，即React Native和Weex。

评价：

开发效率：★★★☆☆

维护成本：★★★★☆

方案性能：★★★☆☆

即从头到尾重写一套跨平台框架，包括渲染引擎。

评价：

开发效率：★★★☆☆

维护成本：★★☆☆☆

方案性能：★★★★☆

Flutter组件渲染流程可以对照参考HTML的DOM树概念。例如创建工程默认生成的代码，他的代码层级结构可以绘制成这样一颗树（Widget 树），当然在 Flutter 体系结构中，这段代码离真正GPU渲染还有好些步骤。
由于Widget 是不可变，它的改变就意味着要重建，而重建任务、性能损耗都非常巨大，因此直接拿Widget树做渲染不是一个好的方案。所以有个Elememt树，他通过Widget树生成，持有其对应 Widget 的引用，如果他对应的 Widget 发生改变，它就会被标记为 dirty Element，于是下一次更新视图时根据这个状态只更新被修改的内容，从而提升性能。
Elememt树把元素数据交给RenderObject，然后RenderObject负责具体布局、绘制、生成绘制指令，生成Layer Tree（保存绘制指令）等工作。

Flutter的渲染树层级通常很多，直接交付给渲染引擎进行多图层渲染，可能会出现大量渲染内容的重复绘制，所以还需要先进行一次图层合成，即将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果，将相同的图层归类合并，简化渲染树，提高渲染效率。合并完成后，Flutter 会将几何图层数据交由 Skia 引擎加工成二维图像数据，最终交由 GPU 进行渲染，完成界面的展示。至此引出 Flutter 的第四颗树 layer 树。
总结： Flutter渲染由UI Thread与GPU Thread相互配合完成。

1）UI Thread 执行 Dart VM 中的 Dart 代码（包含应用程序和 Flutter 框架代码），主要负责Widget Tree、Element Tree、RenderObject Tree的构建，布局、以及绘制生成绘制指令，生成Layer Tree（保存绘制指令）等工作。

2）GPU Thread，执行Flutter引擎中图形相关代码（Skia），这个线程通过与GPU通信，获取Layer Tree并执行栅格化以及合成上屏等操作，将Layer Tree显示在屏幕上。

build 方法调用的时候时机上会触发BuildOwner.buildScope()方法，它有两种机制：
- widget第一次调用时，例runApp()调用scheduleAttachRootWidget() 方法，同时构建生成Widgets Tree、Element Tree、 RenderObject Tree 三棵树。
- widget非第一次调用时，树已经生成过，便不会重新构建三棵树，而是只会更新dirty区域的Element。
当widget刷新时，Flutter 会将该 widget 标记为 dirty。然后Element描述需要的配置，调用createElement方法创建Element，决定Element是否需要更新。Flutter通过查分算法比对dirty Widget树前后的变化，来决定Element Tree是否改变。手动调用setState()也是同样道理。
- RenderObject Tree根据Element Tree绘制、测量、绘制节点、布局子节点、处理输入事件。
layout方法是在三棵树生成之后执行，计算各个部分的大小。其具体可分为两个线性过程：从顶部向下传递约束，从底部向上传递布局信息，其过程可用下图表示。

(极客时间)深入理解跨平台方案的历史发展逻辑 time.geekbang.org/column/arti…

(极客时间)Flutter区别于其他方案的关键技术是什么 time.geekbang.org/column/arti…

(知识小集)Flutter 中三棵重要的树(渲染过程、布局约束、应用视图的构建等) mp.weixin.qq.com/s/k4crVFDTE…

(阿里技术)从架构到源码：一文了解Flutter渲染机制 blog.csdn.net/alitech2017…

(孤独狂饮)(双图理解)Flutter 核心原理之 Widget、Element 和 RenderObject www.jianshu.com/p/97fbfdcdf…

(ad6623)Flutter框架分析（三）-- Widget，Element和RenderObject juejin.cn/post/684490…