css重绘和重排会iphone微信浏览器闪退

1.项目背景

图1

图2

用js做一个响应式网站，在桌面端打开的时候是图1效果，在手机端打开的时候是图2效果，原理是：根据屏幕宽度计算一个缩放比z，然后用js去遍历DOM页面元素，去缩放其宽高。

2.问题

当图片内容很少的时候，没出现什么问题，当内容变多（大概一个页面长到差不多100屏左右的时候），iphone端会出现闪退bug，andorid端则正常显示，桌面端也没出现什么性能问题。

3.原因

究其android端和iphone端表现不一样，是因为android端高版本微信用的是微信X5浏览器内核，iphone微信浏览器用的是苹果的webkit内核，它们处理css重排的逻辑有所差异，从而导致其性能表现的差异。

仔细的检查了代码，排查问题出现的原因：

1.http请求过多

2.手工模板效率问题

3.做移动适配时候，js操作DOM使得浏览器发生过多的重绘和重排（当前元素重排引发后面一系列相关元素的重排），引发闪退

4.分析

做了许多实验来测试苹果手机闪退的原因，发现刚才提到的原因3是主要的原因。原因1和原因2都是项目中可以优化的地方。

原因1，把一些要重复用到的图片做成雪碧图（css sprite技术），可参照上篇文章。

原因2，js append html代码的一些小细节，先写循环组装成一个字符串，一次性append，性能能提高不少。如果一个页面用append过多次数也可以引发闪退（每次append都会引发后面相关元素的重排和重绘）。

原因3，

3.1 实验排查发现，产生闪退的原因在操作外层DOM 宽度时候引起的

  $(".main").css("width", 700 * zoom + "px");

HTML：

<div class="wrap">
    <div class="main">
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
         .....
    </div>
</div>

   

3.2 因为实验内容是临近闪退的临界值，所以能发现许多能引发css重排而产生性能问题的小细节，如（position：fixed元素如果没加z-index，会闪退），加了z-index后就不会了。 

4.解决方案

就是要解决原因3.1，暂时想到了一个方法，绕过缩放.main：

因为.page元素在页面上看已经缩放到了适当的大小，我给wrap设置了一个overflow:hidden， .main宽度不用缩，刚刚好。

要彻底探究其原因，就得去了解下各种浏览器处理css重绘和重排的机理了。