ios加载本地html文件白屏时间过长,iOS WebView加载网页触摸白屏bug排查及修复

最近兄弟团队给提了一个bug，说他们iOS端的网页，触摸后很大几率出现白屏，一开始我是很不信的，后面本地调试竟然更高概率发生。

首先，系统是iOS10、11，网页是高度100%，中间部分越界滚动的一个常规效果，框架vue，不过感觉bug和vue关系不大，大概结构如下：

由于希望得到平滑点的滚动，在中间滚动部分加了

.page-content {

-webkit-overflow-scrolling: touch;

overflow-x: hidden;

overflow-y: auto;

...

}

本来表现很正常的东西，突然出现白屏，而且是页面触摸就白屏，测试了好几部手机，个别是白屏后一直白着，个别是白屏后过半秒左右又自动恢复正常，有些不解，但看样子有点像是重绘或者重排导致的。

网上找到类似介绍如下：

webkit在绘制页面时会将结构分为各种层，当层足够大时就会变成很大的平铺层。这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了，这对渲染速度来说相当的重要。webkit会给各种层分配一定大小的“后备存储器”在内存里缓存起来，这就是绘制层的上下文，通过这个上下文就可以很容易的实现各种效果(动画，3D变换等)，“后备存储器”内存占用大小不仅依层而定，跟设备和显示方式也是有关的，假设这在普通屏幕下是1：1的，但在Retina屏幕下则是1：2的，并且放大时这个量会成倍增加；一张图片是10X10，普