Flutter 与 Android 原生 WebView 对比

前言

自从 google 推出 flutter 跨平台开发框架以来，flutter 在各个技术论坛里被炒得如日中天。

说到跨平台开发，就不得不提 WebView，WebView 能够说是最廉价的跨平台开发方案。咱们知道，flutter 能够和 native 混合开发，它们能够互相调用。那么当咱们进行混合开发的时候，若是须要使用 WebView，咱们应该调用原生的 WebView 仍是使用 flutter 本身实现 WebView 呢？若是用 flutter 本身实现 WebView，它的性能与 native 相好比何呢？今天咱们就以 android 为例从几个不一样的维度来实际测试一下！

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 次测试所获得的数据：

	Android WebView	flutter_webview_plugin
0	2731	2442
1	2502	2623
2	2747	2422
3	2652	2323
4	2553	2596
5	2645	2379
6	2670	2342
7	2691	2218
8	3773	2429
9	2631	2453
avg	2759.5	2421.7

能够发现，相同环境下 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。

---

再读一篇相似文章？推荐阅读姊妹篇：

Flutter 与 iOS 原生 WebView 对比

---

若有任何知识产权、版权问题或理论错误，还请指正。
juejin.im/post/5c778d…
本文做者 Zackratos，转载请注明原做者及以上信息。