自繪引擎時代，爲何Flutter能突出重圍？

導語 | Flutter 框架是當下很是熱門的跨端解決方案，可以幫助開發者經過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面等多端開發。但仍然有不少產品、設計、甚至開發同窗並不瞭解 Flutter，因此本文將深刻淺出和你們聊聊 Flutter 的設計背景、技術特色，以及與其餘同類技術之間的對比，但願與你們一同交流。

1、跨平臺背景

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 容器方案要高得多）。

2、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…

3、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 目前還不支持。