[WebView] 白屏问题初分析

[jschyz]

在写iOS UIWebView 组件，针对这段时间搜集到的 “白屏事件” 做了分析。

讲目前遇到的问题划分为4类。

1. iOS 纯白屏；Android 显示类似 Not Found 页面

复现：
访问 s.com，此域名还未被 DNS 正常解析，也就是不存在的域名。

iOS	Android	微信

原因：
iOS 遇到错误 DNS 解析错误，会提示 NSURLErrorCannotFindHost 错误提示，我询问@九毛后，得到他们在遇到此类Error错误直接跳过处理

附上 Error 错误列表

Android 则显示 Chrome 自带的错误提示，虽然友好，但体验较差。

2. 在网络通畅情况下，打开H5时，白屏需要耗时很长（iOS、Android都会出现）

复现：（以 iOS 举例）
正常访问一个h5页面时，将依次执行 shouldStartLoadWithRequest webviewDidStartLoad webviewDidFinishLoad 3个委托事件。

假如页面包含 iframe、location.href = ‘URL Scheme’，那么上面3个委托事件需要重新执行，损耗了加载性能。

原因：

shouldStartLoadWithRequest 会拦截 request 请求（不包含资源请求），如果委托返回 return YES；那么后续的委托将重新执行，导致真正需要加载的H5延后执行 webviewDidFinishLoad

3. 网络“通畅”，但页面请求未发出

问题：
某些用户手机经常性出现页面加载不完全问题。排除个别现象，那么其他真实用户也会出现此状态，严重影响后续但使用体验。

跟运维探查几次，大部分在日志都无法抓到黑羽的请求。

猜测：

App访问H5页面，请求未发送，但访问的是本地缓存？

4. 网络通畅，页面请求已发出，但 ajax 请求未发出

问题：

H5页面报错等。

原因：

此类事故属于 H5 问题，比如Android低机型不支持新特性等，导致JS报错异常，从而中端后续操作

5. 不算白屏现象，属于 NSProgressbar bug。

问题：

iOS Webview 进度条加载总是卡在末尾处，过个2～5s时间在跑完。

原因：

iOS 在触发委托 webviewDidFinishLoad ，会判断 document.readyState 是否等于 complete，相等，蓝颜色的进度条才会走完。

但是呢？触发 webviewDidFinishLoad 事件那个时间点，未必 document.readyState 的状态是 complete，也有可能是 interactive 状态，所以判断不是很准确，造成加载没完成的假象（其实是已加载完毕状态）

------ 扩展阅读 （刚发现一遍算比较好的 UIWebview 总结）

UIWebView相关协议方法总结

UIWebView高级

吐槽 UIWebView 和 WKWebview

iOS H5 容器的一些探究（一）：UIWebView 和 WKWebView 的比较和选择

https://www.slideshare.net/lpilorz/webview-security-on-ios-en

WebView·开车指南