起源
我們從官網的介紹開始說起。
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter 是 Google 的 UI 工具包，用於從單個程式碼庫構建漂亮的、本地編譯的移動、web 和桌面應用程式。
所以正如我們（看了很多網上的文章後）所知，Flutter是一個開源的、跨平臺的UI框架，用它開發的應用程式都具有高保真度和高效能表現。
但也許我們不知道或不太明白的是：
- 到底什麼是UI框架?
- 到底什麼是高保真度？
- 到底什麼是高效能表現？
- Flutter是如何做到跨平臺的？
- Flutter是如何做到高保真度的？
- Flutter是如何做到高效能表現的？
以上問題我們將各個擊破，不過在開始前我們先插播一段Flutter背景簡介~
Flutter背景簡介
Flutter的前身是 Google 內部孵化的Sky專案，於2014年10月在 GitHub 上開源一年後，於2015年10月正式更名為Flutter。
Flutter是眾多跨平臺框架中的一個，其不同之處在於採用了自繪UI+原生的實現方案，相比於H5+原生和JavaScript開發+原生渲染類的方案，這是一種更為徹底的方案，並且它天生具備兩大優點：
- 在不同平臺的 UI 表現可做到高保真度、高一致性
- 繪製 UI 的效能和原生控制元件接近
Flutter的目標在於做全平臺！開發者只需使用同一套基準程式碼，便可為移動平臺、桌面端和網頁端開發應用。而目前來看Flutter所支援或將支援的平臺已經有 Android、iOS、Fuchsia、Chrome OS，另外我認為未來支援鴻蒙OS（一款讓我們引以為傲的作業系統）也必將是件水到渠成的事~
更多背景相關知識我在拜讀的文章中貼出了連結，大家可自行食用。
到底什麼是UI框架?
我們把UI和框架拆開，分別來做解釋。
UI是User Interface的縮寫，是使用者介面的意思，但在我們軟體領域普遍的認識裡，UI設計實際是指軟體的人機互動、操作邏輯、介面美觀性的整體設計，所以UI就是指軟體的互動操作和視覺效果。
框架在百度百科上的釋義如下（大家感受下）：
框架（framework）是一個框子——指其約束性，也是一個架子——指其支撐性。是一個基本概念上的結構，用於去解決或者處理複雜的問題。
而在我們軟體領域，框架可以理解為是一個用來開發軟體的工具包，它已處理好了通用的、基礎性的工作，並且制定好了使用規則。
所以總結一下，UI框架就是指用來開發軟體的工具包，且該軟體可以帶有互動操作和美觀的視覺效果。
到底什麼是高保真度？
（這詞乍一看怪嚇人的，讓人頭皮發麻，萌生吐意?，誰叫我不是廈大的呢？）
高保真是聲音技術領域的專業術語，是指與原來的聲音高度相似的重放聲音。
但在我們軟體領域，高保真度其實就是高還原度的意思，旨在可以畫素級還原UI稿的互動與視覺效果。
到底什麼是高效能表現？
（以下說起效能的時候，都指的是在軟體開發領域~）
效能是個司空見慣的詞，但效能到底是什麼意思呢？可能在我們心中是既知道又說不清楚的含糊狀態。
效能的英文是Performance，它也有表現、工作情況的意思。
當說起效能的時候，我們都能聯想起一些關鍵詞，比如：啟動速度、記憶體使用優化、佈局優化、電量優化、包瘦身等等。
所以綜上可以感受出來，效能是一個軟體多維度指標表現情況的代名詞，高效能表現就是指軟體各項指標都表現優異。（該快的快、該少的少、該大的大?、該小的小）
Flutter是如何做到跨平臺的？
這裡搬出Flutter官方分層架構圖，在大的層次上，從上到下依次分為如下三層（可以看出 Framework 層內部又會分層）：
- Framework框架層：一個純
Dart實現的SDK（一套基礎庫），負責 UI 相關的事情，如：動畫、widget、繪圖、手勢、基礎能力等。（我們的應用就是圍繞這層來構建的）- 在該層內部 Foundation 和 Animation、Painting、Gestures 對應的是 Flutter 中的
dart:ui包，它是 Flutter 引擎暴露的底層 UI 庫，用來提供動畫、手勢及繪製等能力。
- 在該層內部 Foundation 和 Animation、Painting、Gestures 對應的是 Flutter 中的
- Engine引擎層：一個純
C++實現的SDK，主要包括 Skia 引擎（開源的二點陣圖形庫）、Dart 執行時、GC垃圾回收、編譯模式支援、Text 文字排版引擎等。 - Embedder嵌入器層：見名知意是將 Flutter 移植到各平臺的中間層程式碼，做好這一層的適配 Flutter 基本可以嵌入到任何平臺上去。它主要包括渲染Surface設定、原生平臺外掛、打包、執行緒管理、事件迴圈互動操作等。
所以可以看出在設計上Embedder層要做的工作就是隔離並適配不同平臺的差異，保證對上層暴露統一的API，以此來達到跨平臺的目的。無論現在的Android、iOS還是未來的Fuchsia、鴻蒙OS，亦或是其他嵌入式作業系統（比如樹莓派上的系統 Raspbian ），理論上 Flutter 都是可以跨上去的?。
以上是針對跨作業系統而言的，在最近剛發步的 Flutter 1.9 中Flutter for web的支援雖然還處於預覽版，但 flutter_web 這個 repo 已經合併到了 flutter 的主 repo，這也是一個重要的里程碑了。那麼Flutter是如何做到支援Web的呢？
如架構圖所示，Framework 層在移動和 web 平臺是共享的，當然為了支援 web ，官方對dart:ui庫做了新的適配。然後便是使用基於 DOM、Canvas 和 CSS 的程式碼替換了移動平臺上 Skia 實現的引擎層，當我們為 Web 平臺編譯 Flutter 程式碼時，應用、Flutter 框架、以及 Web 版本的 dart:ui 庫都將編譯為 JavaScript ，可以執行在任何現代瀏覽器上。
Flutter是如何做到高保真度的？
根據前文這個問題可以轉化為：Flutter是如何做到可以畫素級還原UI稿的互動與視覺效果的？
這點首先得益於選擇了自繪UI的技術方向，基於這個方向 Flutter 在 Engine 層使用了跨平臺自繪引擎Skia和文字排版引擎來做底層渲染（或是for web 的引擎程式碼），在 Framework 層構建了一整套自己的UI系統，而不依賴任何原生的控制元件。如此一來，佈局、動畫、手勢、繪製等全權盡在掌控之中，要做到高保真也就手到擒來了。
下面引用《Flutter 實戰》一書中，關於 Skia 的一段描述：
Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函式庫，包含字型、座標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了非常友好的API，目前Google Chrome瀏覽器和Android均採用Skia作為其繪圖引擎。
Flutter是如何做到高效能表現的？
首先高或低是個相對的概念，而 Flutter 的高效能來自於兩個比較：
以下兩點引用自《Flutter 實戰》一書
- Flutter APP 採用 Dart 語言開發。Dart 在 JIT（即時編譯）模式下，速度與 JavaScript 基本持平。但是 Dart 支援 AOT，當以 AOT 模式執行時，JavaScript 便遠遠追不上了。速度的提升對高幀率下的檢視資料計算很有幫助。
- Flutter 使用自己的渲染引擎來繪製 UI ，佈局資料等由 Dart 語言直接控制，所以在佈局過程中不需要像 RN 那樣要在 JavaScript 和 Native 之間通訊，這在一些滑動和拖動的場景下具有明顯優勢，因為在滑動和拖動過程往往都會引起佈局發生變化，所以 JavaScript 需要和 Native 之間不停的同步佈局資訊，這和在瀏覽器中要 JavaScript 頻繁操作 DOM 所帶來的問題是相同的，都會帶來比較可觀的效能開銷。
文末
所以綜上所述，Flutter 到底是什麼呢？在我看來，它將是終端開發的未來。
個人能力有限，如有不正之處歡迎大家批評指出，我會虛心接受並第一時間修改，以不誤導大家。