图画显现原理

• CPU担任图画数据核算, 然后交给 GPU
• GPU担任图画数据烘托, 烘托后放入帧缓冲区
• 视频控制器根据笔直同步信号（VSync）以每秒60次的速度，从帧缓冲区读取帧数据交由显现器完结图画显现。

Flutter 图画显现流程

1. UI线程运用Dart来构建视图结构数据(Widget)，这些数据会在GPU线程进行图层组成，随后交给Skia引擎加工成GPU数据，
2. GPU数据经过OpenGL终究提供给GPU烘托。
3. 需要在两个VSync信号之间完结这些操作,不然会卡顿

Skia是什么？

• Skia是一款C++开发的、跨平台、功能优秀的2D图画制作引擎

• Skia是Android官方的图画烘托引擎，所以无需内嵌Skia引擎就可以取得天然的Skia支持；

• iOS: 嵌入到Flutter的 iOS SDK中，代替了iOS闭源的Core Graphics/Core Animation/Core Text，这也正是 iOS App包体积比Android要大一些的原因。

• Skia 优点

  Skia一致了各个系统的烘托逻辑, 保证同一套代码在Android和iOS平台上的烘托作用是完全一致的。

Flutter界面烘托进程

1. 页面中的Widget以树的方式组织成控件树。
2. 为控件树中的每个Widget创建不同类型的烘托目标(RenderObject)，组成烘托目标树。
3. 烘托目标树展现进程分为四个阶段：布局、制作、组成和烘托。

   

布局

1. Flutter采用深度优先遍历烘托目标树，决议烘托目标树中各烘托目标在屏幕上的位置和尺度。
2. 烘托目标树中的每个烘托目标都会接纳父目标的布局约束参数，决议自己的巨细，
3. 父目标依照控件逻辑决议各个子目标的位置，完结布局进程。

Flutter在某些节点设置布局鸿沟（Relayout Boundary），当鸿沟内的任何目标发生从头布局时，不会影响鸿沟外的目标。

制作

• 把烘托目标制作到不同的图层上。
• 制作进程也是深度优先遍历，先制作本身，再制作子节点。

以下图为例：节点1在制作完本身后，会再制作节点2，然后制作它的子节点3、4和5，终究制作节点6。

子节点5与它的兄弟节点6处于了同一层，当节点2重绘的时候，与其无关的节点6也会被重绘，带来功能损耗。

为了解决这一问题，Flutter运用重绘鸿沟（Repaint Boundary), Flutter强制切换新的图层，避免无关内容置于同一图层引起不必要的重绘。

Scrollview运用重绘鸿沟, 保证滚动时只重绘可视内容，不可见内容不重绘。

组成

• Flutter的烘托树层级很多，直接交付给烘托引擎进行多图层烘托，会呈现很多烘托内容的重复制作，
• 图层组成: 将一切的图层根据巨细、层级、透明度等规矩核算出终究的显现作用，将相同的图层归类合并，简化烘托树，进步烘托功率。

烘托

组成完结后，Flutter将几何图层数据交由Skia引擎加工成二维图画数据，终究交由GPU进行烘托，完结界面的展现。