問題
最近項目中使用了WKWebView展示echarts圖表谋逻。起初效果很好蘑险，但是長時間測試后發(fā)現(xiàn)纵搁，WKWebView會出現(xiàn)白屏現(xiàn)象。百度了一番后愧驱，發(fā)現(xiàn)很多朋友遇到了同樣的問題（例如這一篇http://www.reibang.com/p/2a6cd16aceaa）慰技。
所以一開始也把白屏現(xiàn)象歸罪于WKWebView的bug，尋思著從WK著手去解決問題组砚。
踩坑
白屏現(xiàn)象難復現(xiàn)吻商，所以在發(fā)生白屏后，只能用flex來看view的層次
兩張圖對比之后可以看到糟红，白屏之后上層的WKCompsitingView都消失了艾帐。是否可以通過判斷WKWebView是否存在WKCompsitingView來判斷是否白屏？下面的代碼用于統(tǒng)計WKWebView當前一共包含多少WKCompsitingView盆偿。
- (void)getWKCompositingViewCount:(UIView *)view withCount:(NSInteger *)count{
for (UIView *subview in view.subviews) {
if ([subview isKindOfClass:NSClassFromString(@"WKCompositingView")]) {
*count += 1;
}
if (subview.subviews.count) {
[self getWKCompositingViewCount:subview withCount:count];
}
}
}
//使用
NSInteger count = 0;
[self getWKCompositingViewCount:weakSelf.myWebView withCount:&count];
在執(zhí)行js之前柒爸，只要發(fā)現(xiàn)count == 0 就執(zhí)行[webview reload];
這段代碼是否能填滿這個坑呢？經(jīng)過一系列折騰之后事扭，白屏終于復現(xiàn)了捎稚，而且日志顯示webview也reload了，但是依然是白屏求橄、今野、、是不是wk的某種釋放機制把相關(guān)的H5資源罐农，所以reload沒有效果腥泥？那重新loadRequest 是否可行呢？結(jié)果~~~還是白屏啃匿。
思考
已經(jīng)過去2天了蛔外，白屏問題仍然沒有解決。但是經(jīng)過了兩天的折騰溯乒，我們總結(jié)出了下列幾種現(xiàn)象夹厌，盡管都是白屏，但原因并不相同裆悄。
| 1.WKWebView的URL為空矛纹，出現(xiàn)白屏，這種現(xiàn)象可以通過loadRequest解決 |
|---|
| 2.WKWebView的URL不空光稼，出現(xiàn)白屏或南，這種現(xiàn)象無論是reload還是loadRequest都不能刷出網(wǎng)頁 |
| 3.WKWebView的URL不空孩等，顯示背景圖片，但是echarts圖表不顯示采够，reload和loadRequest都無效 |
| 4.WKWebView的URL不空肄方，背景圖片不顯示，echarts圖表能顯示蹬癌，reload和loadRequest都無效 |
現(xiàn)象3和4不能說是白屏权她，但應(yīng)該跟白屏現(xiàn)象存在一定的關(guān)系。
現(xiàn)象1很快就解決了逝薪，只要在執(zhí)行js方法之前判斷WKWebView的URL是否為空隅要，重新loadRequest就能出網(wǎng)頁。
而2~4無論怎么reload或者loadRequest都沒有效果董济，但它們的共同點都是似乎某種資源加載失敗了步清，也許是wk的某種機制把加載過的資源釋放了。
于是嘗試在本地html中加入資源加載的監(jiān)聽虏肾，只要發(fā)生錯誤尼啡，就調(diào)用location.reload();重載當前文檔。
//監(jiān)控資源加載錯誤(img,script,css,以及jsonp)
window.addEventListener('error', function (e) {
console.log("===" + e.message + "===");
location.reload();
}, true);
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
console.log("錯誤信息：", errorMessage);
console.log("出錯文件：", scriptURI);
console.log("出錯行號：", lineNumber);
console.log("出錯列號：", columnNumber);
console.log("錯誤詳情：", errorObj);
}
（注:這段代碼要放在head內(nèi)询微，并且css不能內(nèi)聯(lián)）至此崖瞭，1-4現(xiàn)象再也沒復現(xiàn)過，是否完全解決撑毛，后續(xù)測試中再持續(xù)關(guān)注书聚。
