最近写一个H5页面A时发现一个怪异的问题：从子页面B返回时，A页面会先进行加载，然后即将加载完成的时候白屏。
后检查了安卓手机、电脑浏览器，不存在此问题。在iOS 微信里面进行测试的过程中发现也存在此问题，只是复现频率比较低。
因此判定可能是iOS 系统浏览器内核的原因，查了一下我们iOS app里面的浏览器内核是WKWebview，搜了一下“WKWebview”，google浏览器联想推荐搜索“WKWebview 白屏”赫然在目，其中一篇文章WKWebView白屏原因及其解决方案
对iOS WKWebView白屏的原因做了详细说明。
而后我用UIWebView去加载了我的页面，并重新按照复现步骤进行测试，在浏览器内核为UIWebView上面此问题不会出现。这也更加印证了上面链接中作者的观点。
关于WKWebView白屏的原因及如何在iOS上面尽可能的做兼容不是本文的重点，本文的重点问题是：为什么我的H5页面会内存暴增！
上面说过，在iOS 微信里面进行测试的过程中发现也存在此问题(虽然复现频率比较低)，猜测是微信app也对类似问题做了适配处理。
继续说我的问题，分析代码，在子页面B中其它同事做了
window.location.reload();
我发现在从子页面B回到A的时候页面内存剧增
image.png
而这个内存释放的过程比重新加载渲染A的时间要长的多，因A、B页面内图片较多且都较大，这就导致每一次reload都会重新去加载整个页面，重新去加载所有图片到内存中，而上一次加载到内存中的图片还未来得及释放，然后“Duang”，iOS的WKWebView承受不住这么大的内存消耗，Duang，白屏了。
目前我的解决方案是：
1、需要同事去掉reload，这个reload其实也造成了A页面浏览状态的丢失。慎用reload
2、加载图片的时候避免加载特大图，我在B页面中发现了数个2-3 M的图片，其它的400-600kb之间。可以对图片进行压缩
3、在iOS客户端做最后的兼容处理，当然，这依赖于客户端发版。
以上，相信基本就可以解决白屏的问题，真有问题，认真审查H5代码，事出必有妖。
网友评论