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

我如何判断（出于测试目的）是否为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; } } 

  
 
 Make Fullscreen 
  

这会添加一个类，并且元素使用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更快”的hack来强制transform: translate3d ）

---

硬件加速层合成

要确定是否启用了此function：

铬

1.一般加速度

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

如果启用了加速，则：

2.加速合成

• 转到chrome://gpu
• 在“ 图形function状态”部分中，检查“ 合成”的值。 这将是以下之一：
  • 硬件加速
  • 仅限软件，硬件加速不可用

有关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和它的朋友： rotateY ， rotateZ ， rotate3d ， rotate3d

要从加速中充分受益， 必须不转换非合成属性 。 例如：

• 仅仅transform: translate可以获得加速的全部好处（因为元素的层可以简单地由GPU重新组合）。
• transform: translate和width transform: translate 几乎不会从加速中获益 （因为width转换会导致元素的图层被CPU重新绘制为每个动画帧）。

---

合成图层和彩色边框

浏览器的渲染引擎决定（基于用户首选项，CSS样式等）是否给元素提供自己的合成层。

例如，Chrome有这个原因列表 ，并且在chrome://flags也有此选项：

使用过渡合成RenderLayers
启用此选项将使具有不透明度，转换或filter转换的RenderLayers具有自己的合成图层。

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

transform: translate3d （ “更快”的hack ）通常会强制元素被赋予自己的层。

但是，即使元素已经被赋予了自己的图层，非合成属性（ width ， height ， left ， top等）上的转换仍然无法加速 ，因为它们发生在合成阶段之前（例如，在布局或绘制阶段） ）。 @ChrisSpittles这就是为什么在添加transform: translate3d之后你没有看到任何视觉上的改进。

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

铬

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

• 对于所有页面 – 转到chrome://flags并启用Composited渲染层边框 （“渲染合成渲染层周围的边框以帮助调试和研究图层合成”）。 您需要重新启动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