前言

自從 google 推出 flutter 跨平臺(tái)開發(fā)框架以來(lái)，flutter 在各個(gè)技術(shù)論壇里被炒得如日中天。

說(shuō)到跨平臺(tái)開發(fā)，就不得不提 WebView，WebView 可以說(shuō)是最廉價(jià)的跨平臺(tái)開發(fā)方案。我們知道，flutter 可以和 native 混合開發(fā)，它們可以互相調(diào)用。那么當(dāng)我們進(jìn)行混合開發(fā)的時(shí)候，如果需要使用 WebView，我們應(yīng)該調(diào)用原生的 WebView 還是使用 flutter 自己實(shí)現(xiàn) WebView 呢?如果用 flutter 自己實(shí)現(xiàn) WebView，它的性能與 native 相比如何呢?今天我們就以 android 為例從幾個(gè)不同的維度來(lái)實(shí)際測(cè)試一下!

[[265159]]

Flutter 實(shí)現(xiàn) WebView

flutter 官方是沒有 WebView 組件的，不過(guò)強(qiáng)大的 flutter-community 論壇考慮到廣大開發(fā)者的需求，開發(fā)了 flutter_webview_plugin 插件，方便在 flutter 中使用使用 WebView。

集成方式很簡(jiǎn)單，在 pubspec.yaml 文件中： 

dependencies: 
  flutter: 
    sdk: flutter 
  flutter_webview_plugin: ^0.3.0+2 

接下來(lái)所有的對(duì)比都是基于 Android 原生的 WebView 和 flutter_webview_plugin 插件，為了嚴(yán)謹(jǐn)，并未對(duì)第三方 WebView 作對(duì)比。

測(cè)試手機(jī)：小米8SE 系統(tǒng)：Android 8.1.0

加載速度對(duì)比

測(cè)試網(wǎng)頁(yè)打開的速度，只需要獲取 WebView 在開始加載網(wǎng)頁(yè)和網(wǎng)頁(yè)加載完成時(shí)的時(shí)間戳，時(shí)間戳的差即為打開網(wǎng)頁(yè)的時(shí)間，我們分別在 Android 原生和 flutter 中的相應(yīng)位置打印 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) 
    } 
} 
復(fù)制代碼 
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; 
    }); 
  } 
}); 

為了使差異更明顯，我們選擇較為復(fù)雜的 新浪首頁(yè) 進(jìn)行加載的對(duì)比，為了減小網(wǎng)絡(luò)對(duì)加載速度的影響，我們讓手機(jī)連接同一個(gè)網(wǎng)絡(luò)，分別進(jìn)行 10 次測(cè)試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對(duì)加載速度產(chǎn)生影響： 

webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE 

WebviewScaffold( 
  key: _scaffoldKey, 
  url: widget.url, 
  clearCache: true, 
  appCacheEnabled: false, 
  . 
  . 
  . 
); 

下面使筆者進(jìn)行 10 次測(cè)試所得到的數(shù)據(jù)：

可以發(fā)現(xiàn)，相同環(huán)境下 flutter_webview_plugin 的加載速度比 native WebView 略快，但是差異不明顯，基本可以忽略。

結(jié)論：flutter_webview_plugin 的加載速度比 native WebView 略快。

內(nèi)存占用對(duì)比

可以使用 AndroidStudio 自帶的 profiler 工具來(lái)進(jìn)行占用內(nèi)存的測(cè)試，我們?cè)?flutter 程序中同時(shí)集成調(diào)用 native WebView 和 flutter_webview_plugin 來(lái)打開淘寶首頁(yè)和新浪首頁(yè)的方法，在程序剛運(yùn)行的時(shí)候內(nèi)存占用如下圖：

然后用 WebView 打開淘寶首頁(yè)：

用 flutter_webview_plugin 打開淘寶首頁(yè)：

可以發(fā)現(xiàn)，用 WebView 打開淘寶首頁(yè)內(nèi)存基本無(wú)變化，但是用 flutter_webview_plugin 打開淘寶首頁(yè)內(nèi)存有明顯的增加，且波動(dòng)較大。

結(jié)論：flutter_webview_plugin 相對(duì) native WebView 而言，占用內(nèi)存較大。

HTML5 兼容性對(duì)比

可以在 html5test 中對(duì)瀏覽器的兼容性進(jìn)行評(píng)分，通過(guò)測(cè)試發(fā)現(xiàn) native WebView 和 flutter_webview_plugin 的得分分別如下：

現(xiàn)在小米8SE手機(jī)上，native WebView 和 flutter_webview_plugin 的 html5 兼容性得分都是 501。

結(jié)論：native WebView 和 flutter_webview_plugin 的 html5 兼容性無(wú)明顯差異。

總結(jié)

我們對(duì) native WebView 和 flutter_webview_plugin 分別進(jìn)行了網(wǎng)頁(yè)加載速度、占用內(nèi)存和 html5 兼容性作了對(duì)比，發(fā)現(xiàn) native WebView 占用內(nèi)存更小，網(wǎng)頁(yè)加載速度和 html5 的兼容性無(wú)明顯差異。

在實(shí)際使用中，由于 flutter_webview_plugin 并不存在于 widget 樹中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...這些通知交互 widget。但是 flutter_webview_plugin 具有跨平臺(tái)的優(yōu)勢(shì)，如果需要同時(shí) flutter 項(xiàng)目中同時(shí)在 Android 和 iOS 端使用 WebView，建議使用 flutter_webview_plugin，否則，建議使用 native WebView。

希望大家踴躍討論，交流一下你們的寶貴經(jīng)驗(yàn)，互相提高下!