作者：個推iOS工程師 伊澤瑞爾

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比昌寧網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式昌寧網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務覆蓋昌寧地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

一、背景

目前，移動開發(fā)技術(shù)主要分為原生開發(fā)和跨平臺開發(fā)兩種。其中，原生應用是指在某個特定的移動平臺上，使用平臺所支持的開發(fā)工具和語言，直接調(diào)用系統(tǒng)提供的API所開發(fā)的應用。
原生開發(fā)的主要優(yōu)勢體現(xiàn)在：
1.可以快速訪問本平臺的全部功能，比如攝像頭、GPS等；
2.原生應用的速度快、性能高，而且可以實現(xiàn)比較復雜的動畫和繪制效果，用戶體驗較好。
原生開發(fā)的缺點也很明顯，主要體現(xiàn)在：
1.開發(fā)成本較高，不同的平臺必須維護不同的代碼，人力成本也會隨之增加；
2.有新的功能需要更新時，只能進行版本升級。
隨著移動互聯(lián)網(wǎng)的高速發(fā)展，在很多的業(yè)務場景下，傳統(tǒng)的純原生開發(fā)已經(jīng)不能滿足日益增長的業(yè)務需求，主要表現(xiàn)在以下兩個方面：
1.應用動態(tài)化的需求增大。當需求發(fā)生變化，或者是需要增加新的功能時，傳統(tǒng)的純原生應用開發(fā)只能通過版本的升級來更新內(nèi)容，然而應用的上架和審核都需要一定的時間。因此，開發(fā)人員迫切地希望進行應用內(nèi)容的更新時，可以不更新版本，提升工作效率。
2.業(yè)務需求變化快，開發(fā)成本變高。原生開發(fā)一般需要技術(shù)團隊對iOS、Android兩個開發(fā)平臺進行維護。當版本更新迭代時，開發(fā)和測試的成本都會增加。
針對上述兩個問題，跨平臺框架應運而生。

二、跨平臺技術(shù)簡介

針對上文提到的原生開發(fā)所面臨的問題，目前在IT界已經(jīng)誕生了很多跨平臺框架，主要分為三類：
1.H5+原生(Cordova、Ionic、微信小程序)；
2.JavaScript開發(fā)+原生渲染(React Native、Weex、快應用)；
3.自繪UI+原生(Flutter)。
在本文中，我們將對React Native、Weex和Flutter進行對比。
1.React Native
React Native是Facebook于2015年4月開源的跨平臺移動應用開發(fā)框架，是Facebook開源的JS框架React在原生移動應用平臺的衍生物。React Native使用了react的設(shè)計模式，但是其UI渲染、動畫效果、網(wǎng)絡(luò)請求等均是由原生來實現(xiàn)的。開發(fā)者編寫JS代碼，通過React Native的中間層轉(zhuǎn)化為原生控件，并進行操作。也就是說通過JS代碼來調(diào)用原生的組件，從而實現(xiàn)相應的功能。
React Native實現(xiàn)跨平臺的功能，主要由Java、C++和Javascript三層所構(gòu)成的。其中，C++實現(xiàn)的動態(tài)鏈接庫（.so），作為中間適配層橋接，實現(xiàn)了JS端與原生端的雙向通信交互。React Native會把應用的JS代碼編譯成一個JS文件，React Native整體框架目標就是為了解釋并運行這個JS腳本文件，如果是JS擴展的API，則直接通過bridge調(diào)用native；如果是UI界面，則映射到virtual DOM這個虛擬的JS數(shù)據(jù)結(jié)構(gòu)中，通過bridge傳遞到native，然后根據(jù)數(shù)據(jù)設(shè)置各個對應的真實native的View。

2.Weex
在Weex設(shè)計之初，開發(fā)者就考慮到，使其能夠在三端（iOS、安卓和H5）上均能得到展現(xiàn)。在最上面的DSL，阿里一般稱之為Weex文件（.we），通過Transform轉(zhuǎn)換為js-bundle，再部署到服務器，這樣服務端就完成了。在客戶端，第一層是JS-Framework，最后是RenderRengine。

如上圖所示，Weex的輸入是Virtual DOM，輸出是native或H5 view，還原為內(nèi)存中的樹型數(shù)據(jù)結(jié)構(gòu)，再創(chuàng)建view，把事件綁定在view上，設(shè)置view的基本屬性。Weex Render會分三個線程，不同的線程負責不同的事情，讓JS線程優(yōu)先保障流暢性。

表面上，Weex是一種客戶端技術(shù)，但實際上，它串聯(lián)起了從本地開發(fā)、云端部署到分發(fā)的整個鏈路。開發(fā)者可以在本地像編寫Web頁面一樣先編寫一個APP界面，然后通過命令行工具將之編譯為一段JavaScript代碼，生成一個Weex的JS bundle。與此同時，開發(fā)者可以將生成的JS bundle部署至云端，之后通過網(wǎng)絡(luò)請求或者預下發(fā)的方式加載至用戶的移動應用客戶端。
在移動應用客戶端，Weex SDK會準備一個JavaScript執(zhí)行環(huán)境，在用戶打開一個Weex頁面時，在該環(huán)境中執(zhí)行相應的JS bundle，并將執(zhí)行過程中產(chǎn)生的各種命令發(fā)送到native端，進行界面渲染、數(shù)據(jù)存儲、網(wǎng)絡(luò)通信、調(diào)用設(shè)備及用戶交互響應等。如果用戶希望使用瀏覽器訪問這個界面，那么他可以在瀏覽器中打開一個相同的Web頁面，這個頁面和移動應用使用相同的頁面源代碼，但被編譯成適合Web展示的JS Bundle，通過瀏覽器里的javaScript引擎及Weex SDK運行起來的。
3.Flutter
Flutter 是Google推出并開源的移動應用開發(fā)框架，主打跨平臺、高保真、高性能。開發(fā)者可以通過Dart語言進行APP開發(fā)，只需要一套代碼就可以同時構(gòu)建Android和iOS應用，并且可以達到與原生應用一樣的性能。Flutter還提供了豐富的組件、接口，開發(fā)者可以高效地為 Flutter添加native擴展。此外，F(xiàn)lutter還使用了Native引擎渲染視圖，為用戶提供了良好的體驗。
Flutter與用于構(gòu)建移動應用程序的其它多數(shù)框架不同，因為Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。相反，F(xiàn)lutter使用自己的高性能渲染引擎來繪制widget。這樣不僅可以保證在Android和iOS的UI一致性，而且也可以避免對原生控件依賴而帶來的限制和高昂的維護成本。
同時，F(xiàn)lutter使用Skia作為2D引擎渲染，Skia是Google的一個2D圖形處理函數(shù)庫，在字型、坐標轉(zhuǎn)換以及點陣圖等方面都有高效而且簡潔的表現(xiàn)。Skia是跨平臺的，并提供了非常友好的API。由于Android系統(tǒng)已經(jīng)內(nèi)置了Skia，所以Flutter在打包APK時，不需要再將Skia打包到APK中，但是iOS系統(tǒng)并未內(nèi)置Skia，所以在構(gòu)建API時，必須將Skia一起打包。

三、高性能的Flutter

目前，F(xiàn)lutter程序主要有兩種運行方式：靜態(tài)編譯與動態(tài)解釋。靜態(tài)編譯的程序在執(zhí)行前，會被全部翻譯為機器碼，通常將這種類型稱為AOT，即 “提前編譯”。解釋執(zhí)行則是一句句地邊翻譯邊運行，通常將這種類型稱為JIT，即“即時編譯”。
AOT程序的典型代表是用C/C++開發(fā)的應用，它們必須在執(zhí)行前編譯成機器碼。而JIT的代表則非常多，如JavaScript、python等。事實上，所有腳本語言都支持JIT模式。但需要注意的是，JIT和AOT指的是程序運行方式，和編程語言并非是強關(guān)聯(lián)的，有些語言既可以以JIT方式運行，也可以以AOT方式運行，如Java、Python，它們可以在第一次執(zhí)行時編譯成中間字節(jié)碼，然后在之后的執(zhí)行中，直接執(zhí)行字節(jié)碼。
Flutter的高性能主要靠兩點來保證，首先，F(xiàn)lutter APP采用Dart語言進行開發(fā)。當Dart在 JIT模式下時，其運行速度與 JavaScript基本持平。此外Dart支持 還AOT，當Dart在 AOT模式下事，其運行速度遠超JavaScript。速度的提升對高幀率下的視圖數(shù)據(jù)計算很有幫助。
其次，F(xiàn)lutter使用自己的渲染引擎來繪制UI，布局數(shù)據(jù)等由Dart語言直接控制，所以在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，在一些滑動和拖動的場景下具有明顯優(yōu)勢。由于滑動和拖動往往會引起布局的變化，所以JavaScript需要不停地與Native之間同步布局信息，這和在瀏覽器中要JavaScript頻繁操作DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

四、為什么Flutter會選擇Dart語言？

1.開發(fā)效率高。Dart運行時和編譯器支持Flutter的兩個關(guān)鍵特性的組合，分別是基于JIT的快速開發(fā)周期和基于AOT的發(fā)布包?；贘IT的快速開發(fā)周期：Flutter在開發(fā)階段，采用JIT模式，這樣就避免了每次改動都需要進行編譯，極大地節(jié)省了開發(fā)時間?；贏OT的發(fā)布包，F(xiàn)lutter在發(fā)布時可以通過AOT生成高效的ARM代碼，以保證應用性能。而JavaScript則不具備這個能力。
2.高性能。為了實現(xiàn)流暢、高保真的的UI體驗，F(xiàn)lutter必須在每個動畫幀中都運行大量的代碼。這意味著需要一種既能支持高性能，又能保證不丟幀的周期性暫停的語言，而Dart支持AOT，在這一點上比JavaScript更有優(yōu)勢。
3.快速分配內(nèi)存。Flutter框架使用函數(shù)式流，這使得它在很大程度上依賴于底層的內(nèi)存分配器。
4.類型安全。由于Dart是類型安全的語言，支持靜態(tài)類型檢測，所以可以在編譯前就發(fā)現(xiàn)一些類型的錯誤，并排除潛在問題。這對于前端開發(fā)者來說更具有吸引力。而JavaScript是一個弱類型語言，這也是為什么在諸多前端社區(qū)中，會有眾多為JavaScript代碼添加靜態(tài)類型檢測的擴展語言和工具。

五、Flutter框架結(jié)構(gòu)

Flutter Framework是一個完全由Dart語言構(gòu)建的SDK，它實現(xiàn)了一整套自底而上的基礎(chǔ)庫。
1.底部兩層(Foundation和Animation、Painting、Gestures)是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪制能力。
2.Rendering層是一個抽象的布局層，它依賴于dart UI層。Rendering層會構(gòu)建一個UI樹，當UI樹有變化時，它會隨即計算出有變化的部分，然后更新UI樹，最終將UI樹繪制到屏幕上。這個過程類似于React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分，它除了確定每個UI元素的位置、大小之外，還要進行坐標變換和繪制(調(diào)用底層dart:ui)。
3.Widgets層是Flutter提供的一套基礎(chǔ)組件庫，在基礎(chǔ)組件庫之上，F(xiàn)lutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。
Flutter Engine：這是一個完全由 C++實現(xiàn)的 SDK，其中包括了 Skia引擎、Dart運行時和文字排版引擎等。在代碼調(diào)用 dart:ui庫時，調(diào)用最終會走到Engine層，然后實現(xiàn)真正的繪制邏輯。
React Native、Weex和Flutter進行對比結(jié)果如下所示：

六、總結(jié)

從Flutter的設(shè)計理念來看，其整體架構(gòu)都是具有革命性的，相比于其他架構(gòu)，它實現(xiàn)了真正意義上的跨平臺。它能夠讓各平臺的體驗一致，并且讓用戶體驗達到更優(yōu)?，F(xiàn)如今，F(xiàn)lutter的各種UI庫和組件都在不斷增加，與之相關(guān)的各種生態(tài)系統(tǒng)和社區(qū)也在不斷完善，它對新的操作系統(tǒng)的適配性將會越來越強。相信在不久的將來，F(xiàn)lutter會慢慢成熟起來，成為主流的開發(fā)語言之一。

分享標題：淺談跨平臺框架Flutter的優(yōu)勢與結(jié)構(gòu)
當前URL：http://jinyejixie.com/article22/jopscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)建站、手機網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)