【CSDN 編者按】去年Google 推出了 Flutter ，其目標是為了解決移動中的兩個重要問題：一是實現原生應用的性能和與平臺的集成，二是提供一個多平臺，可移植的 UI 工具包來支持高效的應用開發。
那麼它底層實現架構是怎麼樣的呢？一來看看吧。
Android 的前生今世
Android 系統作為全球第一大系統，基於 Java 開發的移動端有著諸多的性能優勢。
但由於2018年前 H5 的性能瓶頸和 React-Native 的一系列缺點（動畫性能、第三方依賴、邏輯上的額外開銷、調試的困難、不能完全屏蔽原生平臺等）導致業界對跨平臺開發失去信心。
直到 2018 年 10 月 Google 推出首個 Flutter 跨平臺解決方案，打破整個移動開發的方向。
為什麼 Flutter 成為 Android 方向標
Flutter 有以下優點：
- 跨平臺性: Flutter 基於圖像繪製引擎進行渲染，在不同平臺下繪製效果是絕對一致的，能做到真正的跨平臺，一處寫處處運行。
- 性能優異性: 不同於 H5 通過 DOM 渲染 和 RN 映射組件，Flutter 直接基於 Native 進行繪製，在性能上完全能超過原生。
- 熱重載性: Android 原生開發時會遇到“編譯-打包-安裝”這三部曲。開發效率遲遲得不到提升。熱重載技術在 Flutter 內完美體現。
Flutter 詳細介紹
Flutter 架構圖
- Dart 語法編譯
- Dart 是一種強類型、跨平臺的客戶端開發語言。具有專門為客戶端優化、高生產力、快速高效、可移植易學的風格。Dart 主要由 Google 負責開發和維護。
- Flutter 插件
- Flutter 使用的 Dart 語言無法直接調用 Android 系統提供的 Java 接口，這時就需要使用插件來實現中轉。Flutter 官方提供了豐富的原生接口封裝。
- Skia 圖像處理引擎
- 2005 年 Skia 圖像處理引擎成立，用來展示 Chrome 火狐 和其他 Google 自家的產品使用。2007 年 第一個 Android 系統問世，於是 Google 開發者將 Skia 移植到 Android 平臺。Skia 作為一個 2D 的圖形系統，包括繪圖、渲染、顯示圖片都是用 Skia 完成。
7.Skia 引擎詳解圖：
為什麼 Flutter 會實現三大特性
Flutter 實現以下三大特性：
跨平臺
性能優異
渲染流程
React 渲染與 Flutter 渲染相同點
React 渲染與 Flutter 渲染不同點
- 繪製樹：ReactNative 基於 ReactShadow 的鏈式結構在內存中形成一個虛擬的 Dom 樹，Flutter 是通過引擎實現不同圖層的渲染方式。
- 機制不一樣：ReactNative 最終被反射成原生控件，而 Flutter 是底層通過引擎直接渲染，不存在映射的說法。
Flutter 渲染
在 Flutter 界面渲染過程分為三個階段：佈局、繪製、合成，佈局和繪製在 Flutter 框架中完成合成則交由引擎負責。
Flutter優勢
在 Flutter 的響應式框架中，控件樹中的控件直接通過可移植的圖形加速渲染引擎、高性能的本地 ARM 代碼進行繪製，不再需要通過虛擬 DOM 或虛擬控件、真實 DOM 或平臺控件這些中間對象來繪製。
Flutter 響應式框架通過“無中間商賺差價”的⽅式直接利⽤硬件的所有性能，所以正如前⾯所說的，Flutter 應⽤的性能比原生 App 更加優秀。
相對於幾大跨平臺框架，個人還是很看好 Flutter 的。畢竟是 Google 的親兒子嘛，還是可以先入坑的，自己動手寫一個 Flutter App 出來。在不同設備上跑一下，自己體驗一下。
來源：https://juejin.im/post/5c91f0f25188256b7463868e
閱讀更多 CSDN 的文章
