Flutter開發(fā)App和原生iOS開發(fā)App各有什么優(yōu)缺點？

自己寫flutter也有段時間了,這次來聊聊flutter開發(fā)App和原生iOS開發(fā)App各有什么優(yōu)缺點.

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、邯山網(wǎng)站維護、網(wǎng)站推廣。

不廢話,直奔主題????

Flutter 與 iOS 原生 webView 對比

本文對比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加載速度，內(nèi)存使用情況。

測試網(wǎng)頁打開的速度，只需要獲取 WebView 在開始加載網(wǎng)頁和網(wǎng)頁加載完成時的時間戳，時間戳的差即為打開網(wǎng)頁的時間

為了使差異更明顯，我們選擇較為復(fù)雜的 新浪首頁 進行加載的對比，為了減小網(wǎng)絡(luò)對加載速度的影響，我們讓手機連接同一個網(wǎng)絡(luò)，分別進行 10 次測試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對加載速度產(chǎn)生影響

下面使筆者進行 10 次測試所得到的數(shù)據(jù)

結(jié)果讓我有點驚訝，一直以為 WKWebView 會是個王者。結(jié)果看，速度上 WKWebView 略慢一點，不過總體差異不大（該結(jié)果僅僅是測試新浪的結(jié)果，僅供參考啦）

在這里，筆者又加了一個測試，嘗試記錄從 viewController 的 viewDidLoad 到 webview 的 didFinish 時間，測試了新浪的數(shù)據(jù)，如下：

UIWebViewA ： 4970、3808、3815、4250、3556 avg(4079.8) （加載完所有頁面）

UIWebViewB ： 4103、3124、3070、3256、2835 avg(3277.6)（加載sina完畢）

WKWebView ： 3672、3032、2892、2912、2739 avg(3049.4)

flutter_webView ： 4532、3901、4310、3496、3378 avg(3923.4)

其中可以看到，webView 有兩行，UIWebViewB 的數(shù)據(jù)就是加載 sina 主站的時間；UIWebViewA 的數(shù)據(jù)是因為在加載完 sina 主站之后，新浪又加載了一個 ，所以導(dǎo)致總時間延長，不過即使按照 UIWebViewB 的數(shù)據(jù)來比較，也是 wkWebView 略勝一籌。

此處可以看出 flutter_webView 使用的是 wkwebView，所以它吃虧的主要原因是 flutter 包了一層。

結(jié)論：

速度（didStart - didFinish） UIWebView flutter_webview WKWebView

速度（viewDidLoad - didFinish）WKWebView UIWebView flutter_webview

這里查看內(nèi)存使用的是 xcode 的 debug session 中的 memory。

首先看之前測試時，連續(xù)打開十次新浪的內(nèi)存情況

接著我們在看一下打開淘寶首頁的內(nèi)存情況

從圖上可以看出，WKWebView 在內(nèi)存方面有很大的優(yōu)勢啊，UIWebView 的內(nèi)存是真的傷啊，然后 debug 看了一下 flutter_webView，他使用的就是原生的 webView 。

他相比較原生 WKWebView 的內(nèi)存開銷稍大一點，從測試表現(xiàn)來看，一般大個 30 MB 左右。

結(jié)論：內(nèi)存 WKWebView flutter_webview UIWebView

可以在 html5test 中對瀏覽器的兼容性進行評分，通過測試發(fā)現(xiàn)得分分別如下

因為 flutter 里使用的就是 WK，所以和原生的 WKWebView 一樣都是 444 分，比 UIWebView 的 437 略勝一籌

結(jié)論：兼容性 WKWebView = flutter_webview UIWebView

UIWebView : 速度相比較 WKWebView 稍快一點，但是內(nèi)存是一大硬傷，所以只要條件允許，就不推薦使用了

WKWebView : 速度略慢一點，不過差別不大，總體可以接受。是比UIWebView更好的選擇，推薦使用。

flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以總體和 native WKWebView 表現(xiàn)差不多。如果是混編項目中，因為它被包了一層，所以頁面加載上存在一定的劣勢，所以混編項目中仍然推薦使用 WKWebView。不過如果從多端考慮、以及項目可遷移等，那么使用也未嘗不可，就是維護成本要增加一些，需要維護兩套 webView。這個就需要根據(jù)自己的情況自己取舍了。

跨平臺技術(shù)；H5和Flutter誰是未來？

前言

為什么跨平臺是發(fā)展趨勢？

同一個應(yīng)用，各個“端”獨立開發(fā)，不僅開發(fā)周期長，而且人員成本高。同時，作為技術(shù)人員，也不應(yīng)該滿足于這種重復(fù)、低能的工作狀態(tài)。在這樣的形勢下，跨平臺的技術(shù)方案也受到越來越多人和企業(yè)的關(guān)注。

本篇文章我將從原理、優(yōu)缺點等方面為大家分享跨平臺技術(shù)

一. H5

說到跨平臺，沒人不知道H5。不管是在Mac、Windows、Linux、iOS、Android還是其他平臺，只要給一個瀏覽器，連“月球”上它都能跑。

1.瀏覽器架構(gòu)

下面，我們來看看讓H5如此橫行霸道的瀏覽器的架構(gòu)：

瀏覽器由以上7個部分組成，而“渲染引擎”是性能優(yōu)化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的瀏覽器內(nèi)核不同，渲染過程會不太一樣，但主要流程還是一致的。

分為下面6步驟：

從以上6步，我們可以總結(jié)渲染優(yōu)化的要點：

以上就是瀏覽器端的內(nèi)容。但H5作為跨平臺技術(shù)的載體，是如何與不同平臺的App進行交互的呢？這時候JSBridge就該出場了。

3.JSBridge原理

JSBridge，顧名思義，是JS和Native之間的橋梁，用來進行JS和Native之間的通信。

通信分為以下兩個維度：

那么App內(nèi)加載H5的過程是什么樣的呢？

4.App打開H5過程

打開H5分為4個階段：

這四步，對應(yīng)的過程如上圖所以，我們可以針對性的做性能優(yōu)化。

5.優(yōu)缺點分析

下面，我們進行H5的優(yōu)缺點分析：

優(yōu)點

缺點

雖然H5目前還存在不足，但隨著PWA、WebAssembly等技術(shù)的進步，相信H5在未來能夠得到越來也好的發(fā)展。

二.小程序

2018年是微信小程序飛速發(fā)展的一年，19年，各大廠商快速跟進，已經(jīng)有了很大的影響力。下面，我們以微信小程序為例，分析小程序的技術(shù)架構(gòu)。

小程序跟H5一樣，也是基于Webview實現(xiàn)。但它包含View視圖層、App Service邏輯層兩部分，分別獨立運行在各自的WebView線程中。

1.View

可以理解為h5的頁面，提供UI渲染。由WAWebview.js來提供底層的功能,具體如下：

每個窗口都有一個獨立的WebView進程，因此微信限制不能打開超過5個層級的頁面來保障用戶體驗。

2. App Service

提供邏輯處理、數(shù)據(jù)請求、接口調(diào)用。由WAService.js來提供底層的功能,具體如下：

運行環(huán)境：

僅有一個WebView進程

3.View App Service通信

視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層將觸發(fā)的事件通知到邏輯層進行業(yè)務(wù)處理。

4. 優(yōu)缺點分析

優(yōu)點

缺點

既然WebView性能不佳，那有沒有更好的方案呢？下面我們看看React Native。

三.React Native

RN的理念是在不同平臺上編寫基于React的代碼，實現(xiàn)Learn once, write anywhere。

Virtual DOM在內(nèi)存中，可以通過不同的渲染引擎生成不同平臺下的UI，JS和Native之間通過Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源碼通過 React 框架最終渲染到了瀏覽器的真實 DOM 中，而在 React Native 框架中，JSX 源碼通過 React Native 框架編譯后，與Native原生的UI組件進行映射，用原生代替DOM元素來渲染，在UI渲染上非常接近Native App。

2.React Native 與Native平臺通信

3.優(yōu)缺點分析

優(yōu)點

缺點

4.RN展望

雖然RN還存在不足，但RN新版本已經(jīng)做了如下改進，并且RN團隊也在積極準(zhǔn)備大版本重構(gòu)，能否成為開發(fā)者們所信賴的跨平臺方案，讓我們拭目以待。

既然React Native在渲染方面還擺脫不了原生，那有沒有一種方案是直接操控GPU，自制引擎渲染呢，我們終于迎來了Flutter！

四.Flutter

Flutter是Google開發(fā)的一套全新的跨平臺、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認(rèn)開發(fā)套件。渲染引擎依靠跨平臺的Skia圖形庫來實現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺、不同設(shè)備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

1.Flutter架構(gòu)原理

2.Dart優(yōu)勢

很多人會好奇，為什么Flutter要用Dart，而不是用JavaScript開發(fā)，這里列下Dart的優(yōu)勢

3.優(yōu)缺點分析

優(yōu)點

缺點

Flutter動態(tài)化方案調(diào)研

騰訊課堂14M

今日頭條3M

閑魚22M

百度貼吧13M

螞蟻財富56.8M

百度網(wǎng)盤14M

手機淘寶15M

貝殼找房8M

由粗粒度小組件動態(tài)拼裝出頁面，Native端已經(jīng)有很多成熟的框架，如天貓的Tangram。

開發(fā)語言：iOS、Android

適用場景：快速迭代的活動營銷頁面

優(yōu)點：無侵入，更新簡單

缺點：提前預(yù)埋，擴展性差，靈活性差

以webview作為容器的app，歷史悠久，最早到2011年。

開發(fā)語言：HTML

適用場景：雙端嚴(yán)格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：動態(tài)更新，跨平臺

缺點：性能，加載速度

UI用Xml+JS表達(dá)，用Native View渲染。

開發(fā)語言：Xml+JS

適用場景：雙端嚴(yán)格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：native組件，生態(tài)成熟

缺點：三方庫crash，性能缺陷

UI用Dart表達(dá)，用Dart engine渲染。

Flutter官方不支持動態(tài)化。原因是Flutter在 Release 模式下構(gòu)建的是 AOT 編譯產(chǎn)物，在 Debug 模式下構(gòu)建的是 JIT ，AOT 依賴的 Dart VM 和 JIT 并不一樣， JIT Release 并不支持 iOS 設(shè)備。可行的方案是：AOT 需要一個編譯后的 “Dart VM”。抽離一份 DartVM 獨立編譯，再以動態(tài)庫的形式引入項目。

開發(fā)語言：Dart

適用場景：iOS、Android、Web、Desktop、Embed

優(yōu)點：性能最佳

缺點：增大包體積 20MB+

大廠的主流方案。UI用JS表達(dá)，用Dart engine渲染。

開發(fā)語言：JS、類JS

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要掌握J(rèn)S、Dart兩個語言和框架

大廠的主流方案。UI用Dart表達(dá)，用Dart engineX渲染。

開發(fā)語言：Dart

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要改造Dart engine

1、 美團外賣Flutter動態(tài)化實踐

2、 攜程App 首頁動態(tài)化探索

3、 Flutter 動態(tài)化在最右 App 中的實踐

4、 Flutter 動態(tài)化熱更新的思考與實踐

5、 NOW直播Flutter動態(tài)搜索列表頁實現(xiàn)

6、 Flutter動態(tài)化的方案對比及最佳實現(xiàn)-閑魚

7、 基于JavaScript 的MXFlutter

當(dāng)前題目：flutter優(yōu)勢的簡單介紹
鏈接URL：http://chinadenli.net/article3/dsgiios.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、云服務(wù)器、動態(tài)網(wǎng)站

廣告

聲明：本網(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)