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

CSS HTML 200 05/09/2019

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

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

transform: translate(x,y);

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

以下是开启gpu加速的 CSS 代码:

  
  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

谷歌广告支持