本文對比的是 UIWebView、WKWebView鸥印、flutter_webview_plugin（在iOS中使用的是WKWebView）的加載速度看尼，內存使用情況。
測試手機：iPhoneX
系統(tǒng)：iOS12.0
-
打開網頁速度對比
測試網頁打開的速度弓候，只需要獲取 WebView 在開始加載網頁和網頁加載完成時的時間戳郎哭，時間戳的差即為打開網頁的時間
-
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 次測試所得到的數(shù)據(jù)
| 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 時間睡榆，測試了新浪的數(shù)據(jù)萍肆，如下：
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 有兩行知允，UIWebViewB 的數(shù)據(jù)就是加載 sina 主站的時間；UIWebViewA 的數(shù)據(jù)是因為在加載完 sina 主站之后叙谨，新浪又加載了一個https://r.dmp.sina.cn/cm/sinaads_ck_wap.html温鸽，所以導致總時間延長，不過即使按照 UIWebViewB 的數(shù)據(jù)來比較手负，也是 wkWebView 略勝一籌涤垫。
此處可以看出 flutter_webView 使用的是 wkwebView，所以它吃虧的主要原因是 flutter 包了一層虫溜。
結論：
速度（didStart -> didFinish） UIWebView > flutter_webview > WKWebView
速度（viewDidLoad -> didFinish）WKWebView > UIWebView > flutter_webview
-
占用內存對比
這里查看內存使用的是 xcode 的 debug session 中的 memory。
首先看之前測試時股缸，連續(xù)打開十次新浪的內存情況
接著我們在看一下打開淘寶首頁的內存情況
從圖上可以看出衡楞，WKWebView 在內存方面有很大的優(yōu)勢啊，UIWebView 的內存是真的傷啊敦姻，然后 debug 看了一下 flutter_webView瘾境，他使用的就是原生的 webView 。
他相比較原生 WKWebView 的內存開銷稍大一點镰惦，從測試表現(xiàn)來看迷守，一般大個 30 MB 左右。
結論：內存 WKWebView > flutter_webview > UIWebView
-
html5 兼容性對比
可以在 html5test 中對瀏覽器的兼容性進行評分旺入，通過測試發(fā)現(xiàn)得分分別如下
因為 flutter 里使用的就是 WK兑凿，所以和原生的 WKWebView 一樣都是 444 分凯力，比 UIWebView 的 437 略勝一籌
結論：兼容性 WKWebView = flutter_webview > UIWebView
-
總結
UIWebView: 速度相比較 WKWebView 稍快一點，但是內存是一大硬傷礼华，所以只要條件允許咐鹤，就不推薦使用了
WKWebView: 速度略慢一點，不過差別不大圣絮，總體可以接受祈惶。是比UIWebView更好的選擇，推薦使用扮匠。
flutter_webView_plugin：在iOS中使用的就是原生的WKWebView捧请，所以總體和 native WKWebView 表現(xiàn)差不多。如果是混編項目中棒搜，因為它被包了一層疹蛉，所以頁面加載上存在一定的劣勢，所以混編項目中仍然推薦使用 WKWebView帮非。不過如果從多端考慮氧吐、以及項目可遷移等，那么使用也未嘗不可末盔，就是維護成本要增加一些筑舅，需要維護兩套 webView。這個就需要根據(jù)自己的情況自己取舍了陨舱。
