笔者经常与微信手Q平台打交道，偶尔会遇到 H5 页面导致 iOS 下微信手Q程序闪退（崩溃）的情况。
导致微信手Q闪退的原因笔者遇到的大概有以下几种：
- CSS-3D 加速过多；
- 带滚动条的结构过多；
- webGL 绘制图像过多
本文仅讨论「CSS-3D」加速造成微信手Q闪退的必要条件」。
科普一下「CSS-3D加速」也叫「CSS硬件加速」，它的原理是利用 GPU加速图像渲染。每一个带有 3D 属性的 DOM 节点都会在 GPU 生成一个对应的纹理，而这个纹理可以被快速地操作（如：移动、缩放和旋转）。GPU纹理会占用一定的内存，而微信手Q分配给内嵌 webview 的 GPU 内存是固定的，一旦GPU纹理超过了这个内存就将导致所在环境闪退（崩溃）。
微信手Q分配给 GPU 纹理的内存是多少？
老实说，笔者不了解微信手Q的内核，所以回答不了。不过，既然GPU纹理超过指定内存就会闪退，那么可以通过实验的方法推导出闪退的临界值。
带 3d 样式的 DOM 节点与 GPU 纹理的面积大小是一一对应的，所以笔者直接用 「width * height px2」 描述 GPU 纹理的大小。
安全值实验
为了方便计算，笔者使用尺寸为 100px * 100px 的 div 作为实验对象，样式如下：
.rect {
width: 100px;
height: 100px;
transform: translateZ(0);
}具体的实验案例笔者放在：https://leeenx.github.io/demo...。二维码如下：
笔者手头上只有 iPhone6 & iPhone6+，测试的数据如下：
| 设备 | APP环境 | rect 数量 | 描述 |
|---|---|---|---|
| iPhone6 | 手Q | 1400 ~ 2700 | 第一次进入不闪退，刷新当前页面闪退 |
| iPhone6 | 手Q | >2700 | 进入直接闪退 |
| iPhone6+ | 手Q | 700 ~ 1400 | 第一次进入不闪退，刷新当前页面闪退 |
| iPhone6+ | 手Q | >1400 | 进入直接闪退 |
| iPhone6 | 微信(UIWebview) | 1400 ~ 2700 | 第一次进入不闪退，刷新当前页面闪退 |
| iPhone6 | 微信(UIWebview) | >2700 | 进入直接闪退 |
| iPhone6+ | 微信(UIWebview) | 700 ~ 1400 | 第一次进入不闪退，刷新当前页面闪退 |
| iPhone6+ | 微信(UIWebview) | >1400 | 进入直接闪退 |
| iPhone6 | 微信(WKWebview) | 100000+ | 不闪退 |
| iPhone6+ | 微信(WKWebview) | 10000+ | 不闪退 |
注意事项：
- 测试页面的「生成」按钮会刷新后重新生成对应个数的 rect
- UIWebview 是指微信旧的webview，具体可以参见：iOS网页开发适配指南
微信环境下有个利好的消息：
微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核
也就是说「3d加速」已经不会造成新版微信闪退了。坏消息是手Q仍然有闪退的风险。
通过上面的数据其实可以找到 iPhone6/6+ 的闪退临界值为：1400 * 100 * 100 px2 与 700 * 100 * 100 px2
但是其实我们可能需要的是安全值而不是临界值，笔者根据自身经验定了一个安全值：
- iPhone6 3D加速的安全面积:
1000 * 100 * 100 px2 - iPhone6+ 3D加速的安全面积:
500 * 100 * 100 px2
由于我们的页面都会在 iPhone6 & iPhone6+ 上运行，所以真正的 「安全值是 500 * 100 * 100 px2」。
500 * 100 * 100 px2 有多大？
iPhone6+ 的 webview 尺寸是：414 * 736，那么「500 * 100 * 100 / 414 * 736 ≈ 16」。也就是说「3d加速的安全面积是16个手机屏幕」。这个尺寸并不大，所以加速需小心，安全最重要。
可能会有人会想iPhone6+闪退的门槛比 iPhone6 低这么多？
iPhone6 和 iPhone6+ 官方配置上除了屏幕之外，其它硬件是同样的配置，所以有这样的疑问其实很正常。很明显 iPhone6 与 iPhone6+ 闪退门槛的差异源自物理屏幕。
iPhone6 的 dpr = 2， iphone6+ 的 dpr = 3；而 GPU 纹理是按物理分辨率存储的。假设一个带
3D 样式的 div 的尺寸为 100px2，那么这个节点在 iPhone6 对应的 GPU 纹理为 「2 * 2 * 100px2」，在 iPhone6+ 对应的 GPU 纹理为 「3 * 3 * 100 px2」。
很容易可以得到以下的数字：
3 * 3 * 100 px2 / 2 * 2 * 100px2 = 2.25
2.25 就是 iPhone6 与 iPhone6+ 的 GPU 加速的门槛差，其实通过上面的数据也反映了类似的比率。
结语
本文出示的数据是非生产环境下得出来的，真实的生产环境会受其它外因的影响估计数据要再打一下折。
感谢耐心阅读完本文章的读者。本文仅代表笔者的个人观点，如有不妥之处请不吝赐教。