Flutter 與 Android 原生 WebView 對比

享物說發表於2019-02-28
FlutterAndroidWebView

前言

自從 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 來開啟淘寶首頁和新浪首頁的方法，在程式剛執行的時候記憶體佔用如下圖：

Flutter 與 Android 原生 WebView 對比

然後用 WebView 開啟淘寶首頁：

Flutter 與 Android 原生 WebView 對比

用 flutter_webview_plugin 開啟淘寶首頁：

Flutter 與 Android 原生 WebView 對比

可以發現，用 WebView 開啟淘寶首頁記憶體基本無變化，但是用 flutter_webview_plugin 開啟淘寶首頁記憶體有明顯的增加，且波動較大。

結論：flutter_webview_plugin 相對 native WebView 而言，佔用記憶體較大。

HTML5 相容性對比

可以在 html5test 中對瀏覽器的相容性進行評分，通過測試發現 native WebView 和 flutter_webview_plugin 的得分分別如下：
Flutter 與 Android 原生 WebView 對比
Flutter 與 Android 原生 WebView 對比

發現在小米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，轉載請註明原作者及以上資訊。

相關文章