CSS3强制启用 GPU 加速渲染 CSS3 动画

文章摘要moonshot-v1-8k

Standby API Responsing..

CSS3强制启用 GPU 加速渲染 CSS3 动画

css3 transform:translateZ(0)解决一个存在已久并早已知悉解决方案的渲染问题… 最终，只用了一小段的css代码就解决了

transform: translate(x,y);

在监听滑鼠滚动事件时，判断上下执行相应动画总是会卡顿（帧数很低，不稳定），之前了解过 -webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);属性，也就是强制启用gpu 加速渲染动画

  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