CSS3强制启用 GPU 加速渲染 CSS3 动画
css3 transform:translateZ(0)解决一个存在已久并早已知悉解决方案的渲染问题… 最终，只用了一小段的css代码就解决了
transform: translate(x,y);
在监听滑鼠滚动事件时，判断上下执行相应动画总是会卡顿（帧数很低，不稳定），之前了解过 -webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);属性，也就是强制启用gpu 加速渲染动画
代码语言：javascript复制 transform:translateZ(0px);
-webkit-transform-style:preserve-3d;
-webkit-transform: translate3d(0,0,0);这个CSS属性等于告诉了浏览器用GPU来渲染该层，与一般的CPU渲染相比，提升了速度和性能。
层(Layer)的概念
html在浏览器中会被转化为DOM树，DOM树的每一个节点都会转化为RenderObject, 多个RenderObject可能又会对应一个或多个RenderLayer。浏览器渲染的流程如下：
- 获取 DOM 并将其分割为多个层(RenderLayer)
- 将每个层栅格化，并独立的绘制进位图中
- 将这些位图作为纹理上传至 GPU
- 复合多个层来生成最终的屏幕图像(终极layer)。
这和游戏中的3D渲染类似，虽然我们看到的是一个立体的人物，但这个人物的皮肤是由不同的图片“贴”和“拼”上去的。网页比此还多了一个步骤，虽然最终的网页是由多个位图层合成的，但我们看到的只是一个复印版，最终只有一个层。当然有的层是无法拼合的，比如flash。
总结一下开启gpu加速的一些方法：
- html5 video(bing首页动态背景使用video的原因之一吧)
- transition 和 animation（在ipad上使用会开启gpu加速)
- -webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0);
- 给元素transform加上translateZ(0px),iScroll采用的方法
按照上述方法开启gpu加速后，涉及到的区域就会被gpu直接渲染在屏幕对应区域，不用和浏览器进程共享内存和减轻cpu负担是gpu加速的理论原理。
开启gpu加速带来的问题：
gpu也开始工作，设备耗电量增加。
会出现一些渲染上面的问题：被加速部分元素z-index值和未被加速部分之间将无法正常比较。
被加速元素如果有position定位的子元素，这些子元素有可能无法渲染到被加速元素以外的区域——left设置成-10000px都会渲染成0px；
pc上有些显卡还会出现渲染bug
