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: flutterflutter_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。
免費獲取安卓開發架構的資料（包括Fultter、高階UI、效能優化、架構師課程、 NDK、Kotlin、混合式開發（ReactNative+Weex）和一線網際網路公司關於android面試的題目彙總可以加：936332305 / 連結：點選連結加入【安卓開發架構】： https://jq.qq.com/?_wv=1027&k=515xp64
