测试是否为CSS动画启用了硬件加速？

Question

我如何判断(出于测试目的)是否已为CSS动画启用硬件加速？

我有以下代码,它基本上放大了一个元素并使其全屏(不使用HTML5全屏API).当使用jQuery动画时,它在大多数手机上像一只口吃的哮喘龟一样运行,所以我使用的是CSS3.

这是jsFiddle示例:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    top: 0 !important;
    left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#makeFullscreen {
    margin-top: 20px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
    <div id="map" class="map">
        <button id="makeFullscreen">Make Fullscreen</button> 
    </div>
</div>

这会添加一个类,并且元素使用CSS转换从一个状态转换到下一个状态.这比jQuery快,但在iOS和Android上仍然很难.

但我在这里读到你可以通过指定一个基本上什么都不做的3d变换来强制使用GPU加速转换,如下所示:

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

但是,在将其添加到我的CSS之后,我发现没有视觉上的改进.

问题然后......

有没有办法在任何浏览器中通过开发工具查看是否已启用硬件加速？我不需要用脚本来检测这个,我只想知道测试目的.

Answer 1

概观

如果满足所有这些条件,则元素上的CSS属性转换是硬件加速的:

1. 浏览器中启用了硬件加速层合成
2. 正在转换的CSS属性是可加速的
3. 该元素已被赋予自己的合成层

通常,这些条件的要求是:

1. 必须启用相关的硬件加速选项,并且不得将设备的GPU和图形驱动程序列入黑名单
2. 只有合成CSS属性(opacity,transform: translate/ scale/ rotate等)才能加速
3. 每个浏览器都有特定的原因决定是否给元素一个自己的合成层(或者可以通过使用"更快"的黑客来强迫它transform: translate3d)

硬件加速层合成

要确定是否启用了此功能:

铬

1.一般加速度

• 去 chrome://settings
• 单击+显示高级设置按钮
• 在" 系统"部分中,检查" 使用硬件加速时可用"复选框的状态

如果启用了加速,则:

2.加速合成

• 去 chrome://gpu
• 在" 图形功能状态"部分中,检查" 合成"的值.这将是以下之一:
  • 硬件加速
  • 仅限软件,硬件加速不可用

有关Software Compositor的更多详细信息,请参阅以下文档:

在某些情况下,硬件合成是不可行的,例如,如果设备的图形驱动程序被列入黑名单或设备完全没有GPU.对于这些情况,GL渲染器的另一种实现称为SoftwareRenderer

(注意:Chrome还有一个旧版软件渲染路径,"截至2014年5月仍然存在,但很快就会在Blink中完全删除.")

这是一篇包含更多信息的精彩文章:Chrome中的加速渲染.

火狐

1.一般加速度

• 转到Firefox的首选项
• 转到" 高级"选项卡
• 转到" 常规"子选项卡
• 检查" 可用时使用硬件加速"复选框的状态

如果启用了加速,则:

2.层加速

• 去 about:config
• 搜索 layers.acceleration.disabled

如果启用了图层加速(如果值为false),则:

3. GPU加速窗口

• 去 about:support
• 在" 图形"部分中,检查GPU加速Windows的值

如果它没有开始0/,并且显示渲染API(例如,OpenGL,Direct3D),则GPU加速是活动的.

苹果浏览器

• 通过在终端中运行此命令启用Safari的调试菜单:
  defaults write com.apple.Safari IncludeInternalDebugMenu 1
• 打开(或重启)Safari
• 在Safari的" 调试"菜单中,检查" 绘图/合成标志"子菜单中" 禁用加速合成"选项的状态

可加速的CSS属性

可以硬件加速的唯一CSS属性转换是在渲染过程的合成阶段发生的那些.例如:

• opacity
• transform: translate和它的朋友们:translateX,translateY,translateZ,translate3d
• transform: scale和它的朋友们:scaleX,scaleY,scaleZ,scale3d
• transform: rotate和它的朋友们:rotateX,rotateY,rotateZ,rotate3d

要从加速中充分受益,必须不转换非合成属性.例如:

• just上的转换transform: translate可以获得加速的全部好处(因为元素的层可以简单地由GPU重新编译).
• 在两个过渡transform: translate和width将获得几乎没有任何好处,从加速度(因为在过渡width原因元素的层要由CPU对每个动画帧重新绘制).

合成图层和彩色边框

浏览器的渲染引擎决定(基于用户首选项,CSS样式等)是否为元素提供自己的合成层.

例如,Chrome有这个原因列表,并且在以下选项中也有此选项chrome://flags:

使用过渡合成RenderLayers
启用此选项将使具有不透明度,变换或过滤器的过渡的RenderLayers具有自己的合成图层.

如果一个元素没有给出自己的图层,那么该元素上的CSS转换就不会加速.

transform: translate3d("更快"的黑客攻击)通常会强制元素被赋予自己的层.

但是,即使元素已经给出了自己的层,非合成性的转变(width,height,left,top,等)仍不能加速,因为它们的合成阶段(例如,在布局或油漆阶段)之前发生.@ChrisSpittles这就是为什么你在添加后看不到视觉上的改进transform: translate3d.

大多数浏览器可以在合成图层周围显示彩色边框,以便于开发/调试时识别它们:

铬

显示合成图层的边框可以通过以下两种方式之一完成:

• 对于所有页面 - 转到chrome://flags并启用合成渲染层边框("渲染合成渲染层周围的边框以帮助调试和研究图层合成").您需要重新启动Chrome才能生效.
• 对于单个页面 - 打开"开发人员工具",然后打开"抽屉",选择"渲染"选项卡,并启用" 显示合成图层边框".现在,在任何页面上打开开发人员工具将导致该页面上显示图层边框.

现在触发元素上的CSS转换.如果它有一个彩色边框,那么它有自己的合成层.

边框颜色及其含义在中定义debug_colors.cc.更多细节在这里和这里.

火狐

要绘制合成图层的边框:

• 去 about:config
• 搜索layers.draw-borders并启用它

现在触发元素上的CSS转换.如果它有一个彩色边框,那么它有自己的合成层.

边框颜色及其含义在中定义Compositor::DrawDiagnosticsInternal.

苹果浏览器

(这对我来说对Safari 7.0.3不起作用,但它似乎对去年的某些人有效.)

使用CA_COLOR_OPAQUE布尔环境变量集从终端启动Safari :

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

替代方法:

$ export CA_COLOR_OPAQUE=1 
$ /Applications/Safari.app/Contents/MacOS/Safari

显然,硬件加速层应该涂成红色.更多细节在这里和这里.

更新:

这是另一种适用于Safari 7.0.3的方法(归功于David Calhoun):

• 在Safari的" 调试"菜单中,在" 绘图/合成标志"子菜单中启用" 显示合成边框 "

现在触发元素上的CSS转换.如果它有一个彩色边框,那么它有自己的合成层.

参考

有关更多详细信息,请查看以下优秀文章:

• http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
• http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• http://www.html5rocks.com/en/mobile/optimization-and-performance/
• http://ariya.blogspot.co.uk/2011/07/fluid-animation-with-accelerated.html