面試官：你有用過Flutter嗎? Flutter架構是怎麼樣，爲何會比其餘如ReactNative好

面試官: 你有用過Flutter嗎? Flutter架構是怎麼樣，爲何會比其餘如ReactNative好
心理分析： 面試官所在的項目是用Flutter 開發的，或者正在轉Flutter這種技術。若是你不會，面試官在第一眼會認爲後面來應聘的人或許會、爲了杜絕這種狀況發生，你必定要說之前研究過，寫過相關代碼。其實」有用過Flutter「對大多數求職只是 會與不會 的問題。這不是面試官 想了解的。面試官的重點 你瞭解的有多深。
接下來，會問你他的原理 你是怎麼看。 它的優缺點。爲何比其餘的好。從原理層來解析。這纔是最難的。
這篇文章 從原理層說明他們的區別
求職者: 應該作好被虐的準備。若是看了這篇文章，應付下來基本沒有多大的問題
在Flutter誕生以前，已經有許多跨平臺UI框架的方案，好比基於WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

更多面試內容，面試專題，flutter視頻 全套，音視頻從0到高手開發。
關注GitHub：https://github.com/xiangjiana/Android-MS
免費獲取面試PDF合集
VX：mm14525201314

1.0 框架架構

反觀Flutter

首先看一下Flutter的架構圖

1.1 Flutter三層架構

Framework
Engine
Embedder

1.Framework使用dart實現，包括Material Design風格的Widget,Cupertino(針對iOS)風格的Widgets，文本/圖片/按鈕等基礎Widgets，渲染，動畫，手勢等。此部分的核心代碼是:flutter倉庫下的flutter package，以及sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package。

2.Engine使用C++實現，主要包括:Skia,Dart和Text。Skia是開源的二維圖形庫，提供了適用於多種軟硬件平臺的通用API

3.Embedder是一個嵌入層，即把Flutter嵌入到各個平臺上去，這裏作的主要工做包括渲染Surface設置,線程設置，以及插件等。從這裏能夠看出，Flutter的平臺相關層很低，平臺(如iOS)只是提供一個畫布，剩餘的全部渲染相關的邏輯都在Flutter內部，這就使得它具備了很好的跨端一致性。

從架構圖能夠看出，從頭至尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發語言。渲染引擎依靠跨平臺的Skia圖形庫來實現，依賴系統的只有圖形繪製相關的接口，能夠在最大程度上保證不一樣平臺、不一樣設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高得多

1.2 、萬物皆widget

目前上主流的思想，都但願將各個ui控件接耦，慢慢演變出組件化的思想。

Flutter控件主要分爲兩大類，

• StatelessWidget
• StatefulWidget，

StatelessWidget用來展現靜態的文本或者圖片，若是控件須要根據外部數據或者用戶操做來改變的話，就須要使用StatefulWidget。

State的概念也是來源於Facebook的流行Web框架React，React風格的框架中使用控件樹和各自的狀態來構建界面，當某個控件的狀態發生變化時由框架負責對比先後狀態差別而且採起最小代價來更新渲染結果。

1.3 繪圖基本原理

從下圖這裏能夠看出 Flutter和 React-Native之衆的本質區別：React-Native之類只是擴展調用 OEM組件，而 Flutter是本身渲染。

在 Flutter Architecture的解釋中，Google還提供了一張更爲詳盡的圖來解釋 Flutter的原理：

​ 這張圖解釋得更清晰一些：Flutter只關心向 GPU提供視圖數據，GPU的 VSync信號同步到 UI線程，UI線程使用 Dart來構建抽象的視圖結構，這份數據結構在 GPU線程進行圖層合成，視圖數據提供給 Skia引擎渲染爲 GPU數據，這些數據經過 OpenGL或者 Vulkan提供給 GPU。

​ 因此 Flutter並不關心顯示器、視頻控制器以及 GPU具體工做，它只關心 GPU發出的 VSync信號，儘量快地在兩個 VSync信號之間計算併合成視圖數據，而且把數據提供給 GPU。

1.4 Flutter面試會出現的幾個問題

瞭解 Flutter的基本概念後，天然有幾個疑問亟待解決。

1.4.1 爲何使用 Dart？能說說其中的緣由嗎

• Dart 的性能更好。Dart在 JIT模式下，速度與 JavaScript基本持平。可是 Dart支持 AOT，當以 AOT模式運行時，JavaScript便遠遠追不上了。速度的提高對高幀率下的視圖數據計算頗有幫助。
• Native Binding。在 Android上，v8的 Native Binding能夠很好地實現，可是 iOS上的 JavaScriptCore不能夠，因此若是使用 JavaScript，Flutter 基礎框架的代碼模式就很難統一了。而 Dart的 Native Binding能夠很好地經過 Dart Lib實現。
• Fuchsia OS，看起來不像緣由的一個緣由。Fuchsia OS內置的應用瀏覽器就是使用 Dart語言做爲 App的開發語言。並且實際上，Flutter是 Fuchisa OS的應用框架概念上的一個子集。（Flutter源代碼和編譯工具鏈也充斥了大量的 Fuchsia宏）
• Dart是類型安全的語言，擁有完善的包管理和諸多特性。Google召集了如此多個編程語言界的設計專家開發出這樣一門語言，旨在取代 JavaScript，因此 Fuchsia OS內置了 Dart。Dart能夠做爲 embedded lib嵌入應用，而不用只能隨着系統升級才能得到更新，這也是優點之一。

1.4.2 Skia是什麼？ 爲何Flutter會引入Skia

前面提到了 Flutter只關心如何構建視圖抽象結構，向 GPU提供視圖數據。Skia就是 Flutter向 GPU提供數據的途徑。

• Skia是一個 2D的繪圖引擎庫，其前身是一個向量繪圖軟件，Chrome和 Android均採用 Skia做爲繪圖引擎。Skia提供了很是友好的 API，而且在圖形轉換、文字渲染、位圖渲染方面都提供了友好、高效的表現。Skia是跨平臺的，因此能夠被嵌入到 Flutter的 iOS SDK中，而不用去研究 iOS閉源的 Core Graphics / Core Animation。
• Android自帶了 Skia，因此 Flutter Android SDK要比 iOS SDK小不少。

1.4.3 Flutter的架構是怎麼樣的，你是怎麼理解FLutter的架構

咱們可能只知道 Flutter作了什麼，始終都尚未從側面觀察 Flutter的整個架構設計，瞭解 Flutter如何去作。

這張圖瞭解過 Flutter的人可能不少地方都看過，這邊來詳細解釋一下：

Flutter Framework: 這是一個純 Dart實現的 SDK，相似於 React在 JavaScript中的做用。它實現了一套基礎庫， 用於處理動畫、繪圖和手勢。而且基於繪圖封裝了一套 UI組件庫，而後根據 Material 和Cupertino兩種視覺風格區分開來。這個純 Dart實現的 SDK被封裝爲了一個叫做 dart:ui的 Dart庫。咱們在使用 Flutter寫 App的時候，直接導入這個庫便可使用組件等功能。

Flutter Engine: 這是一個純 C++實現的 SDK，其中囊括了 Skia引擎、Dart運行時、文字排版引擎等。不過說白了，它就是 Dart的一個運行時，它能夠以 JIT、JIT Snapshot 或者 AOT的模式運行 Dart代碼。在代碼調用 dart:ui庫時，提供 dart:ui庫中 Native Binding 實現。 不過別忘了，這個運行時還控制着 VSync信號的傳遞、GPU數據的填充等，而且還負責把客戶端的事件傳遞到運行時中的代碼。

在瞭解屏幕繪圖的基本原理和 Flutter的一個總體概念後，咱們下面詳細地來看一下 Flutter的大概實現。

要理解 Flutter的原理，咱們從 entry point開始看 Flutter的代碼。因爲應用框架大同小異，因此下文說起 Flutter的代碼即指代 Flutter Engine的代碼，而非 Flutter Dart Framework代碼。

下圖是我簡單整理了一下 Flutter應用啓動後的執行順序

• 在應用的 View Controller 初始化後，會實例化一個 Flutter project的抽象（如下簡稱 project）。project會初始化一個 platform view的抽象實例，這個抽象實例會負責建立 Flutter 的運行時（如下簡稱 engine）。
• 當 View Controller將要顯示時，調用 project查找和組合 Flutter的應用資源 bundle，而且把資源提供給 engine。
• engine在真正須要執行資源 bundle時纔會建立 Dart執行的環境（懶加載，如下簡稱 Dart Controller），而後設置視圖窗口的一些屬性等東西（這是繪圖引擎必需的）。
• 而後 engine中的 Dart Controller會加載 Dart代碼並執行，執行的過程當中會調用 dart:ui的 native binding實現向 GPU提供數據。

1.4.4 Flutter SDK體積爲何很是大？這個你知道嗎

• Flutter應用的體積由兩部分組成：應用代碼和 SDK代碼。應用代碼是 Dart編譯後的代碼，若是作成可動態下發，那麼這部分能夠不計。
• SDK代碼比較大就有點無奈了，SDK的組成部分有 Dart VM，Dart標準庫，libwebp、libpng、libboringssl等第三方庫，libskia，Dart UI庫，而後再加上 icu_data，可能在單 arch下（iOS），SDK體積達到 40+MB。其中僅僅 Dart VM（不包含標準庫）就達到了 7MB。
• Flutter SDK是 dynamic framework，如此大的二進制體積可能會形成動態連接耗時長。而若是靜態連接，可能原來比較大的 App頗有可能形成 TEXT段超標。

1.4.5 Flutter能夠跑多個實例嗎？(連環炮)

能夠的。

• Dart毫無疑問是一門優秀的編程語言，我也曾嘗試將 Dart獨立出來做爲一個通用的 SDK。
• Dart SDK託管在 chromium項目中，而且提供了 cross building的選項。原版即提供了 Android Build腳本。但在 iOS上原版行不通，猜想主要是標準庫的問題。
• 在 Flutter iOS項目中，Dart 標準庫提供了一份徹底不一樣的實現。並且，想要把 Dart VM和標準庫從 Flutter剝離出來，太困難了。而且單個 arch下，Dart VM加標準庫的體積是 > 10MB的。

更多面試內容，面試專題，flutter視頻 全套，音視頻從0到高手開發。
關注GitHub：https://github.com/xiangjiana/Android-MS
免費獲取面試PDF合集