1拧揽、簡(jiǎn)介
Flutter 是 Google 推出并開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架慰照，主打跨平臺(tái)灶挟、高保真、高性能毒租。開(kāi)發(fā)者可以通過(guò) Dart 語(yǔ)言開(kāi)發(fā) App稚铣，一套代碼同時(shí)運(yùn)行在 iOS 和 Android 平臺(tái)。 Flutter 提供了豐富的組件墅垮、接口惕医，開(kāi)發(fā)者可以很快地為 Flutter 添加 Native（即原生開(kāi)發(fā)，指基于平臺(tái)原生語(yǔ)言來(lái)開(kāi)發(fā)應(yīng)用算色，flutter 可以和平臺(tái)原生語(yǔ)言混合開(kāi)發(fā)） 擴(kuò)展抬伺。
1、跨平臺(tái)自繪引擎
Flutter 與用于構(gòu)建移動(dòng)應(yīng)用程序的其他大多數(shù)框架不同灾梦，因?yàn)?Flutter 既不使用 WebView峡钓，也不使用操作系統(tǒng)的原生控件妓笙。 相反 Flutter 使用自己的高性能渲染引擎來(lái)繪制 Widget（組件）。這樣不僅可以保證在 Android 和 iOS 上 UI 的一致性能岩，也可以避免對(duì)原生控件依賴(lài)而帶來(lái)的限制及高昂的維護(hù)成本寞宫。
Flutter 底層使用 Skia 作為其 2D 渲染引擎，Skia 是 Google 的一個(gè) 2D 圖形處理函數(shù)庫(kù)拉鹃，包含字型辈赋、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖膏燕，它們都有高效能且簡(jiǎn)潔的表現(xiàn)钥屈。Skia 是跨平臺(tái)的，并提供了非常友好的 API煌寇，目前 Google Chrome 瀏覽器和 Android 均采用 Skia 作為其 2D 繪圖引擎焕蹄。
目前 Flutter 已經(jīng)支持 iOS逾雄、Android阀溶、Web、Windows鸦泳、macOS银锻、Linux、Fuchsia（Google 新的自研操作系統(tǒng)）等眾多平臺(tái)做鹰。
2击纬、高性能
Flutter 高性能主要靠?jī)牲c(diǎn)來(lái)保證：
1、Flutter App 采用 Dart 語(yǔ)言開(kāi)發(fā)钾麸。Dart 在 JIT（即時(shí)編譯）模式下更振，執(zhí)行速度與 JavaScript 基本持平。但是 Dart 支持 AOT饭尝，當(dāng)以 AOT 模式運(yùn)行時(shí)肯腕，JavaScript 便遠(yuǎn)遠(yuǎn)追不上了。執(zhí)行速度的提升對(duì)高幀率下的視圖數(shù)據(jù)計(jì)算很有幫助钥平。
2实撒、Flutter 使用自己的渲染引擎來(lái)繪制 UI ，布局?jǐn)?shù)據(jù)等由 Dart 語(yǔ)言直接控制涉瘾，所以在布局過(guò)程中不需要像 RN 那樣要在 JavaScript 和 Native 之間通信知态，這在一些滑動(dòng)和拖動(dòng)的場(chǎng)景下具有明顯優(yōu)勢(shì)，因?yàn)樵诨瑒?dòng)和拖動(dòng)過(guò)程往往都會(huì)引起布局發(fā)生變化立叛，所以 JavaScript 需要和 Native 之間不停地同步布局信息负敏，這和在瀏覽器中JavaScript 頻繁操作 DOM 所帶來(lái)的問(wèn)題是類(lèi)似的，都會(huì)導(dǎo)致比較可觀的性能開(kāi)銷(xiāo)秘蛇。
3原在、采用 Dart 語(yǔ)言開(kāi)發(fā)
兩個(gè)重要的概念：JIT 和 AOT友扰。
程序主要有兩種運(yùn)行方式：靜態(tài)編譯與動(dòng)態(tài)解釋。
靜態(tài)編譯：程序在執(zhí)行前程序會(huì)被提前編譯為機(jī)器碼（或中間字節(jié)碼）庶柿，通常將這種類(lèi)型稱(chēng)為 AOT （Ahead of time）即 提前編譯村怪。AOT 程序的典型代表是用 C/C++ 開(kāi)發(fā)的應(yīng)用，它們必須在執(zhí)行前編譯成機(jī)器碼浮庐。通常我們區(qū)分是否為 AOT 的標(biāo)準(zhǔn)是看代碼在執(zhí)行之前是否需要編譯甚负，只要需要編譯，無(wú)論其編譯產(chǎn)物是字節(jié)碼還是機(jī)器碼审残，都屬于AOT梭域。
動(dòng)態(tài)解釋?zhuān)菏窃谶\(yùn)行時(shí)將源碼實(shí)時(shí)翻譯為機(jī)器碼來(lái)執(zhí)行，通常將這種類(lèi)型稱(chēng)為 JIT（Just-in-time）即即時(shí)編譯搅轿。JIT 的代表則非常多病涨，如 JavaScript、python 等璧坟，事實(shí)上既穆，所有腳本語(yǔ)言都支持 JIT 模式。
需要注意的是 JIT 和 AOT 指的是程序運(yùn)行方式雀鹃，和編程語(yǔ)言并非強(qiáng)關(guān)聯(lián)的幻工，有些語(yǔ)言既可以以 JIT 方式運(yùn)行也可以以 AOT 方式運(yùn)行，如 Python黎茎，它可以在第一次執(zhí)行時(shí)編譯成中間字節(jié)碼囊颅，然后在之后執(zhí)行時(shí)再將字節(jié)碼實(shí)時(shí)轉(zhuǎn)為機(jī)器碼執(zhí)行。
下面是 Dart 語(yǔ)言的特性：
開(kāi)發(fā)效率高
Dart 運(yùn)行時(shí)和編譯器支持 Flutter 的兩個(gè)關(guān)鍵特性的組合：
基于 JIT 的快速開(kāi)發(fā)周期：Flutter 在開(kāi)發(fā)階段采用 JIT 模式傅瞻，這樣就避免了每次改動(dòng)都要進(jìn)行編譯踢代，極大地節(jié)省了開(kāi)發(fā)時(shí)間。
基于 AOT 的發(fā)布包：Flutter 在發(fā)布時(shí)可以通過(guò) AOT 生成高效的機(jī)器碼以保證應(yīng)用性能嗅骄。
高性能
Flutter 旨在提供流暢胳挎、高保真的 UI 體驗(yàn)。為了實(shí)現(xiàn)這一點(diǎn)掸读，F(xiàn)lutter 中需要能夠在每個(gè)動(dòng)畫(huà)幀中運(yùn)行大量的代碼串远。這意味著需要一種既能保證高性能，也不會(huì)出現(xiàn)丟幀的編程語(yǔ)言儿惫，而 Dart 支持 AOT澡罚，在這一點(diǎn)上可以做得比 JavaScript 更好。
快速內(nèi)存分配
Flutter 框架使用函數(shù)式流肾请，這使得它在很大程度上依賴(lài)于底層的內(nèi)存分配器留搔。因此，擁有一個(gè)能夠有效地處理瑣碎任務(wù)的內(nèi)存分配器將顯得十分重要铛铁，在缺乏此功能的語(yǔ)言中隔显，F(xiàn)lutter 將無(wú)法有效地工作却妨。當(dāng)然 Chrome V8 的 JavaScript 引擎在內(nèi)存分配上也已經(jīng)做的很好，事實(shí)上 Dart 開(kāi)發(fā)團(tuán)隊(duì)的很多成員都是來(lái)自 Chrome 團(tuán)隊(duì)的括眠，所以在內(nèi)存分配上 Dart 并不能作為超越 JavaScript 的優(yōu)勢(shì)彪标，而對(duì)于 Flutter 來(lái)說(shuō)，它需要這樣的特性掷豺，而 Dart 也正好滿足而已捞烟。
類(lèi)型安全和空安全
由于 Dart 是類(lèi)型安全的語(yǔ)言，且 2.12 版本后也支持了空安全特性当船，所以 Dart 支持靜態(tài)類(lèi)型檢測(cè)题画，可以在編譯前發(fā)現(xiàn)一些類(lèi)型的錯(cuò)誤，并排除潛在問(wèn)題德频，這一點(diǎn)對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)可能會(huì)更具有吸引力苍息。與之不同的，JavaScript 是一個(gè)弱類(lèi)型語(yǔ)言壹置。相比之下竞思，Dart 本身就支持靜態(tài)類(lèi)型，這是它的一個(gè)重要優(yōu)勢(shì)蒸绩。
2衙四、Flutter 框架結(jié)構(gòu)
Flutter 從上到下可以分為三層：框架層铃肯、引擎層和嵌入層患亿。
1、框架層
Flutter Framework押逼，即框架層步藕。這是一個(gè)純 Dart 實(shí)現(xiàn)的 SDK，它實(shí)現(xiàn)了一套基礎(chǔ)庫(kù)挑格，介紹如下：
1咙冗、Foundation 和 Animation、Painting漂彤、Gestures：在 Google 的一些視頻中被合并為一個(gè) dart UI 層雾消，對(duì)應(yīng)的是 Flutter 中的dart:ui包，它是 Flutter Engine 暴露的底層 UI 庫(kù)挫望，提供動(dòng)畫(huà)立润、手勢(shì)及繪制能力。
2媳板、Rendering 層桑腮，即渲染層，這一層是一個(gè)抽象的布局層蛉幸，它依賴(lài)于 Dart UI 層破讨，渲染層會(huì)構(gòu)建一棵由可渲染對(duì)象組成的渲染樹(shù)丛晦，當(dāng)動(dòng)態(tài)更新這些對(duì)象時(shí)，渲染樹(shù)會(huì)找出變化的部分提陶，然后更新渲染烫沙。渲染層可以說(shuō)是 Flutter 框架層中最核心的部分，它除了確定每個(gè)渲染對(duì)象的位置隙笆、大小之外還要進(jìn)行坐標(biāo)變換斧吐、繪制（調(diào)用底層 dart:ui ）。
3仲器、Widgets 層是 Flutter 提供的一套基礎(chǔ)組件庫(kù)煤率，在基礎(chǔ)組件庫(kù)之上，F(xiàn)lutter 還提供了 Material 和 Cupertino 兩種視覺(jué)風(fēng)格的組件庫(kù)乏冀，它們分別實(shí)現(xiàn)了 Material 和 iOS 設(shè)計(jì)規(guī)范蝶糯。
2、引擎層
Engine辆沦，即引擎層昼捍。毫無(wú)疑問(wèn)是 Flutter 的核心， 該層主要是 C++ 實(shí)現(xiàn)肢扯，其中包括了 Skia 引擎妒茬、Dart 運(yùn)行時(shí)（Dart runtime）、文字排版引擎等蔚晨。在代碼調(diào)用 dart:ui 庫(kù)時(shí)乍钻，調(diào)用最終會(huì)走到引擎層，然后實(shí)現(xiàn)真正的繪制和顯示铭腕。
3. 嵌入層
Embedder银择，即嵌入層。Flutter 最終渲染累舷、交互是要依賴(lài)其所在平臺(tái)的操作系統(tǒng) API浩考，嵌入層主要是將 Flutter 引擎 安裝 到特定平臺(tái)上。嵌入層采用了當(dāng)前平臺(tái)的語(yǔ)言編寫(xiě)被盈，例如 Android 使用的是 Java 和 C++析孽， iOS 和 macOS 使用的是 Objective-C 和 Objective-C++，Windows 和 Linux 使用的是 C++只怎。 Flutter 代碼可以通過(guò)嵌入層袜瞬，以模塊方式集成到現(xiàn)有的應(yīng)用中，也可以作為應(yīng)用的主體尝盼。Flutter 本身包含了各個(gè)常見(jiàn)平臺(tái)的嵌入層吞滞，假如以后 Flutter 要支持新的平臺(tái)，則需要針對(duì)該新的平臺(tái)編寫(xiě)一個(gè)嵌入層。
