建站
咨詢
售后
建站咨詢
新聞中心
前言
站在用戶的角度思考問題，與客戶深入溝通，找到新羅網(wǎng)站設(shè)計與新羅網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋新羅地區(qū)。
自從 google 推出 Flutter 跨平臺開發(fā)框架以來，flutter 在各個技術(shù)論壇里被炒得如日中天。
說到跨平臺開發(fā)，就不得不提 WebView，WebView 可以說是最廉價的跨平臺開發(fā)方案。我們知道，flutter 可以和 native 混合開發(fā)，它們可以互相調(diào)用。那么當我們進行混合開發(fā)的時候，如果需要使用 WebView，我們應(yīng)該調(diào)用原生的 WebView 還是使用 flutter 自己實現(xiàn) WebView 呢?如果用 flutter 自己實現(xiàn) WebView，它的性能與 native 相比如何呢?今天我們就以 Android 為例從幾個不同的維度來實際測試一下!
Flutter 實現(xiàn) WebView
flutter 官方是沒有 WebView 組件的，不過強大的 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 插件，為了嚴謹，并未對第三方 WebView 作對比。
測試手機：小米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)
- }
- }
- 復制代碼
- 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;
- });
- }
- });
為了使差異更明顯，我們選擇較為復雜的 新浪首頁 進行加載的對比，為了減小網(wǎng)絡(luò)對加載速度的影響，我們讓手機連接同一個網(wǎng)絡(luò)，分別進行 10 次測試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對加載速度產(chǎn)生影響：
- webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE
- WebviewScaffold(
- key: _scaffoldKey,
- url: widget.url,
- clearCache: true,
- appCacheEnabled: false,
- .
- .
- .
- );
下面使筆者進行 10 次測試所得到的數(shù)據(jù)：
可以發(fā)現(xiàn)，相同環(huán)境下 flutter_webview_plugin 的加載速度比 native WebView 略快，但是差異不明顯，基本可以忽略。
結(jié)論：flutter_webview_plugin 的加載速度比 native WebView 略快。
內(nèi)存占用對比
可以使用 AndroidStudio 自帶的 profiler 工具來進行占用內(nèi)存的測試，我們在 flutter 程序中同時集成調(diào)用 native WebView 和 flutter_webview_plugin 來打開淘寶首頁和新浪首頁的方法，在程序剛運行的時候內(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 中對瀏覽器的兼容性進行評分，通過測試發(fā)現(xiàn) native WebView 和 flutter_webview_plugin 的得分分別如下：
現(xiàn)在小米8SE手機上，native WebView 和 flutter_webview_plugin 的 html5 兼容性得分都是 501。
結(jié)論：native WebView 和 flutter_webview_plugin 的 html5 兼容性無明顯差異。
總結(jié)
我們對 native WebView 和 flutter_webview_plugin 分別進行了網(wǎng)頁加載速度、占用內(nèi)存和 html5 兼容性作了對比，發(fā)現(xiàn) native WebView 占用內(nèi)存更小，網(wǎng)頁加載速度和 html5 的兼容性無明顯差異。
在實際使用中，由于 flutter_webview_plugin 并不存在于 widget 樹中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...這些通知交互 widget。但是 flutter_webview_plugin 具有跨平臺的優(yōu)勢，如果需要同時 flutter 項目中同時在 Android 和 iOS 端使用 WebView，建議使用 flutter_webview_plugin，否則，建議使用 native WebView。
希望大家踴躍討論，交流一下你們的寶貴經(jīng)驗，互相提高下!
分享題目：Flutter與Android原生WebView對比
文章地址：http://m.fisionsoft.com.cn/article/cdhgede.html
