css3 transform:translateZ(0)解决一个存在已久并早已知悉解决方案的渲染问题… 最终,只用了一小段的css代码就解决了
在监听滑鼠滚动事件时,判断上下执行相应动画总是会卡顿(帧数很低,不稳定),之前了解过 -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渲染相比,提升了速度和性能。
html在浏览器中会被转化为DOM树,DOM树的每一个节点都会转化为RenderObject, 多个RenderObject可能又会对应一个或多个RenderLayer。浏览器渲染的流程如下:
这和游戏中的3D渲染类似,虽然我们看到的是一个立体的人物,但这个人物的皮肤是由不同的图片“贴”和“拼”上去的。网页比此还多了一个步骤,虽然最终的网页是由多个位图层合成的,但我们看到的只是一个复印版,最终只有一个层。当然有的层是无法拼合的,比如flash。
总结一下开启gpu加速的一些方法:
按照上述方法开启gpu加速后,涉及到的区域就会被gpu直接渲染在屏幕对应区域,不用和浏览器进程共享内存和减轻cpu负担是gpu加速的理论原理。
gpu也开始工作,设备耗电量增加。
会出现一些渲染上面的问题:被加速部分元素z-index值和未被加速部分之间将无法正常比较。
被加速元素如果有position定位的子元素,这些子元素有可能无法渲染到被加速元素以外的区域——left设置成-10000px都会渲染成0px;
pc上有些显卡还会出现渲染bug