第一章 渲染管线

就像工程流水线上的工人一样，一个画面帧(frame)就是是这条产线最终的产品。产线上的每一个环节有会产生一个中间产出物，这些产出物的名字依次叫三棵树(widget树/element树和layer树)、图层树和上屏(即光栅化)，前两人呆在一个叫CPU的车间里，最后面这个人呆在一个叫GPU的车间里面。

​ 图一 flutter渲染流水线

Flutter app中的线程

参考:https://flutter.cn/docs/perf/ui-performance

平台线程

平台线程实际上就是主线程。Plugin 的代码将会在这里运行。想要了解更多信息，请参阅 Android 的 MainThread 以及 iOS 的 UIKit 文档。

UI 线程

UI 线程在 Dart VM 中执行 Dart 代码。该线程包括开发者写下的代码和 Flutter 框架根据应用行为生成的代码。当应用创建和展示场景的时候，UI 线程首先建立一个 图层树（layer tree） ，一个包含设备无关的渲染命令的轻量对象，并将图层树发送到 GPU 线程来渲染到设备上。 不要阻塞这个线程！ 在性能图层的最低栏展示该线程。

Raster 线程（以前叫 GPU 线程）

raster 线程拿到 layer tree，并将它交给 GPU（图形处理单元）。你无法直接与 GPU 线程或其数据通信，但如果该线程变慢，一定是开发者 Dart 代码中的某处导致的。图形库 Skia 在该线程运行，并在性能图层的最顶栏显示该线程。这个线程之前被叫做「GPU 线程」，因为它为 GPU 进行栅格化，但我们重新将它命名为「raster 线程」，这是因为许多开发者错误的（但是能理解）认为该线程运行在 GPU 单元。

I/O线程

执行昂贵的操作（常见的有 I/O）以避免阻塞 UI 或者 raster 线程。这个线程将不会显示在性能调试工具performance overlay 上。

​ 图二 线程与渲染流水线的对应关系