wexxflutter的簡單介紹-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

wexxflutter的簡單介紹

有沒有大佬做過移動跨平臺框架的對比,h5 rn weex flutter，性能方面？

Flutter浪潮下的音視頻研發(fā)探索

文/陳爐軍

整理/LiveVideoStack

大家好，我是阿里巴巴閑魚事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對閑魚APP在當(dāng)下流行的跨平臺框架Flutter的大規(guī)模實踐，介紹其在音視頻領(lǐng)域碰到的一些困難以及解決方案。

分享內(nèi)容主要分為四個方面，首先會對Flutter有一個簡單介紹以及選擇Flutter作為跨平臺框架的原因，其次會介紹Flutter中與音視頻關(guān)系非常大的外接紋理概念，以及對它做出的一些優(yōu)化。之后會對閑魚在音視頻實踐過程中碰到的一些Flutter問題提出了一些解決方案——TPM音視頻框架。最后是閑魚Flutter多媒體開源組件的介紹。

Flutter

Flutter是一個跨平臺框架，以往的做法是將音頻、視頻和網(wǎng)絡(luò)這些模塊都下沉到C++層或者ARM層，在其上封裝成一個音視頻的SDK，供UI層的PC、iOS和Android調(diào)用。

而Flutter做為一個UI層的跨平臺框架，顧名思義就是在UI層也實現(xiàn)了一個跨平臺開發(fā)。可以預(yù)想的是未Flutter發(fā)展的好的話，會逐漸變?yōu)橐粋€從底層到UI層的一個全鏈路的跨平臺開發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開發(fā)。

在Flutter之前已經(jīng)有很多跨平臺UI解決方案，那為什么選擇Flutter呢？

我們主要考慮性能和跨平臺的能力。

以往的跨平臺方案比如Weex，ReactNative，Cordova等等因為架構(gòu)的原因無法滿足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場景。

而諸如Xamarin等，雖然性能可以和原生App一致，但是大部分邏輯還是需要分平臺實現(xiàn)。

我們可以看一下，為什么Flutter可以實現(xiàn)高性能：

原生的native組件渲染以IOS為例，蘋果的UIKit通過調(diào)用平臺自己的繪制框架QuaztCore來實現(xiàn)UI的繪制，圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。

而Flutter也是和原生API邏輯一致，也是通過調(diào)用底層的繪制框架層SKIA實現(xiàn)UI層。這樣相當(dāng)于Flutter他自己實現(xiàn)了一套UI框架，提供了一種性能超越原生API的跨平臺可能性。

但是我們說一個框架最終性能怎樣，其實取決于設(shè)計者和開發(fā)者。至于現(xiàn)在到底是一個什么狀況：

在閑魚的實踐中，我們發(fā)現(xiàn)在正常的開發(fā)沒有特意的去優(yōu)化UI代碼的情況下，在一些低端機上，F(xiàn)lutter界面的流暢性是比Native界面要好的。

雖然現(xiàn)在閑魚某些場景下會有卡頓閃退等情況，但是這是一個新事物發(fā)展過程中的必然問題，我們相信未來性能肯定不會成為限制Flutter發(fā)展的瓶頸的。

在閑魚實踐Flutter的過程中，混合棧和音視頻是其中比較難解決的兩個問題，混合棧是指一個APP在Flutter過程中不可能一口氣將所有業(yè)務(wù)全部重寫為Flutter，所以這是一個逐步迭代的過程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚在混合棧上也有一些比較好的輸出，例如FlutterBoost。

外接紋理

在講音視頻之前需要簡要介紹一下外接紋理的概念，我們將它稱之為是Flutter和Frame之間的橋梁。

Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號在Flutter的UI線程，通過AOT編譯的機器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹，Layer Tree上每一個葉子節(jié)點都代表了當(dāng)前屏幕上所需要渲染的每一個元素，包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程，在GPU線程內(nèi)調(diào)用Skia去完成整個UI的渲染過程。Layer Tree中有PictureLayer和TextureLayer兩個比較重要的節(jié)點。PictureLayer主要負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部實現(xiàn)了一套圖片解碼邏輯，在IO線程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過解碼能夠在IO線程上加載出紋理，交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場景下系統(tǒng)API太過繁多，業(yè)務(wù)場景過于復(fù)雜。Flutter沒有一套邏輯去實現(xiàn)跨平臺的音視頻組件，所以說Flutter提出了一種讓第三方開發(fā)者來實現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。

在整個Layer Tree渲染的過程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開發(fā)者來指定，可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter將這些數(shù)據(jù)渲染出來。

TextureLayer渲染過程：首先判斷Layer是否已經(jīng)初始化，如果沒有就創(chuàng)建一個Texture，然后將Texture Attach到一個SufaceTexture上。

這個SufaceTexture是音視頻的native代碼可以獲取到的對象，通過這個對象創(chuàng)建的Suface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中，然后Flutter端通過監(jiān)聽SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中，然后再將紋理交給SKIA渲染到屏幕上。

然而我們?nèi)绻枰肍lutter實現(xiàn)美顏，濾鏡，人臉貼圖等等功能，就需要將視頻數(shù)據(jù)讀取出來，更新到紋理中，再將GPU紋理經(jīng)過美顏濾鏡處理后生成一個處理后的紋理。按Flutter提供的現(xiàn)有能力，必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫入Surface中，這樣在Flutter中才能順利的更新到視頻數(shù)據(jù)，這樣做對系統(tǒng)性能的消耗很大。

通過對Flutter渲染過程分析，我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理，而我們經(jīng)過美顏濾鏡處理完成以后的結(jié)果也是GPU紋理，如果可以將它直接交給Flutter渲染，那就可以避免GPU-CPU-GPU這樣的無用循環(huán)。這樣的方法是可行的，但是需要一個條件，就是OpenGL上下文共享。

OpenGL

在說上下文之前，得提到一個和上線文息息相關(guān)的概念：線程。

Flutter引擎啟動后會啟動四個線程：

第一個線程是UI線程，這是Flutter自己定義的UI線程，主要負(fù)責(zé)GPU發(fā)出的VSync信號時候用當(dāng)前Dart編譯的機器碼和當(dāng)前運行環(huán)境創(chuàng)建出Layer Tree。

還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣，F(xiàn)lutter也采取一個線程責(zé)資源加載，一部分負(fù)責(zé)資源渲染這種思路。

兩個線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過Share Context來實現(xiàn)紋理共享，將IO線程的Context和GPU線程的Context進行Share，放到同一個Share Group下面，這樣兩個線程下資源是互相可見可以共享的。

Platform線程是主線程，F(xiàn)lutter中有一個很奇怪的設(shè)定，GPU線程和主線程共用一個Context。并且在主線程也有很多OpenGL 操作。

這樣的設(shè)計會給音視頻開發(fā)帶來很多問題，后面會詳細(xì)說。

音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺音視頻相關(guān)的OpenGL上下文處在一個Share Group下面。

由于Flutter主線程的Context就是GPU的Context，所以在音視頻端主線程中有一些OpenGL操作的話，很有可能使Flutter整個OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。

通過上述這兩個條件的處理，我們就可以在沒有增加GPU消耗的前提下實現(xiàn)美顏和濾鏡等等功能。

TPM

在經(jīng)過demo驗證之后，我們將這個方案應(yīng)用到閑魚音視頻組件中，但改造過程中發(fā)現(xiàn)了一些問題。

上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼，其中有兩個操作：首先是切進程，將后面的OpenGL操作都切到cameraQueue中。然后是設(shè)置一次上下文。然后這種限制條件或者說是潛規(guī)則往往在開發(fā)過程中容易被忽略的。而這個條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問題極難排查。因此我們就希望能抽象出一套框架，由框架本身實現(xiàn)線程的切換、上下文和模塊生命周期等的管理，開發(fā)者接入框架以后只需要安心實現(xiàn)自己的算法，而不需要關(guān)心這些潛規(guī)則還有其他一些重復(fù)的邏輯操作。

在引入Flutter之前閑魚的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu)：

1：底層是一些獨立模塊

2：SDK層是對底層模塊的封裝

3：最上層是UI層。

引入Flutter之后，通過分析各個模塊的使用場景，我們可以得出一個假設(shè)或者說是抽象：音視頻應(yīng)用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個模塊之間流動的過程，基于這種假設(shè)去做Flutter音視頻框架的抽象。

咸魚Flutter多媒體開源組件

整個Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。

管線，其實就是視頻幀流動的管道。數(shù)據(jù)，音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時間戳等。結(jié)合現(xiàn)有的應(yīng)用場景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，同時可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式，避免重復(fù)的創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理帶來的一些問題。也滿足一些特殊模塊對特殊數(shù)據(jù)的需求。同時也設(shè)計了紋理池來管理管線中的紋理數(shù)據(jù)。

模塊：如果把管線和數(shù)據(jù)比喻成血管和血液，那框架音視頻的場景就可以比喻成器官，我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個基類。這三個基類里實現(xiàn)了剛才說的線程切換，上下文切換，格式轉(zhuǎn)換等等共同邏輯，各個功能模塊通過集成自這些基類，可以避免很多重復(fù)勞動。

線程：每一個模塊初始化的時候，初始化函數(shù)就會去線程管理的模塊去獲取自己的線程，線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過其他模塊的線程。

這樣有三個好處：

一是可以根據(jù)需要去決定一個線程可以掛載多少模塊，做到線程間的負(fù)載均衡。第二，多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當(dāng)前線程內(nèi)而不會跑到主線程去，徹底避免Flutter的OpenGL 環(huán)境被破壞。第三，多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。

從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個模塊在初始化的時候會獲取它的線程，獲取之后會調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個模塊的上下文都是與Flutter的上下文進行Share的，每個模塊之間資源都是共享可見的，F(xiàn)lutter和音視頻native之間也是互相共享可見的。

基于上述框架如果要實現(xiàn)一個簡單的場景，比如畫面實時預(yù)覽和濾鏡處理功能，

1：需要選擇功能模塊，功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊，

2：需要配置模塊參數(shù)，比如采集分辨率、濾鏡參數(shù)和前后攝像頭設(shè)置等，

3：在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊

4：最后管線搭載模塊，開啟管線就可以實現(xiàn)這樣簡單的功能。

上圖為整個功能實現(xiàn)的代碼和結(jié)構(gòu)圖。

結(jié)合上述音視頻框架，閑魚實現(xiàn)了Flutter多媒體開源組件。

組要包含四個基本組件分別是：

1：視頻圖像拍攝組件

2：播放器組件

3：視頻圖像編輯組件

4：相冊選擇組件

現(xiàn)在這些組件正在走內(nèi)部開源流程。預(yù)計9月份，相冊和播放器會實現(xiàn)開源。

后續(xù)展望和規(guī)劃

1：實現(xiàn)開頭所說的從底層SDK到UI的全鏈路的跨端開發(fā)。目前底層框架層和模塊層都是各個平臺各自實現(xiàn)，反而是Flutter的UI端進行了跨平臺的統(tǒng)一，所以后續(xù)會將底層也按照音視頻常用做法把邏輯下沉到C++層，盡可能的實現(xiàn)全鏈路跨平臺。

2：第二部分內(nèi)容為開源共建，閑魚開源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開發(fā)者在基于Flutter開發(fā)音視頻應(yīng)用時可以充分利用閑魚開源出的音視頻模塊能力，搭建APP框架，開發(fā)者只要去負(fù)責(zé)實現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動。

移動APP開發(fā)框架盤點2：Web移動前端框架大全

開源項目其實有一個成熟周期，這個周期大概是三年左右，自React框架在2013年發(fā)布并引爆了前端框架的大潮，這個屬于前端的周期就此開始了。

之后在2015年5月開源的React Native又開啟了屬于Web移動前端的周期，15-16年，18-19年，21-22年正好就是屬于移動前端的三個爆發(fā)點。

三年前，在第一個成熟收獲期，我盤點了移動開發(fā)框架。在這第二個成熟收獲期，理所當(dāng)然要來盤點一波。

不過，當(dāng)我點開github項目的code-frequency時，還是被這個準(zhǔn)到嚇人的周期猜想驚呆了，先給你們看一波，剩下的自行驗證。

1、

2、

再來說第二個比較有意思的發(fā)現(xiàn)，停止維護的項目絕大多數(shù)是Vue框架項目。

盤點開始的時候我還覺得React框架處于絕對劣勢，到完成時我發(fā)現(xiàn)React無論在選擇面還是成熟度上都超過了Vue。

原因我這里就不分析了，反正大家都有自己的看法。

網(wǎng)頁類框架就是前端組件框架，這一次雖然有大量項目停止維護，但是也有很多項目堅持了下來，而且還涌現(xiàn)出了一批新項目。

大廠占了主導(dǎo)，因為這些年大廠在移動開發(fā)上的需求，遠(yuǎn)高于其它方面。個人項目要堅持確實不易。

本來是想要做一個驗證項目，把所有框架都試用一遍并給出推薦度的。由于進度太慢，還是下一次再發(fā)吧。

這次的重點是漸進類框架，就是所謂多端同構(gòu)框架（小程序框架）。這幾年國內(nèi)的重點的各種小程序平臺，所以多端框架的需求很是旺盛。

不過大多數(shù)先行者都沒挺過來還是讓我很意外，只有Taro成功了，想想還是有很多讓人唏噓的東西。

在這里還是先預(yù)測一波吧，因為這一類框架最變化最大，最終還是有很多框架要出局的。

漸進類框架是一個過渡性的產(chǎn)品，最終會變成橋接類框架的一部分，所以，與橋接類框架協(xié)同才是框架的出路。

這個賽道基本全是大廠了。

騰訊新一代跨端開發(fā)框架Hippy

Hippy一看就是淘寶Weex的對標(biāo)項目，Kpi功能全面壓制。所以官方支持 React 和 Vue 兩種主流前端框架。在Weex2019年實質(zhì)停更后發(fā)布，要不要這么卷？

Hippy 2.x 架構(gòu)主要分成三層，UI(JS) 層 Hippy-React 和 Hippy-Vue 負(fù)責(zé)驅(qū)動 UI 指令生成；中間層 C++ HippyCore 負(fù)責(zé)抹平平臺差異性和提供高性能模塊；渲染層 Android 和 iOS 負(fù)責(zé)提供終端底層模塊、組件，并與布局引擎通信。

對Weex慘遭遺棄，我上次就說過：「ReactNative提供工具，Weex提供框架，將平臺差異化屏蔽（Write Once, Run Everywhere）。所以Weex則注定功能相對弱小，并且坑比較多。」Weex最終下馬也是必然的，淘寶又發(fā)布升級版北海，為了實現(xiàn)（Write Once, Run Everywhere），它采用自繪，而且是基于Flutter自繪。

所以Hippy3.x就一如既往的Kpi功能層層加碼，很有騰訊風(fēng)格。在未來的 3.x 中業(yè)務(wù)與渲染層中的具體實現(xiàn)可根據(jù)用戶實際場景進行切換：業(yè)務(wù)層上不再局限于 JS 驅(qū)動，還可選擇（如：DSL/Dart/WASM 等）其它語言進行驅(qū)動；在渲染層中，渲染引擎除了支持現(xiàn)有原生（Native）渲染之外，還可以選擇其他渲染 Renderer，如 Flutter(Voltron) 渲染。

「Kraken 北海」是一款高性能Web渲染引擎。底層基于 Flutter 進行渲染。

Kraken 不限制上層開發(fā)者使用的框架，無論你是使用 Vue 、Rax 還是 React 都可以開發(fā) Kraken 應(yīng)用。

Kraken 的 runtime 通過 JS Engine Binding 的方式提供了一系列 Web 標(biāo)準(zhǔn)的 API 接口，調(diào)用相應(yīng) API 會執(zhí)行相關(guān)邏輯并創(chuàng)建一系列需要發(fā)送給 Dart 層處理的指令。

Kraken 其實就是一個小程序平臺，而且追求全平臺完全一致。我雖然認(rèn)為各平臺不一致是很自然的事情，但是也表示理解，畢竟別人吹牛有當(dāng)真的傳統(tǒng)（KFC表示認(rèn)同）。

Kraken 現(xiàn)在也是一個小號瀏覽器，所以它的主要工作就是摳標(biāo)準(zhǔn)，畢竟它是一款基于 W3C 標(biāo)準(zhǔn)的高性能渲染引擎。

最后，我勸淘寶領(lǐng)導(dǎo)定Kpi要理智些，畢竟Hippy4我還蠻期待的。

滴滴出品的超輕量級動態(tài)化跨端開發(fā)框架，主打輕量和實用。

Hummer 以 JS 引擎為基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等業(yè)內(nèi)知名 JS 引擎（這里本來還有個V8的，我刪除了，源碼里面沒有，Kpi需要）。再配合經(jīng)過調(diào)優(yōu)的 Yoga 布局引擎，抹平了兩端視圖布局差異（性能更佳的自研布局引擎開發(fā)中）。順便提一下，Hippy采用V8（功能更強）自研布局引擎（性能更佳）。

Hummer 的特點是拋棄了業(yè)界其他動態(tài)化跨端框架普遍使用的DSL層和VDOM層，因此原生 Hummer 不具備前端開發(fā)常用的響應(yīng)式編程的能力，但同時換來的是接近原生開發(fā)的體驗和性能。再以原生 Hummer 為基礎(chǔ)，在此之上開發(fā)了一套基于MVVM架構(gòu)的開發(fā)框架 —— Tenon ，通過 Tenon，可以把使用 Vue/React 編寫的代碼，轉(zhuǎn)換成原生 Hummer 的代碼。

Hummer也是一個小程序平臺，而且超輕量。如果想要無限提升自己APP的能力，可以考慮嵌入Hummer。

Web移動前端框架正在迎來第三個高速發(fā)展期，各類框架得到極大繁榮。

個人在具體項目的貢獻已經(jīng)微乎其微了，創(chuàng)新、架構(gòu)創(chuàng)新是唯一制勝的手段，這也是我看好React的根本原因。

最后，還是想做點微不足道的探索，現(xiàn)在前端組件庫層出不窮，更換組件庫帶來的代價有點大。想創(chuàng)建一個框架，來實現(xiàn)上次說的組件公約數(shù)和公倍數(shù)，無縫切換組件庫。理論上支持所有組件庫，也能為后來者提供彎道超車的機會。我想大廠可能沒有需求，也不會愿意發(fā)布這種框架，畢竟都是平臺部門說了算。

這個庫就是useMobile，當(dāng)然分為useMobileReact和useMobileVue。下次先發(fā)布useMobileReact。等我發(fā)布后，再來填上面表中缺的推薦度。

原文地址：

基于Weex的Flutter項目框架

最近在做的一個項目，項目的前期采用Weex開發(fā)。但是隨著交互復(fù)雜度的增加，Weex一處開發(fā)多處多處運行的特征并沒有很好的體現(xiàn)，相反很多時候我們還是需要做IOS和Android的適配。如今火熱的Flutter相比Weex和Rn來說，給出了更好的跨平臺解決方案。所以我們設(shè)計了一套基于Weex實現(xiàn)，底層跑在Flutter Engine上的框架。

底層的Runtime采用isolate engine,框架業(yè)務(wù)邏輯，Dom的解析邏輯和Render邏輯都跑在這里。

渲染引擎采用Flutter的Skia，徹底剝離了Android和IOS的差異性.

將Weex VirsualDom的解析都替換成Flutter Widget.

設(shè)計基于Weex2Dart的Brider,使JS和Dart可以相互調(diào)用

weex-demo的性能展示

release環(huán)境下采用AOT模式，性能會有質(zhì)的飛躍。

Android-Release版本只有10m大小

相比Weex和Rn具有更好的性能，同時具有更好的跨平臺性

相比Flutter，具有動態(tài)部署的能力（Flutter Release采用AoT模式并沒有動態(tài)部署的能力，即使Debug版本也只是開發(fā)環(huán)境下才有動態(tài)化能力并沒有可以實施項目的能力）

只需要會Weex開發(fā)或則Rn開發(fā)就可以，不需要額外學(xué)習(xí)Dart，已有的Weex項目可以無縫切換。

為什么Flutter開發(fā)APP性能最接近原生，前端程序員請關(guān)注

Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計算機編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在：

Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。

3、Flutter Engine虛擬機

Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當(dāng)前配置和狀態(tài)描述了它們的視圖。當(dāng)窗口小部件的狀態(tài)發(fā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改。可以直接在OS平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調(diào)用起來更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術(shù)，會在APP安裝時就編譯成機器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼的一種開發(fā)框架，未來也會是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問題就是需要學(xué)習(xí)一門新的語言：Dart，而有Java或者C#語言基礎(chǔ)的程序員會比較容易學(xué)習(xí)。

當(dāng)前標(biāo)題：wexxflutter的簡單介紹
文章出自：http://www.ef60e0e.cn/article/dsssdoj.html