欧美午夜免费观看福利片,国产精品99一区二区三区,色噜噜视频

一、跨平臺背景

1. 移動互聯(lián)網(wǎng)的重要性

如上圖所示，與2019年1月相比，全球使用互聯(lián)網(wǎng)的人數(shù)已增加到45.4億，增長了7％（2.98億新用戶）。

到2020年1月，全球有38億社交媒體用戶，與去年同期相比，這個數(shù)字增長了9％以上（3.21億新用戶）。

在全球范圍內(nèi)，現(xiàn)在有超過51.9億人使用手機(jī)，在過去的一年中，用戶數(shù)量增加了1.24億（2.4％）。

現(xiàn)在，普通的互聯(lián)網(wǎng)用戶每天在線花費(fèi)6個小時43分鐘，相當(dāng)于每個互聯(lián)網(wǎng)用戶每年連接時間超過100天。如果我們每天需要大約8小時的睡眠，那就意味著醒來的時間中，有40％以上是通過互聯(lián)網(wǎng)度過的。

在移動互聯(lián)網(wǎng)的浪潮下，開發(fā)效率和使用體驗可以說是同等重要。但是，使用原生的方式來開發(fā) App，就要求我們必須針對 iOS 和 Android 這兩個平臺分別開發(fā)。

這樣就導(dǎo)致了我們不僅需要在不同的項目間嘗試用不同的語言去實現(xiàn)同樣的功能，還要承擔(dān)由此帶來的維護(hù)任務(wù)。如果還要繼續(xù)向其他平臺（比如 Web、Mac 或 Windows）拓展的話，需要付出的時間和成本將成倍增長。而這，顯然是難以接受的。于是，跨平臺開發(fā)的概念順勢走進(jìn)了大家的視野。

從本質(zhì)上講，跨平臺開發(fā)是為了增加業(yè)務(wù)代碼的復(fù)用率，減少因為要適配多個平臺帶來的工作量，從而降低開發(fā)成本。

2. 跨平臺開發(fā)方案的三個時代

根據(jù)實現(xiàn)方式的不同，業(yè)內(nèi)常見的觀點是將主流的跨平臺方案劃分為三個時代。

（1）Web 容器時代

基于 Web 相關(guān)技術(shù)通過瀏覽器組件來實現(xiàn)界面及功能，典型的框架包括 Cordova(PhoneGap)、Ionic 和微信小程序。

Web 時代的方案，主要采用的是原生應(yīng)用內(nèi)嵌瀏覽器控件 WebView 的方式進(jìn)行 HTML5 頁面渲染。

由于采用了 Web 開發(fā)技術(shù)，社區(qū)和資源非常豐富，開發(fā)效率也很高。但是，一個完整 HTML5 頁面的展示要經(jīng)歷瀏覽器控件的加載、解析和渲染三大過程，性能消耗要比原生開發(fā)增加 N 個數(shù)量級。

（2）泛 Web 容器時代

采用類 Web 標(biāo)準(zhǔn)進(jìn)行開發(fā)，但在運(yùn)行時把繪制和渲染交由原生系統(tǒng)接管的技術(shù)，代表框架有 React Native、Weex 和快應(yīng)用，廣義的還包括天貓的 Virtual View 等。

泛 Web 容器時代的解決方案優(yōu)化了 Web 容器時代的加載、解析和渲染這三大過程，把影響它們獨立運(yùn)行的 Web 標(biāo)準(zhǔn)進(jìn)行了裁剪，以相對簡單的方式支持了構(gòu)建移動端頁面必要的 Web 標(biāo)準(zhǔn)（如 Flexbox 等），也保證了便捷的前端開發(fā)體驗。

同時，采用原生自帶的 UI 組件實現(xiàn)代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。

也就是說，在泛 Web 容器時代，我們?nèi)匀徊捎们岸擞押玫?JavaScript 進(jìn)行開發(fā)，整體加載、渲染機(jī)制大大簡化，并且由原生接管繪制，即將原生系統(tǒng)作為渲染的后端，為依托于 JavaScript 虛擬機(jī)的 JavaScript 代碼提供所需要的 UI 控件的實體。

這也是現(xiàn)在絕大部分跨平臺框架的思路，而 React Native 和 Weex 就是其中的佼佼者。總結(jié)起來其實就是利用 JS 來調(diào)用 Native 端的組件，從而實現(xiàn)相應(yīng)的功能。

（3）自繪引擎時代

自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業(yè)務(wù)邏輯到功能呈現(xiàn)的多端高度一致的渲染體驗。Flutter，是為數(shù)不多的代表。

這一時期的代表 Flutter 開辟了一種全新的思路，即從頭到尾重寫一套跨平臺的 UI 框架，包括渲染邏輯，甚至是開發(fā)語言。

渲染引擎依靠跨平臺的 Skia 圖形庫來實現(xiàn)，Skia 引擎會將使用 Dart 構(gòu)建的抽象的視圖結(jié)構(gòu)數(shù)據(jù)加工成 GPU 數(shù)據(jù)，交由 OpenGL 最終提供給 GPU 渲染，至此完成渲染閉環(huán)，因此可以在最大程度上保證一款應(yīng)用在不同平臺、不同設(shè)備上的體驗一致性。

而開發(fā)語言選用的是同時支持 JIT（Just-in-Time，即時編譯）和 AOT（Ahead-of-Time，預(yù)編譯）的 Dart，不僅保證了開發(fā)效率，更提升了執(zhí)行效率（比使用 JavaScript 開發(fā)的泛 Web 容器方案要高得多）。

Flutter 的前世今生

1. Flutter 出現(xiàn)的歷史背景

為不同的操作系統(tǒng)開發(fā)擁有相同功能的應(yīng)用程序，開發(fā)人員只有兩個選擇：

使用原生開發(fā)語言（即 Java 和 Objective-C），針對不同平臺分別進(jìn)行開發(fā)；
使用跨平臺解決方案，對不同平臺進(jìn)行統(tǒng)一開發(fā)。

原生開發(fā)方式的體驗最好，但研發(fā)效率和研發(fā)成本相對較高；而跨平臺開發(fā)方式研發(fā)雖然效率高，但為了抹平多端平臺差異，各類解決方案暴露的組件和 API 較原生開發(fā)相比少很多，因此研發(fā)體驗和產(chǎn)品功能并不完美。

所以，最成功的跨平臺開發(fā)方案其實是依托于瀏覽器控件的 Web。瀏覽器保證了 99% 的概率下 Web 的需求都是可以實現(xiàn)的，不需要業(yè)務(wù)“將就”技術(shù)。

不過，Web 最大的問題在于它的性能和體驗與原生開發(fā)存在肉眼可感知的差異，因此并不適用于對體驗要求較高的場景。

對于用戶體驗更接近于原生的 React Native，對業(yè)務(wù)的支持能力卻還不到瀏覽器的 5%，僅適用于中低復(fù)雜度的低交互類頁面。面對稍微復(fù)雜一點兒的交互和動畫需求，開發(fā)者都需要 case by case 地去 review，甚至還可能要通過原生代碼去擴(kuò)展才能實現(xiàn)。

帶著這些問題，我們終于迎來了本次的主角——Flutter。

Flutter 是構(gòu)建 Google 物聯(lián)網(wǎng)操作系統(tǒng) Fuchsia 的 SDK，主打跨平臺、高保真、高性能。開發(fā)者可以通過 Dart 語言開發(fā) App，一套代碼可以同時運(yùn)行在 iOS 和 Android 平臺。Flutter 使用 Native 引擎渲染視圖，并提供了豐富的組件和接口，這無疑為開發(fā)者和用戶都提供了良好的體驗。

那么，F(xiàn)lutter 是怎么完成組件渲染的呢？

這需要從圖像顯示的基本原理說起。在計算機(jī)系統(tǒng)中，圖像的顯示需要 CPU、GPU 和顯示器一起配合完成：CPU 負(fù)責(zé)圖像數(shù)據(jù)計算，GPU 負(fù)責(zé)圖像數(shù)據(jù)渲染，而顯示器則負(fù)責(zé)最終圖像顯示。

隨后視頻控制器會以每秒 60 次的速度，從幀緩沖區(qū)讀取幀數(shù)據(jù)交由顯示器完成圖像顯示。

可以看到，F(xiàn)lutter 關(guān)注如何盡可能快地在兩個硬件時鐘的 VSync 信號之間計算并合成視圖數(shù)據(jù)，然后通過 Skia 交給 GPU 渲染：UI 線程使用 Dart 來構(gòu)建視圖結(jié)構(gòu)數(shù)據(jù)，這些數(shù)據(jù)會在 GPU 線程進(jìn)行圖層合成，隨后交給 Skia 引擎加工成 GPU 數(shù)據(jù)，而這些數(shù)據(jù)會通過 OpenGL 最終提供給 GPU 渲染。

2. 關(guān)于Skia

Skia是一個開源的 2D 圖形庫，提供各種常用的API，并可在多種軟硬件平臺上運(yùn)行。谷歌Chrome瀏覽器、Chrome OS、安卓、Flutter、火狐瀏覽器、火狐操作系統(tǒng)以及其它許多產(chǎn)品都使用它作為圖形引擎。

Skia 在圖形轉(zhuǎn)換、文字渲染、位圖渲染方面都表現(xiàn)卓越，并提供了開發(fā)者友好的 API。

因此，架構(gòu)于 Skia 之上的 Flutter，也因此擁有了徹底的跨平臺渲染能力。通過與 Skia 的深度定制及優(yōu)化，F(xiàn)lutter 可以最大限度地抹平平臺差異，提高渲染效率與性能。

底層渲染能力統(tǒng)一了，上層開發(fā)接口和功能體驗也就隨即統(tǒng)一了，開發(fā)者再也不用操心平臺相關(guān)的渲染特性了。也就是說，Skia 保證了同一套代碼調(diào)用在 Android 和 iOS 平臺上的渲染效果是完全一致的。

同樣的在界面渲染、繪制的過程中，F(xiàn)lutter也做了很多優(yōu)化處理，提升合成、渲染效率。

3. FLutter的優(yōu)勢

（1）在所有的平臺下，都可以保持同樣UI樣式，同樣的業(yè)務(wù)邏輯

大多數(shù)跨平臺框架中的UI呈現(xiàn)如下圖所示：

而Flutter是直接畫在畫布上：

（2）減少開發(fā)所需的時間

Flutter的熱重載可以高效快速的看到改變，甚至保留應(yīng)用狀態(tài)；
官方提供的各種現(xiàn)成的組件（Material和Cupertino）。

（3）快速迭代上線

不需要單獨適配 iOS、Android 雙端的 UI 層面。

（4）更接近native的性能表現(xiàn)

Flutter不依賴任何中間代碼，最終直接構(gòu)建成機(jī)器碼，提高了性能。

（5）自定義復(fù)雜動畫

Flutter最大的優(yōu)勢之一就是可以定制你在屏幕上看到的任何東西，不管它有多復(fù)雜。

（6）有自己的渲染引擎

Flutter使用Skia將界面渲染到平臺提供的畫布上，意味著不需調(diào)整，即可遷移到其他平臺。

（7）更方便調(diào)用native api

獲取GPS坐標(biāo)、藍(lán)牙通信、收集傳感器數(shù)據(jù)、權(quán)限處理等，未支持的也可通過platform channel 。

（8）更高的潛力

iOS、Android、Web、Desktop…

三、Flutter 與 React Native (Hippy)

1. UI方面

在新舊設(shè)備上也能保持一致

android 5.1

android 8.1

Flutter動畫效果：

2. 性能方面

基于 ListView ，我們做了一個基準(zhǔn)測試。在 ListView 中，有1000個元素，并且到達(dá)列表最后一個元素的滾動時間相同，這里使用到了一些第三方庫：

ios Nuke
Android Glide
react native React-native-fast-image

結(jié)果展示：

3. Flutter缺點

開發(fā)者社區(qū)的規(guī)模和第三方庫
持續(xù)集成的能力
APK的大小
Dart語言學(xué)習(xí)成本
動態(tài)更新能力

Q&A

Q：Flutter 和 Hippy 有什么區(qū)別，為什么用 Flutter，不用 Hippy？

A：第一，F(xiàn)lutter開發(fā)效率高，可減少客戶端開發(fā)時間；第二，F(xiàn)lutter 在跨端UI差異??；第三，F(xiàn)lutter 動畫支持很全面；第四，它更接近native。

Q：Flutter 和 Hippy 在方案選型上有一些差異，比如自定義 UI 組件性能方面有哪些差異，接口怎么通信？

A：Flutter 自定義 UI 組件 platformview 的性能還有待提升，接口通信方面，Hippy 與客戶端通過 jsbridge，而 Futter 是通過 methodchannel 。

Q：Flutter 為什么暫時還不支持動態(tài)更新？

A：初期考慮到應(yīng)用安全和蘋果方面的策略，所以不支持動態(tài)更新?，F(xiàn)在 Android 端可以通過整包方式實現(xiàn)動態(tài)更新， iOS 目前還不支持。

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。