Flutter與Android原生WebView測試分析

這篇文章主要介紹了Flutter與Android原生WebView測試分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Flutter與Android原生WebView測試分析文章都會有所收獲，下面我們一起來看看吧。

Flutter 實現 WebView

flutter 官方是沒有 WebView 組件的，不過強大的 flutter-community 論壇考慮到廣大開發者的需求，開發了  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 系統：Android 8.1.0

加載速度對比

測試網頁打開的速度，只需要獲取 WebView 在開始加載網頁和網頁加載完成時的時間戳，時間戳的差即為打開網頁的時間，我們分別在 Android 原生和  flutter 中的相應位置打印 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;     });   } });

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

webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE

WebviewScaffold(   key: _scaffoldKey,   url: widget.url,   clearCache: true,   appCacheEnabled: false,   .   .   . );

下面使筆者進行 10 次測試所得到的數據：

可以發現，相同環境下 flutter_webview_plugin 的加載速度比 native WebView  略快，但是差異不明顯，基本可以忽略。

結論：flutter_webview_plugin 的加載速度比 native WebView 略快。

內存占用對比

可以使用 AndroidStudio 自帶的 profiler 工具來進行占用內存的測試，我們在 flutter 程序中同時集成調用 native  WebView 和 flutter_webview_plugin 來打開淘寶首頁和新浪首頁的方法，在程序剛運行的時候內存占用如下圖：

然后用 WebView 打開淘寶首頁：

用 flutter_webview_plugin 打開淘寶首頁：

可以發現，用 WebView 打開淘寶首頁內存基本無變化，但是用 flutter_webview_plugin  打開淘寶首頁內存有明顯的增加，且波動較大。

結論：flutter_webview_plugin 相對 native WebView 而言，占用內存較大。

HTML5 兼容性對比

可以在 html5test 中對瀏覽器的兼容性進行評分，通過測試發現 native WebView 和 flutter_webview_plugin  的得分分別如下：

現在小米8SE手機上，native WebView 和 flutter_webview_plugin 的 html5 兼容性得分都是 501。

結論：native WebView 和 flutter_webview_plugin 的 html5 兼容性無明顯差異。

關于“Flutter與Android原生WebView測試分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Flutter與Android原生WebView測試分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。