概述

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上仍然很难。

但我读到here你可以通过指定一个基本上什么都不做的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属性转换是硬件加速的：

在浏览器中启用了硬件加速图层合成
正在转换的CSS属性是可加速的
该元素已获得自己的合成图层

通常，这些条件的要求是：

必须启用相关的硬件加速选项，且不得将设备的GPU和图形驱动程序列入黑名单
仅合成CSS属性（opacity，transform: translate / scale / rotate等）可加速
每个浏览器都有特定的理由来决定是否为元素提供自己的合成图层（或者可以通过使用＆＃34来强制执行;更快地使用＆＃34;像transform: translate3d那样的黑客攻击

硬件加速层合成

确定是否已启用：

铬

1。一般加速

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

如果启用加速，则：

2。加速合成

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

docs中有关Software Compositor的更多详细信息：

在某些情况下，硬件合成是不可行的，例如如果是设备的图形驱动程序为blacklisted或设备完全缺少GPU。对于这些情况是 GL渲染器的另一种实现，称为SoftwareRenderer

（注意：Chrome也有一个Legacy Software Rendering Path，从2014年5月开始仍然存在，但很快就会在Blink中完全删除。＆＃34;）

这是一篇很棒的文章，其中包含更多信息：Accelerated Rendering in Chrome。

火狐

1。一般加速

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

如果启用加速，则：

2。层加速

转到about:config
搜索layers.acceleration.disabled

如果启用了图层加速（如果值为false），则：

3。 GPU加速窗口

转到about:support
在图形部分中，检查 GPU加速Windows

如果它不是以0/开头，并且显示了渲染API（例如OpenGL，Direct3D），那么GPU加速就会激活。

Safari浏览器

在终端中运行此命令启用Safari的调试菜单：
defaults write com.apple.Safari IncludeInternalDebugMenu 1
打开（或重新启动）Safari
在Safari的调试菜单中，检查绘图/合成标志子菜单中禁用加速合成选项的状态/ LI>

可加速的CSS属性

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

opacity
transform: translate及其朋友：translateX，translateY，translateZ，translate3d
transform: scale及其朋友：scaleX，scaleY，scaleZ，scale3d
transform: rotate及其朋友：rotateX，rotateY，rotateZ，rotate3d

要充分受益于加速，不得转换非合成属性。例如：

仅transform: translate的过渡可以获得加速的全部好处（因为元素的层可以简单地由GPU重新编译）。
transform: translate和width上的转换将从加速中获得几乎没有任何好处（因为width上的转换会导致元素的图层为每个动画帧重新绘制CPU。）

复合层＆amp;彩色边框

浏览器的渲染引擎决定（根据用户偏好，CSS样式等）是否给元素提供自己的合成层。

例如，Chrome有this list of reasons，chrome://flags中也有此选项：

使用转场合并RenderLayers
启用此选项将使具有不透明度，变换或过滤器转换的RenderLayers具有自己的合成图层。

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

transform: translate3d（the "go faster" hack）通常强制元素被赋予自己的图层。

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

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

铬

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

对于所有网页 - 转到chrome://flags并启用合成渲染图层边框（＆＃34;渲染合成渲染图层周围的边框以帮助调试和学习图层合成＆＃34;）。您需要重新启动Chrome才能生效。
对于单个页面 - 打开开发人员工具，然后打开抽屉，选择“渲染”选项卡，然后启用显示合成图层边框。现在，在任何页面上打开开发人员工具都会导致在该页面上显示图层边框。

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

边框颜色及其含义在debug_colors.cc中定义。更多详情here和here。

火狐

绘制合成图层的边框：

转到about:config
搜索layers.draw-borders并启用

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

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

Safari浏览器

（对于Safari 7.0.3，这不适用于我，但似乎它确实适用于某些人as recently as last year。）

使用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

显然，硬件加速图层应该涂成红色。更多详情here和here。

更新

这是一种替代方法，适用于Safari 7.0.3（归功于David Calhoun）：

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

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

参考

有关详细信息，请查看以下优秀文章：

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

问题然后......

1 个答案:

概述

硬件加速层合成

铬

1。一般加速

2。加速合成

火狐

1。一般加速

2。层加速

3。 GPU加速窗口

Safari浏览器

可加速的CSS属性

复合层＆amp;彩色边框

铬

火狐

Safari浏览器

更新

参考