解决iOS的H5页面卡顿以及键盘回落后留白问题

最近做的一个H5刚开开心心提测就被QA一顿怼😭，当input输入完成后页面简直卡成翔💩，当我接过手机亲自测试时慌的一批😢，顿时开始怀疑人生😏，马上开始进入紧张的排查中😊，经过两天不断的调试优化😂，最终完美解决所有问题❤️，此文可以彻底解决iOS的H5页面卡顿以及键盘回落后留白问题😄。

#1.定位问题
当QA和我反映页面卡顿只在iOS上出现时，第一反应肯定不是代码的问题，我也很纳闷iOS性能普遍要比android高啊，为啥会出现这么严重的卡顿，有点慌啊。于是开始了一次惊心动魄的前端性能优化之旅,在Google大概的看了几篇文章，感觉到应该是我在页面加了大量的动画造成了页面重排（reflow）导致的，初步定位问题是重排造成的😄

#2.解决卡顿
把问题定位为重排造成的，于是就开始针对性的排查容易造成重排的隐患，发现有动画的元素都是absolute的，应该问题不大。最后给最外层的元素先后增加了以下属性：

.wrap {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit)发挥功能，从而提升性能,如果要充分发挥浏览器的性能时，慎用will-change: transform;至于为什么请看CSS will-change 属性;排查了一番该定位