css硬件加速

加速1

一.什么是硬件加速

简而言之:利用GPU加速页面动画的渲染。将有关动画运算从CPU移植到GPU运算。

GPU特性:

GPU可以存储一定数量的纹理并且高效的操作这些纹理(比如特定的移动,缩放,旋转等)。

渲染的方式:

浏览器不会在动画的每一帧都绘制一次,而是生成DOM元素的快照,并作为GPU纹理存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。

二.如何知道动画是否开启了硬件加速方式渲染

第一步:以谷歌为例,打开谷歌浏览器。F12,勾选Show layer borders。如下图所示。1

第二步:可以找一个有运用了css3写的动画,如果没有开启,整个页面只有蓝色瓦线。动画如果出现黄色线框,则开启了硬件加速。

浏览器会把需要渲染的元素放到特定的Composited Layer中.上述步骤所说的蓝色线框,即浏览器渲染时候的『瓦片』,浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片,以节省性能开销。而黄色线框,代表了这个元素被放到特殊的复合层中渲染,跟主文档不在一个层中。

支持硬件加速浏览器包括了:Chrome, FireFox, Safari, IE9+和最新版本的Opera,其中safari支持最好。浏览器如果检测到某个DOM元素运用了某些CSS规则就会开启硬件加速,CSS3出的3D变换最为明显,可以写几个DEMO去测试一下。

那问题来了:JS实现的动画,我想开启硬件加速,让动画更流畅的渲染怎么办?

解决方案:

.div1 {

animation: someAnimation 1s;

transform: translate3d(0, 0, 0); /* 强制硬件加速 */

}

只要在需要做动画操作的DOM元素,加上上面这段代码。熟悉css3的人都知道,并没有进行旋转等,但是却开启了硬件加速,可以写个DEMO测试一下。

三.哪些方法可以开启硬件加速?

以谷歌为例:

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

满足上面任意一种情况,都会开启硬件加速来渲染开启硬件加速。实践是检验真理的唯一标准。建议学习的时候,针对上面每一条都去写个DEMO,验证一下。

四.硬件加速利弊分析

开启硬件加速渲染动画,最大好处在于加速动画的渲染。每秒60帧的顺滑效果,是我们追求的。测试动画方法:Chrome的用户应该启用chrome://flags/#show-fps-counter。同样Firefox也要在about:config里面启用layers.acceleration.draw-fps。开启后,重启浏览器。如果动画帧率下降到60fps,需要找下原因了。

哪些因素会导致硬件加速动画不加速反而减速?

1.创建的合成层的数量:因为每一个层都对应了一个GPU纹理,所以有太多的层会消耗很多内存。这可能导致出现预期之外的行为,可能会导致潜在的崩溃。

2.保持GPU和CPU之间的传输量达到最小值。换句话说,层的更新数量最好是一个理想的常量。每次合成层更新,一堆新的像素就可能需要传输给GPU。因此为了高性能,在动画开始之后避免层的更新也是很重要的(避免动画进行中时有其他层一直更新导致拥堵)。这可以通过选择恰当的CSS属性实现动画来解决:transformation(translate, scale, rotate)、opacity或者filters

别忘了,写几个DEMO测试一下。

9