Flutter 与 iOS 原生 WebView 对比

对比的是 UIWebView、WKWebView、flutter_webview_plugin（iOS 中使用 WKWebView）的加载速度和内存占用情况。

测试手机：iPhone 区别在于打开网站所需的时间。

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次测试得到的：

结果有点让人意外，我一直以为WKWebView将成为国王。结果显示，WKWebView在速度上稍慢一些，但总体差别并不是很大（该结果只是新浪测试的结果，仅供参考）。

这里作者又添加了一个测试，试图捕获viewController viewDidLoad到webview didFinish之间的时间，测试了新浪的数据如下：

UIWebViewA: 3850,45,45 avg( 4079.8) (所有页面加载)
UIWebViewB：平均加载次数为 4103、3124、3070、3256、2835）❙❙❙❙ WKWebView: 3672, 3032, 2892, 2912 2739 平均(3049.4 )
flutter_webView: 4532, 3901, 4310, 3498, 3498 a.4 可以看到，webView有两行，UIWebViewB数据现在可以加载新浪主页了； UIWebViewA的数据是因为在加载了新浪主页后，新浪又加载了一个https://r.dmp.sina.cn/cm/sinaads_ck_wap.html，所以总的时间延长了，但是根据数据对比还是来自UIWebViewB、wkWebView 稍好一些。

这里可以看到flutter_webView使用了wkwebView，所以它受到影响的主要原因是因为flutter被包裹在一层中。

结论：速度​​​​(didStart -> didFinish) UIWebView > flutter_webview > WKWebView 速度​​(viewDidLoad -> didFinish) WKWebView > UIWebView > flutter_webview view就是这里使用的内存 使用时间对比 Xcode内存调试环节，先看一下之前测试中连续打开十次新浪时的内存情况：

接下来看一下打开淘宝首页时的内存情况

如图A、WKWebView在内存方面有很大的优势。哦，UIWebView 的内存非常损坏。然后我调试了flutter_webView，发现它使用的是原生的webView。

相比原生WKWebView，它的内存稍微大一些。从测试的性能来看，通常会大30MB左右。

结论：内存WKWebView > flutter_webview > UIWebViewHTML5兼容性对比

可以在html5测试中评估浏览器兼容性。测试中，得分如下：

因为flutter使用了WK，所以和原生WKWebView的得分一样，都是444，比UIWebView的437稍好一点。= flutter_webview > UIWebView总​​结

• UIWebView：速度比WKWebView稍快，但内存是个严重缺陷，所以在条件允许之前不建议使用。 ;
• WKWebView：速度稍慢，但差别不大，总体可以接受。这是比 UIWebView 更好的选择，推荐；
• flutter_webView_plugin：iOS 中使用原生 WKWebView，因此整体性能与原生 WKWebView 类似。如果是混合项目，因为是单层包裹的，对于页面加载有一些弊端，所以还是建议在混合项目中使用WKWebView。但如果综合考虑几个方面，项目可以迁移，使用也未尝不可，但维护成本增加，需要维护两套webView。你要根据自己的情况来选择。