建站
咨詢
售后
建站咨詢
新聞中心
前言
站在用戶的角度思考問題，與客戶深入溝通，找到新羅網(wǎng)站設(shè)計(jì)與新羅網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋新羅地區(qū)。
自從 google 推出 Flutter 跨平臺開發(fā)框架以來，flutter 在各個技術(shù)論壇里被炒得如日中天。
說到跨平臺開發(fā)，就不得不提 WebView，WebView 可以說是最廉價的跨平臺開發(fā)方案。我們知道，flutter 可以和 native 混合開發(fā)，它們可以互相調(diào)用。那么當(dāng)我們進(jìn)行混合開發(fā)的時候，如果需要使用 WebView，我們應(yīng)該調(diào)用原生的 WebView 還是使用 flutter 自己實(shí)現(xiàn) WebView 呢?如果用 flutter 自己實(shí)現(xiàn) WebView，它的性能與 native 相比如何呢?今天我們就以 Android 為例從幾個不同的維度來實(shí)際測試一下!
Flutter 實(shí)現(xiàn) WebView
flutter 官方是沒有 WebView 組件的，不過強(qiáng)大的 flutter-community 論壇考慮到廣大開發(fā)者的需求，開發(fā)了 flutter_webview_plugin 插件，方便在 flutter 中使用使用 WebView。
集成方式很簡單，在 pubspec.yaml 文件中：
- dependencies:
- flutter:
- sdk: flutter
- flutter_webview_plugin: ^0.3.0+2
接下來所有的對比都是基于 Android 原生的 WebView 和 flutter_webview_plugin 插件，為了嚴(yán)謹(jǐn)，并未對第三方 WebView 作對比。
測試手機(jī)：小米8SE 系統(tǒng)：Android 8.1.0
加載速度對比
測試網(wǎng)頁打開的速度，只需要獲取 WebView 在開始加載網(wǎng)頁和網(wǎng)頁加載完成時的時間戳，時間戳的差即為打開網(wǎng)頁的時間，我們分別在 Android 原生和 flutter 中的相應(yīng)位置打印 log：
- webView?.webViewClient = object : WebViewClient() {
- override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
- Log.d(TAG, "onPageStarted:" + System.currentTimeMillis())
- super.onPageStarted(view, url, favicon)
- }
- override fun onPageFinished(view: WebView?, url: String?) {
- Log.d(TAG, "onPageFinished:" + System.currentTimeMillis())
- super.onPageFinished(view, url)
- }
- }
- 復(fù)制代碼
- flutterWebViewPlugin.onStateChanged.listen((state) {
- if (state.type == WebViewState.finishLoad) {
- print('finishLoad:' + DateTime.now().millisecondsSinceEpoch.toString());
- setState(() {
- isLoad = false;
- });
- } else if (state.type == WebViewState.startLoad) {
- print('startLoad:' + DateTime.now().millisecondsSinceEpoch.toString());
- setState(() {
- isLoad = true;
- });
- }
- });
為了使差異更明顯，我們選擇較為復(fù)雜的 新浪首頁 進(jìn)行加載的對比，為了減小網(wǎng)絡(luò)對加載速度的影響，我們讓手機(jī)連接同一個網(wǎng)絡(luò)，分別進(jìn)行 10 次測試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對加載速度產(chǎn)生影響：
- webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE
- WebviewScaffold(
- key: _scaffoldKey,
- url: widget.url,
- clearCache: true,
- appCacheEnabled: false,
- .
- .
- .
- );
下面使筆者進(jìn)行 10 次測試所得到的數(shù)據(jù)：
可以發(fā)現(xiàn)，相同環(huán)境下 flutter_webview_plugin 的加載速度比 native WebView 略快，但是差異不明顯，基本可以忽略。
結(jié)論：flutter_webview_plugin 的加載速度比 native WebView 略快。
內(nèi)存占用對比
可以使用 AndroidStudio 自帶的 profiler 工具來進(jìn)行占用內(nèi)存的測試，我們在 flutter 程序中同時集成調(diào)用 native WebView 和 flutter_webview_plugin 來打開淘寶首頁和新浪首頁的方法，在程序剛運(yùn)行的時候內(nèi)存占用如下圖：
然后用 WebView 打開淘寶首頁：
用 flutter_webview_plugin 打開淘寶首頁：
可以發(fā)現(xiàn)，用 WebView 打開淘寶首頁內(nèi)存基本無變化，但是用 flutter_webview_plugin 打開淘寶首頁內(nèi)存有明顯的增加，且波動較大。
結(jié)論：flutter_webview_plugin 相對 native WebView 而言，占用內(nèi)存較大。
HTML5 兼容性對比
可以在 html5test 中對瀏覽器的兼容性進(jìn)行評分，通過測試發(fā)現(xiàn) native WebView 和 flutter_webview_plugin 的得分分別如下：
現(xiàn)在小米8SE手機(jī)上，native WebView 和 flutter_webview_plugin 的 html5 兼容性得分都是 501。
結(jié)論：native WebView 和 flutter_webview_plugin 的 html5 兼容性無明顯差異。
總結(jié)
我們對 native WebView 和 flutter_webview_plugin 分別進(jìn)行了網(wǎng)頁加載速度、占用內(nèi)存和 html5 兼容性作了對比，發(fā)現(xiàn) native WebView 占用內(nèi)存更小，網(wǎng)頁加載速度和 html5 的兼容性無明顯差異。
在實(shí)際使用中，由于 flutter_webview_plugin 并不存在于 widget 樹中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...這些通知交互 widget。但是 flutter_webview_plugin 具有跨平臺的優(yōu)勢，如果需要同時 flutter 項(xiàng)目中同時在 Android 和 iOS 端使用 WebView，建議使用 flutter_webview_plugin，否則，建議使用 native WebView。
希望大家踴躍討論，交流一下你們的寶貴經(jīng)驗(yàn)，互相提高下!
本文題目：Flutter與Android原生WebView對比
網(wǎng)頁URL：http://www.dlmjj.cn/article/cdhgede.html
