Flutter是什么？

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop form a single codebase。

Flutter是一個(gè)UI SDK（Software Development Kit）。

可以進(jìn)行移動(dòng)端（iOS、Android），Web端（Beta），桌面（technical preview），跨平臺(tái)解決方案；

移動(dòng)端目前已經(jīng)很多公司在用，Google、阿里、騰訊。

特別是阿里的咸魚團(tuán)隊(duì)，為Flutter做了非常多的貢獻(xiàn)；

Flutter它是有一統(tǒng)大前端的野心的，并且它正在侵蝕iOS、Android這些原生開發(fā)；

Flutter的特點(diǎn)

Google公司在國(guó)內(nèi)做過(guò)很多宣講，其中多次提到Flutter的幾個(gè)特點(diǎn)：美觀、快速、高效、開發(fā)。

美觀：使用Flutter內(nèi)置美麗的Material Design和Cupertino widget，豐富的motion API，平滑而自然的活動(dòng)效果和平臺(tái)感知，為您的用戶帶來(lái)全新的體驗(yàn)。

快速：Flutter 的UI渲染性能很好。在生產(chǎn)環(huán)境下，F(xiàn)lutter 將代碼編譯成機(jī)器碼執(zhí)行，并充分利用 GPU 的圖形加速能力，因此使用Flutter 開發(fā)的移動(dòng)應(yīng)用即使在低配手機(jī)上也能實(shí)現(xiàn)每秒 60 幀的 UI 渲染速度； Flutter 引擎使用 C++ 編寫，包括高效的 Skia 2D 渲染引擎，Dart 運(yùn)行時(shí)和文本渲染庫(kù)。

高效：Hot Reload (熱重載) ，在前端已經(jīng)不是什么新鮮的東西，但在移動(dòng)端之前一直是沒(méi)有的

開發(fā)：Flutter 是開放的，它是一個(gè)完全開源的項(xiàng)目。

平臺(tái)獨(dú)立開發(fā)：

完整的軟件系統(tǒng)需要移動(dòng)端：iOS端和Android端?

iOS端使用OC、Swift來(lái)進(jìn)行開發(fā)，大部分iOS程序員目前這兩個(gè)都需要掌握；（iOS開發(fā)工程師）?

Android端使用Java、Kotlin來(lái)進(jìn)行開發(fā)，使用Java開發(fā)Android會(huì)更多一些；（Android開發(fā)工程師）?

對(duì)于公司來(lái)說(shuō)成本其實(shí)是非常高的。

在很長(zhǎng)一段時(shí)間內(nèi)，大家都在需求一種移動(dòng)端的跨平臺(tái)解決方案，希望可以通過(guò)一套代碼開發(fā)出可以同時(shí)運(yùn)行在iOS和Android兩個(gè)系統(tǒng)上的應(yīng)用程序。

跨平臺(tái)解決方案一：webview

基于 JavaScript 和 WebView的跨平臺(tái)。

最早出現(xiàn)的跨平臺(tái)框架是基于JavaScript和WebView， 代表框架有PhoneGap，Apache Cordova，Ionic 等等。

主要是通過(guò)HTML來(lái)構(gòu)建自己的界面，再將其顯示在各個(gè)平臺(tái)的WebView中。

但是它默認(rèn)是不能調(diào)用本地的一些服務(wù)的（比如相機(jī)、藍(lán)牙等），所以需要通過(guò)JavaScript進(jìn)行橋接調(diào)用Native的一些代碼來(lái)完成某些功能。但是，它本身的體驗(yàn)、性能都并不理想，而且開發(fā)過(guò)程

中的坑非常多。

跨平臺(tái)解決方案二：React Native

在尋求最佳跨平臺(tái)解決方案的過(guò)程中，無(wú)疑React Native 是之前最優(yōu)秀的一個(gè)。

React Native (簡(jiǎn)稱RN)是Facebook于2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架React在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，目前支持iOS和安卓?jī)纱笃脚_(tái)。

RN使用JavaScript語(yǔ)言，類似于HTML的JSX，以及CSS來(lái)開發(fā)移動(dòng)應(yīng)用，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動(dòng)應(yīng)用開發(fā)領(lǐng)域。?

并且在保留基本渲染能力的基礎(chǔ)上，用原生自帶的 UI 組件實(shí)現(xiàn)核心的渲染引擎，從而保證了良好的渲染性能。

但是，由于RN的本質(zhì)是通過(guò)JavaScript VM調(diào)用原生接口，通信相對(duì)比較低效，而且框架本身不負(fù)責(zé)渲染，而是是間接通過(guò)原生進(jìn)行渲染的。所以在RN上做出非常多貢獻(xiàn)的Airbnb之前就宣布放棄RN， 而轉(zhuǎn)向Native進(jìn)行開發(fā)

跨平臺(tái)解決方案三：Flutter

從Flutter出現(xiàn)到現(xiàn)在，我個(gè)人就一直非?？春?，因?yàn)樗赡懿攀俏覀兒芫靡詠?lái)所期待的跨平臺(tái)的終極解決方案。

我們直接看下面這幅圖來(lái)對(duì)比f(wàn)lutter - native - rn的區(qū)別?

Flutter利用Skia繪圖引擎，直接通過(guò)CPU、GPU進(jìn)行繪制，不需要依賴任何原生的控件

Android操作系統(tǒng)中，我們編寫的原生控件實(shí)際上也是依賴于Skia進(jìn)行繪制，所以flutter在某些Android操作系統(tǒng)上甚至還要高于原生（因?yàn)樵鶤ndroid中的Skia必須隨著操作系統(tǒng)進(jìn)行更新，而Flutter SDK中總是保持最新的）

而類似于RN的框架，必須通過(guò)某些橋接的方式先轉(zhuǎn)成原生進(jìn)行調(diào)用，之后再進(jìn)行渲染。

Flutter繪制原理圖

flutter區(qū)別于React Native的本質(zhì)區(qū)別：

React Native之類的框架，只是通過(guò)JavaScript虛擬機(jī)擴(kuò)展調(diào)用系統(tǒng)組件，由Android和iOS系統(tǒng)進(jìn)行組件的渲染；Flutter 是自己完成了組件渲染的閉環(huán)

圖像是如何顯示的？

首先，你需要知道，我們?cè)谄聊簧峡梢钥吹降乃袃?nèi)容都是計(jì)算機(jī)繪制出來(lái)的圖像。

無(wú)論是視頻還是GIF圖片，還是操作系統(tǒng)給我們看到的圖形化界面中的畫面，都是圖像。?

但是我們?yōu)槭裁茨芸吹筋愃朴趧?dòng)畫的效果呢？

這是因?yàn)樗シ诺乃俣确浅？欤芯勘砻鳎寒?dāng)圖片連續(xù)播放的頻率超過(guò)16幀（16張圖片），人眼就會(huì)感覺(jué)非常流暢，當(dāng)少于16幀時(shí)，會(huì)感覺(jué)到卡頓，所以我們平時(shí)看到的電影，通常都是24幀或者30幀的（李安之前拍攝120幀的電影，目的就是讓圖片間隔更小，畫面更加的流暢）?

幀率與刷新率的關(guān)系：

幀率（fps）：Frames Per Second ?

刷新率：顯示器的頻率，比如iPhone的 60Hz、iPad Pro的 120Hz。

雙重緩存（Double Buffer）?

雙重緩存存在的問(wèn)題

雙重緩存的缺陷在于：當(dāng) CPU/GPU 繪制一幀的時(shí)間過(guò)長(zhǎng)（比如超過(guò)16ms）時(shí)，會(huì)產(chǎn)生Jank（畫面停頓，甚至空白）。

三重緩存（Triple Buffer）：本質(zhì)是在每次Vsync信號(hào)發(fā)出后，多緩存一個(gè)Buffer作為備用。

渲染引擎skia

大前端學(xué)不動(dòng)系列

很多人看到Google的flutter框架的時(shí)候，第一反應(yīng)就是：別出新東西了，實(shí)在學(xué)不動(dòng)了。

客戶端開發(fā)者：從Android到iOS，或者從iOS到Android，到RN，甚至現(xiàn)在越來(lái)越多的客戶端開發(fā)者接觸前端相關(guān)知識(shí)（Vue、React、Angular、小程序）?

前端開發(fā)者：從jQuery到AngularJS，到三大框架并行：Vue、React、Angular，還有小程序，甚至現(xiàn)在也要接觸客戶端開發(fā)（比如RN、Flutter），包括TypeScript、Webpack、uniapp、Nodejs。?

大前端開發(fā)就是，不像服務(wù)器一樣可能幾年甚至幾十年還是那一套的東西，新技術(shù)會(huì)層出不窮。?

但是每一樣技術(shù)的出現(xiàn)都會(huì)讓驚喜，因?yàn)樗厝皇墙鉀Q了之前技術(shù)的某一個(gè)痛點(diǎn)的，所以我們要學(xué)會(huì)擁抱這種變化。

并且很多知識(shí)在學(xué)習(xí)的過(guò)程中，你會(huì)發(fā)現(xiàn)他們都是相同的，并不是說(shuō)都要從頭再來(lái)，最重要的是建立屬于自己的知識(shí)體系。?