FlutterとiOSのオリジナルWebViewの比較

本稿では、UIWebView、WKWebView、flutter_を比較します.webview_プラグイン(iOSで使用されているのはWKWebView)のロード速度、メモリ使用状況.
携帯電話のテスト:iPhoneXシステム:iOS 12.0

ロード速度の比較

Webページを開く速度をテストするには、WebビューがWebページのロードを開始したときと、Webページのロードが完了したときのタイムスタンプを取得するだけで、タイムスタンプの差はWebページを開く時間です.

WKWebView

extension WKWebViewVC: WKNavigationDelegate {

    public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        decisionHandler(.allow)
    }

    public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        startTime = Int(Date().timeIntervalSince1970 * 1000)
    }

    public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let finishTime: Int = Int(Date().timeIntervalSince1970 * 1000)
        print("WKWebView \(finishTime - startTime)")
    }
}

UIWebView

extension WebViewVC: UIWebViewDelegate {

    public func webViewDidStartLoad(_ webView: UIWebView) {
        startTime = Int(Date().timeIntervalSince1970 * 1000)
    }

    public func webViewDidFinishLoad(_ webView: UIWebView) {
        let finishTime: Int = Int(Date().timeIntervalSince1970 * 1000)
        print("UIWebView \(finishTime - startTime)")
    }
}

flutter_webview_plugin

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のキャッシュをオフにし、キャッシュがロード速度に影響を与えることを防止する必要がある.

private func delegateCache() {
    let cache = URLCache.shared
    cache.removeAllCachedResponses()
    cache.diskCapacity = 0
    cache.memoryCapacity = 0
}

private func deleteWebCache() {
    let websiteDataTypes: Set<String> = WKWebsiteDataStore.allWebsiteDataTypes()
    let dateFrom = Date.init(timeIntervalSince1970: 0)
    WKWebsiteDataStore.default().removeData(ofTypes: websiteDataTypes, modifiedSince: dateFrom) {

    }
}

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

以下、筆者が10回のテストで得たデータを以下のようにします.
UIWebView
WKWebView
flutter_webview_plugin
0
4009
3384
3582
1
2856
3719
2869
2
2773
3258
3221
3
2776
3570
3178
4
2933
3386
3092
5
2679
3706
2956
6
2583
3707
3038
7
3145
2947
3015
8
3654
3038
3634
9
3258
3439
3132
avg
3066.6
3415.4
3171.7
結果はちょっと驚きましたが、WKWebViewが王者になると思っていました.その結果,速度的にはWKWebViewはやや遅かったが,全体的な差は大きくなかった(この結果は新浪をテストした結果にすぎず,参考に供した).
ここでは、viewControllerのviewDidLoadからwebviewまでのdidFinish時間を記録して、新浪のデータをテストしてみました.以下のようにします.
UIWebViewA:4970、3808、3815、4250、3556 avg(4079.8)(全ページロード済み)UIWebViewB:4103、3124、3070、3256、2835 avg(3277.6)(sinaロード済み)WKWebView:3672、3032、2892、2912、2739 avg(3049.4)flutter_webView: 4532、3901、4310、3496、3378 avg(3923.4)
このうち、webViewには2行あり、UIWebViewのデータはsinaホスト局をロードする時間であることがわかります.UIWebViewAのデータはsinaホスト局をロードした後、新浪がまた1つロードしたからです.https://r.dmp.sina.cn/cm/sinaads_ck_wap.htmlということで総延長になりますが、UIWebViewBのデータで比較してもwkWebViewの方がやや勝っています.
ここでflutter_がわかりますwebViewはwkwebViewを使用しているので、損をした主な原因はflutterが1層包んだことです.
結論:速度(didStart->didFinish)UIWebView>flutter_Webview>WKWebView速度(viewDidLoad->didFinish)WKWebView>UIWebView>fluter_webview

メモリ使用量の比較

ここでメモリが使用されているのはXcodeのdebug sessionのmemoryです.まず、前のテストを見て、新浪のメモリを10回連続して開きます.
次に、淘宝のトップページを開くメモリの状況を見てみましょう.
図から分かるように、WKWebViewはメモリ面で大きなメリットがありますね.UIWebViewのメモリは本当に傷ついていますね.そしてdebugはflutterを見てみました.webView、彼が使っているのは原生のwebViewです.
彼は元のWKWebViewのメモリオーバーヘッドより少し大きく、テストの表現から見ると、普通は30 MBぐらい大きい.
結論:メモリWKWebView>flutter_webview > UIWebView

HTML 5互換性比較

html 5 testでブラウザの互換性を評価できますが、テストでは次のように得点が見つかりました.
flutterで使われているのがWKなので、原生のWKWebViewと同じく444点で、UIWebViewの437よりやや勝っています.
結論:互換性WKWebView=flutter_webview > UIWebView

まとめ

UIWebView:速度はWKWebViewより少し速いですが、メモリは大きな硬傷なので、条件が許す限り、お勧めしません.

WKWebView:速度は少し遅いですが、差は大きくなく、全体的に受け入れられます.UIWebViewよりも良い選択で、お勧めです.

flutter_webView_plugin:iOSで使われているのはオリジナルのWKWebViewなので、全体的にnative WKWebViewとは差が少ないです.ミキシングプロジェクトであれば、1層パッケージされているため、ページロードには一定の劣勢があるため、ミキシングプロジェクトではWKWebViewの使用を推奨します.しかし、マルチエンドの考慮や、プロジェクトの移行など、使用も不可欠です.つまり、メンテナンスコストが増加し、2つのwebViewをメンテナンスする必要があります.これは自分の都合で自分で取捨選択する必要があります.

似たような文章をもう1編読みますか.姉妹編を読むことをお勧めします.
FlutterとAndroid原生WebViewの比較
知的財産権、著作権の問題、理論の誤りがあれば、指摘してください.juejin.im/post/5 c 778 d...本稿の著者Jayは、原作者および以上の情報を転載してください.