Flutter是什么矩欠？
Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop form a single codebase倦踢。
Flutter是一個UI SDK（Software Development Kit）炕倘。
可以進(jìn)行移動端（iOS挎扰、Android）翠订，Web端（Beta），桌面（technical preview）遵倦，跨平臺解決方案尽超；
移動端目前已經(jīng)很多公司在用，Google梧躺、阿里似谁、騰訊。
特別是阿里的咸魚團(tuán)隊掠哥，為Flutter做了非常多的貢獻(xiàn)巩踏；
Flutter它是有一統(tǒng)大前端的野心的，并且它正在侵蝕iOS续搀、Android這些原生開發(fā)塞琼；
Flutter的特點
Google公司在國內(nèi)做過很多宣講，其中多次提到Flutter的幾個特點：美觀禁舷、快速彪杉、高效毅往、開發(fā)。
美觀：使用Flutter內(nèi)置美麗的Material Design和Cupertino widget派近，豐富的motion API攀唯，平滑而自然的活動效果和平臺感知，為您的用戶帶來全新的體驗渴丸。
快速：Flutter 的UI渲染性能很好侯嘀。在生產(chǎn)環(huán)境下，F(xiàn)lutter 將代碼編譯成機(jī)器碼執(zhí)行谱轨，并充分利用 GPU 的圖形加速能力戒幔，因此使用Flutter 開發(fā)的移動應(yīng)用即使在低配手機(jī)上也能實現(xiàn)每秒 60 幀的 UI 渲染速度； Flutter 引擎使用 C++ 編寫土童，包括高效的 Skia 2D 渲染引擎溪食，Dart 運行時和文本渲染庫。
高效：Hot Reload (熱重載) 娜扇，在前端已經(jīng)不是什么新鮮的東西，但在移動端之前一直是沒有的
開發(fā)：Flutter 是開放的栅组，它是一個完全開源的項目雀瓢。
平臺獨立開發(fā)：
完整的軟件系統(tǒng)需要移動端：iOS端和Android端?
iOS端使用OC、Swift來進(jìn)行開發(fā)玉掸，大部分iOS程序員目前這兩個都需要掌握刃麸；（iOS開發(fā)工程師）?
Android端使用Java、Kotlin來進(jìn)行開發(fā)司浪，使用Java開發(fā)Android會更多一些泊业；（Android開發(fā)工程師）?
對于公司來說成本其實是非常高的。
在很長一段時間內(nèi)啊易，大家都在需求一種移動端的跨平臺解決方案吁伺，希望可以通過一套代碼開發(fā)出可以同時運行在iOS和Android兩個系統(tǒng)上的應(yīng)用程序。
跨平臺解決方案一：webview
基于 JavaScript 和 WebView的跨平臺租谈。
最早出現(xiàn)的跨平臺框架是基于JavaScript和WebView篮奄， 代表框架有PhoneGap，Apache Cordova割去，Ionic 等等窟却。
主要是通過HTML來構(gòu)建自己的界面，再將其顯示在各個平臺的WebView中呻逆。
但是它默認(rèn)是不能調(diào)用本地的一些服務(wù)的（比如相機(jī)夸赫、藍(lán)牙等），所以需要通過JavaScript進(jìn)行橋接調(diào)用Native的一些代碼來完成某些功能咖城。但是茬腿，它本身的體驗呼奢、性能都并不理想，而且開發(fā)過程
中的坑非常多滓彰。
跨平臺解決方案二：React Native
在尋求最佳跨平臺解決方案的過程中控妻，無疑React Native 是之前最優(yōu)秀的一個。
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架揭绑，是Facebook早先開源的JS框架React在原生移動應(yīng)用平臺的衍生產(chǎn)物弓候，目前支持iOS和安卓兩大平臺。
RN使用JavaScript語言他匪，類似于HTML的JSX菇存，以及CSS來開發(fā)移動應(yīng)用，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動應(yīng)用開發(fā)領(lǐng)域邦蜜。?
并且在保留基本渲染能力的基礎(chǔ)上依鸥，用原生自帶的 UI 組件實現(xiàn)核心的渲染引擎，從而保證了良好的渲染性能悼沈。
但是贱迟，由于RN的本質(zhì)是通過JavaScript VM調(diào)用原生接口，通信相對比較低效絮供，而且框架本身不負(fù)責(zé)渲染衣吠，而是是間接通過原生進(jìn)行渲染的。所以在RN上做出非常多貢獻(xiàn)的Airbnb之前就宣布放棄RN壤靶， 而轉(zhuǎn)向Native進(jìn)行開發(fā)
跨平臺解決方案三：Flutter
從Flutter出現(xiàn)到現(xiàn)在缚俏，我個人就一直非常看好贮乳，因為它可能才是我們很久以來所期待的跨平臺的終極解決方案忧换。
我們直接看下面這幅圖來對比flutter - native - rn的區(qū)別?
Flutter利用Skia繪圖引擎，直接通過CPU向拆、GPU進(jìn)行繪制亚茬，不需要依賴任何原生的控件
Android操作系統(tǒng)中，我們編寫的原生控件實際上也是依賴于Skia進(jìn)行繪制浓恳，所以flutter在某些Android操作系統(tǒng)上甚至還要高于原生（因為原生Android中的Skia必須隨著操作系統(tǒng)進(jìn)行更新才写，而Flutter SDK中總是保持最新的）
而類似于RN的框架，必須通過某些橋接的方式先轉(zhuǎn)成原生進(jìn)行調(diào)用奖蔓，之后再進(jìn)行渲染赞草。
Flutter繪制原理圖
flutter區(qū)別于React Native的本質(zhì)區(qū)別：
React Native之類的框架，只是通過JavaScript虛擬機(jī)擴(kuò)展調(diào)用系統(tǒng)組件吆鹤，由Android和iOS系統(tǒng)進(jìn)行組件的渲染厨疙；Flutter 是自己完成了組件渲染的閉環(huán)
圖像是如何顯示的？
首先疑务，你需要知道沾凄，我們在屏幕上可以看到的所有內(nèi)容都是計算機(jī)繪制出來的圖像梗醇。
無論是視頻還是GIF圖片，還是操作系統(tǒng)給我們看到的圖形化界面中的畫面撒蟀，都是圖像叙谨。?
但是我們?yōu)槭裁茨芸吹筋愃朴趧赢嫷男Ч兀?/p>
這是因為它播放的速度非常快保屯，研究表明：當(dāng)圖片連續(xù)播放的頻率超過16幀（16張圖片）手负，人眼就會感覺非常流暢，當(dāng)少于16幀時姑尺，會感覺到卡頓竟终，所以我們平時看到的電影，通常都是24幀或者30幀的（李安之前拍攝120幀的電影切蟋，目的就是讓圖片間隔更小统捶，畫面更加的流暢）?
幀率與刷新率的關(guān)系：
幀率（fps）：Frames Per Second ?
刷新率：顯示器的頻率，比如iPhone的 60Hz柄粹、iPad Pro的 120Hz喘鸟。
雙重緩存（Double Buffer）?
雙重緩存存在的問題
雙重緩存的缺陷在于：當(dāng) CPU/GPU 繪制一幀的時間過長（比如超過16ms）時，會產(chǎn)生Jank（畫面停頓驻右，甚至空白）迷守。
三重緩存（Triple Buffer）：本質(zhì)是在每次Vsync信號發(fā)出后，多緩存一個Buffer作為備用旺入。
渲染引擎skia
大前端學(xué)不動系列
很多人看到Google的flutter框架的時候，第一反應(yīng)就是：別出新東西了凯力，實在學(xué)不動了茵瘾。
客戶端開發(fā)者：從Android到iOS，或者從iOS到Android咐鹤，到RN拗秘，甚至現(xiàn)在越來越多的客戶端開發(fā)者接觸前端相關(guān)知識（Vue、React祈惶、Angular雕旨、小程序）?
前端開發(fā)者：從jQuery到AngularJS，到三大框架并行：Vue捧请、React凡涩、Angular，還有小程序疹蛉，甚至現(xiàn)在也要接觸客戶端開發(fā)（比如RN活箕、Flutter），包括TypeScript可款、Webpack育韩、uniapp克蚂、Nodejs。?
大前端開發(fā)就是筋讨，不像服務(wù)器一樣可能幾年甚至幾十年還是那一套的東西埃叭，新技術(shù)會層出不窮。?
但是每一樣技術(shù)的出現(xiàn)都會讓驚喜悉罕，因為他必然是解決了之前技術(shù)的某一個痛點的赤屋，所以我們要學(xué)會擁抱這種變化。
并且很多知識在學(xué)習(xí)的過程中蛮粮，你會發(fā)現(xiàn)他們都是相同的益缎，并不是說都要從頭再來，最重要的是建立屬于自己的知識體系然想。?
