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，轉載請註明原做者及以上信息。