導語 | Flutter 框架是當下非常熱門的跨端解決方案，能夠幫助開發者通過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面等多端開發。但仍然有很多產品、設計、甚至開發同學並不瞭解 Flutter，所以本文將深入淺出和大家聊聊 Flutter 的設計背景、技術特點，以及與其他同類技術之間的對比，希望與大家一同交流。
一、跨平臺背景
1. 移動互聯網的重要性
如上圖所示，與2019年1月相比，全球使用互聯網的人數已增加到45.4億，增長了7％（2.98億新用戶）。
到2020年1月，全球有38億社交媒體用戶，與去年同期相比，這個數字增長了9％以上（3.21億新用戶）。
在全球範圍內，現在有超過51.9億人使用手機，在過去的一年中，用戶數量增加了1.24億（2.4％）。
現在，普通的互聯網用戶每天在線花費6個小時43分鐘，相當於每個互聯網用戶每年連接時間超過100天。如果我們每天需要大約8小時的睡眠，那就意味着醒來的時間中，有40％以上是通過互聯網度過的。
在移動互聯網的浪潮下，開發效率和使用體驗可以說是同等重要。但是，使用原生的方式來開發 App，就要求我們必須針對 iOS 和 Android 這兩個平臺分別開發。
這樣就導致了我們不僅需要在不同的項目間嘗試用不同的語言去實現同樣的功能，還要承擔由此帶來的維護任務。如果還要繼續向其他平臺（比如 Web、Mac 或 Windows）拓展的話，需要付出的時間和成本將成倍增長。而這，顯然是難以接受的。於是，跨平臺開發的概念順勢走進了大家的視野。
從本質上講，跨平臺開發是爲了增加業務代碼的複用率，減少因爲要適配多個平臺帶來的工作量，從而降低開發成本。
2. 跨平臺開發方案的三個時代
根據實現方式的不同，業內常見的觀點是將主流的跨平臺方案劃分爲三個時代。
（1）Web 容器時代
基於 Web 相關技術通過瀏覽器組件來實現界面及功能，典型的框架包括 Cordova(PhoneGap)、Ionic 和微信小程序。
Web 時代的方案，主要採用的是原生應用內嵌瀏覽器控件 WebView 的方式進行 HTML5 頁面渲染。
由於採用了 Web 開發技術，社區和資源非常豐富，開發效率也很高。但是，一個完整 HTML5 頁面的展示要經歷瀏覽器控件的加載、解析和渲染三大過程，性能消耗要比原生開發增加 N 個數量級。
（2）泛 Web 容器時代
採用類 Web 標準進行開發，但在運行時把繪製和渲染交由原生系統接管的技術，代表框架有 React Native、Weex 和快應用，廣義的還包括天貓的 Virtual View 等。
泛 Web 容器時代的解決方案優化了 Web 容器時代的加載、解析和渲染這三大過程，把影響它們獨立運行的 Web 標準進行了裁剪，以相對簡單的方式支持了構建移動端頁面必要的 Web 標準（如 Flexbox 等），也保證了便捷的前端開發體驗。
同時，採用原生自帶的 UI 組件實現代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。
也就是說，在泛 Web 容器時代，我們仍然採用前端友好的 JavaScript 進行開發，整體加載、渲染機制大大簡化，並且由原生接管繪製，即將原生系統作爲渲染的後端，爲依託於 JavaScript 虛擬機的 JavaScript 代碼提供所需要的 UI 控件的實體。
這也是現在絕大部分跨平臺框架的思路，而 React Native 和 Weex 就是其中的佼佼者。總結起來其實就是利用 JS 來調用 Native 端的組件，從而實現相應的功能。
（3）自繪引擎時代
自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業務邏輯到功能呈現的多端高度一致的渲染體驗。Flutter，是爲數不多的代表。
這一時期的代表 Flutter 開闢了一種全新的思路，即從頭到尾重寫一套跨平臺的 UI 框架，包括渲染邏輯，甚至是開發語言。
渲染引擎依靠跨平臺的 Skia 圖形庫來實現，Skia 引擎會將使用 Dart 構建的抽象的視圖結構數據加工成 GPU 數據，交由 OpenGL 最終提供給 GPU 渲染，至此完成渲染閉環，因此可以在最大程度上保證一款應用在不同平臺、不同設備上的體驗一致性。
而開發語言選用的是同時支持 JIT（Just-in-Time，即時編譯）和 AOT（Ahead-of-Time，預編譯）的 Dart，不僅保證了開發效率，更提升了執行效率（比使用 JavaScript 開發的泛 Web 容器方案要高得多）。
二、Flutter 的前世今生
1. Flutter 出現的歷史背景
爲不同的操作系統開發擁有相同功能的應用程序，開發人員只有兩個選擇：
-
使用原生開發語言（即 Java 和 Objective-C），針對不同平臺分別進行開發；
-
使用跨平臺解決方案，對不同平臺進行統一開發。
原生開發方式的體驗最好，但研發效率和研發成本相對較高；而跨平臺開發方式研發雖然效率高，但爲了抹平多端平臺差異，各類解決方案暴露的組件和 API 較原生開發相比少很多，因此研發體驗和產品功能並不完美。
所以，最成功的跨平臺開發方案其實是依託於瀏覽器控件的 Web。瀏覽器保證了 99% 的概率下 Web 的需求都是可以實現的，不需要業務“將就”技術。
不過，Web 最大的問題在於它的性能和體驗與原生開發存在肉眼可感知的差異，因此並不適用於對體驗要求較高的場景。
對於用戶體驗更接近於原生的 React Native，對業務的支持能力卻還不到瀏覽器的 5%，僅適用於中低複雜度的低交互類頁面。面對稍微複雜一點兒的交互和動畫需求，開發者都需要 case by case 地去 review，甚至還可能要通過原生代碼去擴展才能實現。
帶着這些問題，我們終於迎來了本次的主角——Flutter。
Flutter 是構建 Google 物聯網操作系統 Fuchsia 的 SDK，主打跨平臺、高保真、高性能。開發者可以通過 Dart 語言開發 App，一套代碼可以同時運行在 iOS 和 Android 平臺。Flutter 使用 Native 引擎渲染視圖，並提供了豐富的組件和接口，這無疑爲開發者和用戶都提供了良好的體驗。
那麼，Flutter 是怎麼完成組件渲染的呢？
這需要從圖像顯示的基本原理說起。在計算機系統中，圖像的顯示需要 CPU、GPU 和顯示器一起配合完成：CPU 負責圖像數據計算，GPU 負責圖像數據渲染，而顯示器則負責最終圖像顯示。
隨後視頻控制器會以每秒 60 次的速度，從幀緩衝區讀取幀數據交由顯示器完成圖像顯示。
可以看到，Flutter 關注如何儘可能快地在兩個硬件時鐘的 VSync 信號之間計算併合成視圖數據，然後通過 Skia 交給 GPU 渲染：UI 線程使用 Dart 來構建視圖結構數據，這些數據會在 GPU 線程進行圖層合成，隨後交給 Skia 引擎加工成 GPU 數據，而這些數據會通過 OpenGL 最終提供給 GPU 渲染。
2. 關於Skia
Skia是一個開源的 2D 圖形庫，提供各種常用的API，並可在多種軟硬件平臺上運行。谷歌Chrome瀏覽器、Chrome OS、安卓、Flutter、火狐瀏覽器、火狐操作系統以及其它許多產品都使用它作爲圖形引擎。
Skia 在圖形轉換、文字渲染、位圖渲染方面都表現卓越，並提供了開發者友好的 API。
因此，架構於 Skia 之上的 Flutter，也因此擁有了徹底的跨平臺渲染能力。通過與 Skia 的深度定製及優化，Flutter 可以最大限度地抹平平臺差異，提高渲染效率與性能。
底層渲染能力統一了，上層開發接口和功能體驗也就隨即統一了，開發者再也不用操心平臺相關的渲染特性了。也就是說，Skia 保證了同一套代碼調用在 Android 和 iOS 平臺上的渲染效果是完全一致的。
同樣的在界面渲染、繪製的過程中，Flutter也做了很多優化處理，提升合成、渲染效率。
3. FLutter的優勢
（1）在所有的平臺下，都可以保持同樣UI樣式，同樣的業務邏輯
大多數跨平臺框架中的UI呈現如下圖所示：
而Flutter是直接畫在畫布上：
（2）減少開發所需的時間
-
Flutter的熱重載可以高效快速的看到改變，甚至保留應用狀態；
-
官方提供的各種現成的組件（Material和Cupertino）。
（3）快速迭代上線
不需要單獨適配 iOS、Android 雙端的 UI 層面。
（4）更接近native的性能表現
Flutter不依賴任何中間代碼，最終直接構建成機器碼，提高了性能。
（5）自定義複雜動畫
Flutter最大的優勢之一就是可以定製你在屏幕上看到的任何東西，不管它有多複雜。
（6）有自己的渲染引擎
Flutter使用Skia將界面渲染到平臺提供的畫布上，意味着不需調整，即可遷移到其他平臺。
（7）更方便調用native api
獲取GPS座標、藍牙通信、收集傳感器數據、權限處理等，未支持的也可通過platform channel 。
（8）更高的潛力
iOS、Android、Web、Desktop…
三、Flutter 與 React Native (Hippy)
1. UI方面
在新舊設備上也能保持一致
android 5.1
android 8.1
Flutter動畫效果：
2. 性能方面
基於 ListView ，我們做了一個基準測試。在 ListView 中，有1000個元素，並且到達列表最後一個元素的滾動時間相同，這裏使用到了一些第三方庫：
-
ios Nuke
-
Android Glide
-
react native React-native-fast-image
結果展示：
3. Flutter缺點
-
開發者社區的規模和第三方庫
-
持續集成的能力
-
APK的大小
-
Dart語言學習成本
-
動態更新能力
Q&A
Q：Flutter 和 Hippy 有什麼區別，爲什麼用 Flutter，不用 Hippy？
A： 第一，Flutter開發效率高，可減少客戶端開發時間；第二，Flutter 在跨端UI差異小；第三，Flutter 動畫支持很全面；第四，它更接近native。
Q：Flutter 和 Hippy 在方案選型上有一些差異，比如自定義 UI 組件性能方面有哪些差異，接口怎麼通信？
A：Flutter 自定義 UI 組件 platformview 的性能還有待提升，接口通信方面，Hippy 與客戶端通過 jsbridge，而 Futter 是通過 methodchannel 。
Q：Flutter 爲什麼暫時還不支持動態更新？
A：初期考慮到應用安全和蘋果方面的策略，所以不支持動態更新。現在 Android 端可以通過整包方式實現動態更新， iOS 目前還不支持。