GPU硬件加速原理 /转

时间 2021-07-22

标签 css html html5 css3 web chrome 浏览器 app 性能测试栏目 CSS 繁體版

原文原文链接

现代浏览器大均可以利用GPU来加速页面渲染。每一个人都痴迷于60桢每秒的顺滑动画。在GPU的众多特性之中，它能够存储必定数量的纹理（一个矩形的像素点集合）而且高效地操做这些纹理（好比进行特定的移动、缩放和旋转操做）。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次，而是生成DOM元素的快照，并做为GPU纹理（也被叫作层）存储起来。以后浏览器只须要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。这就叫作GPU合成，也常常被称这种借助于显卡的优点改变渲染操做：一般被笼统的称为“硬件加速(hardware acceleration)”。css

“注”：fps:帧/秒(frames per second)的缩写,也称为帧速率。是指1秒钟时间里刷新的图片的帧数html

GPU（Graphic Processing Unit，图形处理器）。GPU是相对于CPU的一个概念，因为在现代的计算机中图形的处理变得愈来愈重要，须要一个专门的图形的核心处理器。在浏览器中用css开启硬件加速，使GPU发挥功能。CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那咱们怎样才能够切换到GPU模式呢，不少浏览器提供了某些触发的CSS规则。如今，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。在一些不须要3D效果的时候须要一些技巧开启硬件加速，例如：为动画DOM元素添加CSS3样式-webkit-transform.:transition3d(0,0,0)或-webkit-transform.:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPUhtml5

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

在webkit内核的浏览器中，另外一个行之有效的方法是css3

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

原生的移动端应用老是能够很好的运用GPU，这是为何它比网页应用(Web apps)表现更好的缘由。硬件加速在移动端尤为有用，由于它能够有效的减小资源的利用。若是经过你的测试，结果确是提升了性能，你才可使用这些方法。使用GPU可能会致使严重的性能问题，由于它增长了内存的使用，并且它会减小移动端设备的电池寿命。web

硬件加速的工做原理：chrome

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后造成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每个渲染元素会被分到一个图层中，每一个图层又会被加载到GPU造成渲染纹理，而图层在GPU中transform 是不会触发 repaint 的，这一点很是相似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。浏览器

3D 和 2D transform 的区别就在于，浏览器在页面渲染前为3D动画建立独立的复合图层，而在运行期间为2D动画建立。动画开始时，生成新的复合图层并加载为GPU的纹理用于初始化 repaint。而后由GPU的复合器操纵整个动画的执行。最后当动画结束时，再次执行 repaint 操做删除复合图层。app

使用 GPU 渲染元素，并非全部的CSS属性都能触发GPU的硬件加速，实际上只有少数属性能够，好比下面的这些：性能

transform
opacity
filter

若是某一个元素的背后是一个复杂元素，那么该元素的 repaint 操做就会耗费大量的资源，此时也可使用上面的技巧来减小性能开销。测试

使用硬件加速的注意事项

使用硬件加速并非十全十美的事情，好比：

内存。若是GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤其明显，因此，必定要牢记不要让页面的每一个元素都使用硬件加速。
使用GPU渲染会影响字体的抗锯齿效果。这是由于GPU和CPU具备不一样的渲染机制。即便最终硬件加速中止了，文本仍是会在动画期间显示得很模糊。

层建立标准

什么状况下能使元素得到本身的层？虽然 Chrome 的启发式方法(heuristic)随着时间在不断发展进步，可是从目前来讲，知足如下任意状况便会建立层：

3D 或透视变换(perspective transform) CSS 属性
使用加速视频解码的元素
拥有 3D (WebGL) 上下文或加速的 2D 上下文的元素
混合插件(如 Flash)
对本身的 opacity 作 CSS 动画或使用一个动画 webkit 变换的元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在本身的层里)
元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

主要是最后一条,若是有一个元素，它的兄弟元素在复合层中渲染，而这个兄弟元素的z-index比较小，那么这个元素（不论是不是应用了硬件加速样式）也会被放到复合层中。

这类问题尤为是用了轮播、动画loading的页面，出现这问题很常见。另外推荐在追查性能问题的时候打开『show composited layer borders』选项，若是页面有不少黄色的框确定是不对的。最可怕的是，浏览器有可能给复合层以后的全部相对或绝对定位的元素都建立一个复合层来渲染。使用3D硬件加速提高动画性能时，最好给元素增长一个z-index属性，人为干扰复合层的排序，能够有效减小chrome建立没必要要的复合层，提高渲染性能，移动端优化效果尤其明显。

参考：

http://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html

http://www.360doc.com/content/13/1218/10/10504424_338073233.shtml

http://blog.csdn.net/xiebaochun/article/details/50274963

http://www.html5rocks.com/zh/tutorials/speed/layers/