[WebView] 白屏原因 iOS

[jschyz]

1. 蓝色进度条 – NJKWebViewProgress

再说白屏之前，先来说说 NJKWebViewProgress，在iOS大概表现为 { height: 2px, color: blue } 细线。

对，这跟细细对蓝线就是 NJKWebViewProgress 实现的，既然有3.7k的star，而且 facebook 大佬也在用。
假如我说 webview 白屏原因跟 NJKWebViewProgress 有见解原因呢，你们会不会一口盐汽水喷死我啊（逃。。。

2. iOS View层布局概念

在视图中，

NavigationBar 有3种元素：返回、Title、分享
WebView 由于底色原因，显示白色底配色方案 – （白屏的由来）
NJKWebViewProgress 则依托在 NavigationBar 层最底部 { position: fixed; bottom: 0; height: 2px; width: 0 }

3. NJKWebViewProgress 生命周期

当加载一个神秘的 H5 时，首当其冲被 shouldStartLoadWithRequest 拦截，拦截做什么呢？ 当然是我们的特色服务 –- 追加签名 及 白名单验证逻辑。注意此时进度为0，用CSS表示 { width: 0px }。

好了，上一步验证无误后，就开始跟服务器进行连接勾搭数据了，当接收到服务端的握手后，就触发 webViewDidStartLoad 委托。设置进度 0.1 ，用CSS表示 { width: 10%}

当网页加载正常时，并且内部资源加载差不多时，触发 webViewDidFinishLoad 委托。分情况设置进度条进度，具体看下图。

didFailLoadWithError 网页加载失败（断网、网络延迟..）是触发。

好了，了解上面3个基础知识、概念，接下来就来说说，白屏！！！！

@cto 在风和日丽当早晨，浏览世界页看到 雪弗兰 汽车广告 banner，（大概他想买入手一辆吧 ^_^），点进去后发现页面是白板，白板，白板啊亲！

是没有进度条的白板啊亲！我正好也在现场（鼓励下不迟到的我：手动滑稽）。见证了@冬冬 有史以来困扰他很久的白屏 （不虚此行）

分析疑点：

页面白屏没有 Progressbar，那么说明执行到 shouldStartLoadWithRequest 这步，没有向 webViewDidStartLoad 进军！

接着，小心翼翼将 http://www.in66.com/g/mp5dv 链接复制到 MAC 端 Chrome 查看（我的小心肝颤抖的不要不要：( ^ω^ ) 发现很正常浏览加载呀，只是页面 JS 、CSS很多而已。

说明网络是通畅的，当shouldStartLoadWithRequest 设置为0，会立马通知执行 webViewDidStartLoad 让进度条走向 10%的位置。

好奇怪，为什么是白板啊啊？

继续分析，神秘的 H5 链接，既然是个 短链接，然后进行跳转到真实到 页面。

由 WebView 生命周期得知，当页面发生重定向后，将重新执行 shouldStartLoadWithRequest 委托。也就是将进度条给重置为 0了！

基于此条线索，脑袋模拟出尽可能多的例子。一一排除得到最有可能的结果 – 重定向的网页超时响应（网络环境差，弱网，丢包严重）

幸不辱命，实验使用 charles 对重定向页面进行限速，复现了 @cto 早晨白屏页面之迷。

接下来，将对 NJKWebViewProgress 改造，最起码白屏页面有进度条显示（作为一个进度条对尊严）。

吐槽：

钉钉也会出现白屏现象，应该也是用对 NJKWebViewProgress 库吧。为什么这么流行对库，没人提此 issue 呢？

原来是我方 H5 经常用短链接，重定向对页面包装搞事情，所以这类事件频繁。到底是谁的锅呢？

反正不是 H5 的锅。