H5页面内存暴增导致iOS WKWebview白屏

最近写一个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代码,事出必有妖。

你可能感兴趣的:(H5页面内存暴增导致iOS WKWebview白屏)