1、概述
1、Flutter 是一個(gè)使用 Dart 語(yǔ)言開(kāi)發(fā)的跨平臺(tái)移動(dòng) UI 框架，通過(guò)自建繪制引擎，能高性能、高保真地進(jìn)行 Android 和 IOS 開(kāi)發(fā)。它通過(guò)自繪 UI，解決了之前 RN 和 weex 等類 RN 技術(shù)方案難以解決的多端一致性問(wèn)題。Flutter 采用 Dart 語(yǔ)言開(kāi)發(fā)、AOT 編譯（iOS AOT/安卓JIT）。
2、Dart、 AOT 和精減的渲染管線，相對(duì)與 JavaScript 和 webview 的組合，具備更高的性能體驗(yàn)。
3、Flutter 界面是由 Widget 組成的，所有 Widget 組成 Widget Tree，界面更新時(shí)會(huì)更新 Widget Tree，然后再更新 Element Tree，最后更新 RenderObject Tree。
4、渲染流程：
Framework 層：Flutter 渲染在 Framework 層會(huì)有 Build、Wiget Tree、Element Tree、RenderObject Tree、Layout、Paint、Composited Layer 等幾個(gè)階段。
GPU 層：將 Layer 進(jìn)行組合，生成紋理；原生使用 OpenGL 的接口向 GPU 提交渲染內(nèi)容進(jìn)行光柵化與合成的過(guò)程，在 Flutter 中是在其 C++ 層完成，使用的是 Skia 庫(kù)。
5、提交到 GPU 進(jìn)程后，合成計(jì)算，顯示屏幕的過(guò)程和 Native 基本是類似的，因此性能也差不多。
2、Flutter 渲染
以上可知 Flutter 渲染的分為 Framework 和 Engine。
應(yīng)用是基于 Framework 層開(kāi)發(fā)的：Flutter 重寫了 UI 框架，從 UI 控件到渲染全部自己重新實(shí)現(xiàn)了。Framework 負(fù)責(zé)渲染中的 Build，Layout，Paint，生成 Layer 等環(huán)節(jié)。它不依賴 iOS、Android 平臺(tái)的原生控件。
Engine 層是 C++ 實(shí)現(xiàn)的渲染引擎：Flutter 依賴 Engine（C++）層的 Skia 圖形庫(kù)與系統(tǒng)圖形繪制相關(guān)接口，負(fù)責(zé)把 Framework 生成的 Layer 組合，生成紋理，然后通過(guò) Open GL 接口向 GPU 提交渲染數(shù)據(jù)。
3、Flutter 的渲染過(guò)程
概述：
1、1-6 在收到系統(tǒng) vsync 信號(hào)后，在 UI 線程中執(zhí)行。主要涉及 Dart framework 中 Widget/Element/RenderObject 三顆樹(shù)的生成以及承載繪制指令的 LayerTree 的創(chuàng)建。7-8 在 GPU 線程中執(zhí)行，主要涉及光柵化合成上屏。
2、1-4 跟渲染沒(méi)有直接關(guān)系，主要就是管理 UI 組件生命周期，頁(yè)面結(jié)構(gòu)以及 Flex layout 等相關(guān)實(shí)現(xiàn)。5-8 為渲染相關(guān)流程，其中 5-6 在 UI 線程中執(zhí)行，產(chǎn)物為包含了渲染指令的 Layer tree，在 Dart 層生成 Layer，可以認(rèn)為是整個(gè)渲染流程的前半部，屬于生產(chǎn)者角色。7-8 把 dart 層生成的 Layer Tree，通過(guò) window 透?jìng)鞯?Flutter engine 的 C++ 代碼中，通過(guò) flow 模塊來(lái)實(shí)現(xiàn)光柵化并合成輸出?？梢哉J(rèn)為是整個(gè)渲染流程的后半部，屬于消費(fèi)者角色。
