Flutter与Android 原生WebView对比
前言
自从 google 推出 flutter 跨平台开发框架以来，flutter 在各个技术论坛里被炒得如日中天。
说到跨平台开发，就不得不提 WebView，WebView 可以说是最廉价的跨平台开发方案。我们知道，flutter 可以和 native 混合开发，它们可以互相调用。那么当我们进行混合开发的时候，如果需要使用 WebView，我们应该调用原生的 WebView 还是使用 flutter 自己实现 WebView 呢?如果用 flutter 自己实现 WebView，它的性能与 native 相比如何呢?今天我们就以 android 为例从几个不同的维度来实际测试一下!
[[265159]]
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 兼容性无明显差异。
总结
我们对 native WebView 和 flutter_webview_plugin 分别进行了网页加载速度、占用内存和 html5 兼容性作了对比，发现 native WebView 占用内存更小，网页加载速度和 html5 的兼容性无明显差异。
在实际使用中，由于 flutter_webview_plugin 并不存在于 widget 树中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...这些通知交互 widget。但是 flutter_webview_plugin 具有跨平台的优势，如果需要同时 flutter 项目中同时在 Android 和 iOS 端使用 WebView，建议使用 flutter_webview_plugin，否则，建议使用 native WebView。
希望大家踊跃讨论，交流一下你们的宝贵经验，互相提高下!