jquery - 测试是否已为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上仍然不稳定。

但是我读过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等)才可以加速

每个浏览器都有特定的原因来决定是否给元素一个自己的合成层(或者可以通过使用“更快的” hack(例如transform: translate3d)来强制它)。


硬件加速层合成

要确定是否启用此功能:

Chrome

1.一般加速

转到chrome://settings

单击 +显示高级设置按钮

在系统部分中，检查的状态可用时使用硬件加速复选框

如果启用了加速，则:

2.加速合成

转到chrome://gpu

在图形功能状态部分中，检查合成的值。这将是以下之一:

硬件加速

仅软件，硬件加速不可用

docs上有关软件合成器的更多详细信息:

In some situations hardware compositing is infeasible, e.g. if the device's graphics drivers are blacklisted or the device lacks a GPU entirely. For these situations is an alternative implementation to the GL renderer called the SoftwareRenderer

(注意:Chrome也有一个Legacy Software Rendering Path，“截至2014年5月，它仍然存在，但很快将在Blink中将其完全删除。”)

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

火狐浏览器

1.一般加速

转到Firefox的首选项

转到高级选项卡

转到常规子选项卡

检查的状态可用时使用硬件加速复选框

如果启用了加速，则:

2.层加速

转到about:config

搜索layers.acceleration.disabled

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

3. GPU加速窗口

转到about:support

在图形部分中，检查 GPU加速Windows的值

如果它不是以0/开头，并且显示了渲染API(例如OpenGL，Direct3D)，则GPU加速处于 Activity 状态。

苹果浏览器

通过在终端中运行以下命令来启用Safari的调试菜单:defaults write com.apple.Safari IncludeInternalDebugMenu 1

打开(或重新启动)Safari

在Safari的调试菜单中，检查绘图/合成标志子菜单

中禁用加速合成选项的状态。


可加速CSS属性

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

opacity

transform: translate 及其 friend : translateX ， translateY ， translateZ ， translate3d

transform: scale 及其 friend : scaleX ， scaleY ， scaleZ ， scale3d

transform: rotate 及其 friend : rotateX ， rotateY ， rotateZ ， rotate3d

要完全受益于加速，必须不转换任何非复合属性。例如:

只需transform: translate上的过渡即可获得加速的全部好处(因为元素的层可以简单地由GPU重新组合)。

transform: translate和width上的过渡几乎不会从加速中受益(因为width上的过渡会导致CPU为每个动画帧重新绘制元素的图层)。

合成图层和彩色边框

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

例如，Chrome具有this list of reasons，并且在chrome://flags中也具有此选项:

Compositing for RenderLayers with transitions
Enabling this option will make RenderLayers with a transition on opacity, transform or filter have their own composited layer.

如果没有为元素提供自己的图层，则不会加速该元素上的CSS转换。
transform: translate3d(the "go faster" hack)通常强制将元素赋予其自己的层。

但是，即使为元素提供了自己的图层，非合成属性(width，height，left，top等)上的过渡仍然无法加速，因为它们发生在合成阶段之前(例如，在布局或绘画阶段) )。 @ChrisSpittles这就是为什么在添加transform: translate3d后看不到视觉效果的原因。

大多数浏览器可以在复合层周围显示彩色边框，以使其易于识别以进行开发/调试:

Chrome

显示合成层的边界可以通过以下两种方法之一来完成:

对于所有页面—转到chrome://flags并启用复合渲染层边框(“在复合渲染层周围渲染边框以帮助调试和研究图层合成”)。您需要重新启动Chrome才能生效。

对于单个页面—打开“开发工具”，然后打开“抽屉”，选择“渲染”选项卡，然后启用显示合成层边界。现在，在任何页面上打开开发人员工具都将导致图层边框显示在该页面上。

现在在元素上触发CSS过渡。如果边框有彩色，则它具有自己的合成层。

边界颜色及其含义在 debug_colors.cc 中定义。更多详细信息here和here。

火狐浏览器

绘制复合层的边界:

转到about:config

搜索layers.draw-borders并将其启用

现在在元素上触发CSS过渡。如果边框有彩色，则它具有自己的合成层。

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

苹果浏览器

(对于Safari 7.0.3，这对我不起作用，但似乎对as recently as last year某些人有效。)

从终端启动Safari，并设置CA_COLOR_OPAQUE bool(boolean) 环境变量:

$ 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过渡。如果边框有彩色，则它具有自己的合成层。

引用文献

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

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