Flutter与Android 原生WebView对比-android system 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。

希望大家踊跃讨论，交流一下你们的宝贵经验，互相提高下!