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测试分析"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。