189 8069 5689
这篇文章主要介绍了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测试分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。