1、概述
1、Flutter 是一个使用 Dart 语言开发的跨平台移动 UI 框架，通过自建绘制引擎，能高性能、高保真地进行 Android 和 IOS 开发。它通过自绘 UI，解决了之前 RN 和 weex 等类 RN 技术方案难以解决的多端一致性问题。Flutter 采用 Dart 语言开发、AOT 编译（iOS AOT/安卓JIT）。
2、Dart、 AOT 和精减的渲染管线，相对与 JavaScript 和 webview 的组合，具备更高的性能体验。
3、Flutter 界面是由 Widget 组成的，所有 Widget 组成 Widget Tree，界面更新时会更新 Widget Tree，然后再更新 Element Tree，最后更新 RenderObject Tree。
4、渲染流程：
Framework 层：Flutter 渲染在 Framework 层会有 Build、Wiget Tree、Element Tree、RenderObject Tree、Layout、Paint、Composited Layer 等几个阶段。
GPU 层：将 Layer 进行组合，生成纹理；原生使用 OpenGL 的接口向 GPU 提交渲染内容进行光栅化与合成的过程，在 Flutter 中是在其 C++ 层完成，使用的是 Skia 库。
5、提交到 GPU 进程后，合成计算，显示屏幕的过程和 Native 基本是类似的，因此性能也差不多。
2、Flutter 渲染
Flutter 渲染
以上可知 Flutter 渲染的分为 Framework 和 Engine。
应用是基于 Framework 层开发的：Flutter 重写了 UI 框架，从 UI 控件到渲染全部自己重新实现了。Framework 负责渲染中的 Build，Layout，Paint，生成 Layer 等环节。它不依赖 iOS、Android 平台的原生控件。
Engine 层是 C++ 实现的渲染引擎：Flutter 依赖 Engine（C++）层的 Skia 图形库与系统图形绘制相关接口，负责把 Framework 生成的 Layer 组合，生成纹理，然后通过 Open GL 接口向 GPU 提交渲染数据。
3、Flutter 的渲染过程
Flutter 的渲染过程
概述：
1、1-6 在收到系统 vsync 信号后，在 UI 线程中执行。主要涉及 Dart framework 中 Widget/Element/RenderObject 三颗树的生成以及承载绘制指令的 LayerTree 的创建。7-8 在 GPU 线程中执行，主要涉及光栅化合成上屏。
2、1-4 跟渲染没有直接关系，主要就是管理 UI 组件生命周期，页面结构以及 Flex layout 等相关实现。5-8 为渲染相关流程，其中 5-6 在 UI 线程中执行，产物为包含了渲染指令的 Layer tree，在 Dart 层生成 Layer，可以认为是整个渲染流程的前半部，属于生产者角色。7-8 把 dart 层生成的 Layer Tree，通过 window 透传到 Flutter engine 的 C++ 代码中，通过 flow 模块来实现光栅化并合成输出。可以认为是整个渲染流程的后半部，属于消费者角色。
网友评论