iOS 加载网络页面白屏问题和参考解决办法

前言

白屏问题iOS开发中最令人头疼的问题之一。WKWebView随iOS8 推出已有4年了,解决了很多UIWebView的问题,比如内存泄漏、加载速度慢、不太兼容iOS10, iOS11等。Apple Support iOS版本的市场分布情况,绝大部分的设备都是iOS8 以上,iOS开始强制使用HTTPS请求,但还有部分公司的APP支持iOS7和HTTP请求,要赶上时代的步伐啊!

WKWebView的特点

  • 性能高,稳定性好,占用的内存比较小
  • 支持JS交互
  • 支持HTML5 新特性
  • 可以添加进度条(然并卵,不好用,还是习惯第三方的)
  • 支持内建手势
  • 据说高达60fps的刷新频率(不卡)

HTTPS的特点

  • HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中不被窃取、改变,确保数据的完整性。

  • HTTPS协议的安全是有范围的,在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。

  • SSL的专业证书需要购买,功能越强大的证书费用越高。SSL 证书通常需要绑定 固定IP,为服务器增加固定IP会增加一定费用。

  • 相同网络环境下,HTTPS协议会使页面的加载时间延长近50%,增加10%到20%的耗电。此外,HTTPS协议还会影响缓存,增加数据开销和功耗。

  • HTTPS 连接服务器端资源占用高较高多,相同负载下会增加带宽和服务器投入成本;

    在使用的时候还是有很多坑,这其中就有屡见不鲜的白屏问题。经过一些调试、google 发现不外乎这几个原因。网络通畅是前提哈,请用4G或WiFi网络!!!话不多说了,来一起看看都有哪些可能的问题。

一. URL网址无效或含有中文字符(入门级错误)

APP内展示URL的来源主要是后端返回或前端拼接,甚至前端hardcode,网址存在不确定性,可能是无效或含有中文字符。大部分浏览器是能打开带有中文字符的网络地址,但是iOS的内嵌网页加加载框架无论是UIWebView还是WKWebView,都不能打开带有中文字符的网络地址,需要先对地址字符串做UTF8转码。参考代码:

urlString = [urlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

二. HTTP请求问题

在iOS9 中,系统将原http协议改成了默认https协议,使用 TLS1.2 SSL加密请求数据。可以通过升级支持HTTPS协议请求,也可以通过设置强制使用HTTP请求。在Info.plist中添加NSAppTransportSecurity类型Dictionary。在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES。部分第三方应用不支持HTTPS,需要在在info.list设置HTTP请求白名单,允许部分请求可以是HTTP。参考代码:

<key>LSApplicationQueriesSchemes</key>  
      <array>           
<!-- 微信 URL Scheme 白名单-->     
         <string>wechat</string>   
         <string>weixin</string>   
       </array>

三. HTTPS 请求,未实现证书认证代理导致页面不加载的问题

如果是HTTPS 请求,需要在WKWebView 的 WKNavigationDelegate 中的一个代理方法 中实现获取服务器认证的逻辑,最后返回给服务端。 这个问题常常出现在客户端无法获得安全认证的时候(没有证书,或者是自建证书),比如说https://www.apple.com/cn 是默认的苹果中国的地址,但是 https://www.apple.com.cn 也是可以访问的(会自动跳转到 https://www.apple.com/cn ) ,只是在Safari 的安全认证中通不过,我们需要在代理方法中通过服务端给的验证方式创建一个凭证,然后继续申请访问。比如在Safari 浏览器中第一次访问时就会弹出对话框,点击继续后就可以继续访问。通过实现以下代理即可解决

func webView(webView: WKWebView, didReceiveAuthenticationChallenge challenge: NSURLAuthenticationChallenge, completionHandler: (NSURLSessionAuthChallengeDisposition, NSURLCredential?) -> Void)
{  // 判断服务器采用的验证方法
    if challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust {
        if challenge.previousFailureCount == 0 {
            // 如果没有错误的情况下 创建一个凭证,并使用证书
            let credential = NSURLCredential(forTrust: challenge.protectionSpace.serverTrust!)
            completionHandler(.UseCredential, credential)
        } else {
            // 验证失败,取消本次验证
            completionHandler(.CancelAuthenticationChallenge, nil)
        }
    } else {
        completionHandler(.CancelAuthenticationChallenge, nil)
    }
}

四. iOS 8.0 - iOS 8.2 偶尔白屏问题

这个是WKWebView 刚推出时的Bug,偶尔会出现白屏,如果想避免这种问题,只能通过版本号判断,小于8.2的系统暂时使用UIWebView。

五. 滚动组件嵌套,未能刷新页面

在UITableView或UICollectionView中嵌套WKWebView引起的,可以试着将UITableView或UICollectionView中替换为UIScrollview 。可能是因为页面滚动后没有正常的调用 WKWebView 的 _updateVisibleContentRects 方法刷新需要渲染的内容导致的。

六. 硬件内存不足、进程崩溃

在 UIWebView 上当内存占用太大的时候,App Process 会 crash;而在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象。在 WKWebView 中加载下面的测试链接可以稳定重现白屏现象:

http://people.mozilla.org/~rnewman/fennec/mem.html

这个时候 WKWebView.URL 会变为 nil, 简单的 reload 刷新操作已经失效,对于一些长驻的H5页面影响比较大。参考解决方案:

1、借助 WKNavigtionDelegate

iOS 9以后 WKNavigtionDelegate 新增了一个回调函数:

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0));

当 WKWebView 总体内存占用过大,页面即将白屏的时候,系统会调用上面的回调函数,我们在该函数里执行[webView reload](这个时候 webView.URL 取值尚不为 nil)解决白屏问题。在一些高内存消耗的页面可能会频繁刷新当前页面,H5侧也要做相应的适配操作。

2、检测 webView.title 是否为空

并不是所有H5页面白屏的时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗的H5页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象(拍照过程消耗了大量内存,导致内存紧张,WebContent Process 被系统挂起),但上面的回调函数并没有被调用。在WKWebView白屏的时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear 的时候检测 webView.title 是否为空来 reload 页面。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容