jquery – 测试是否为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,width 300ms ease-out;
    -ms-transition: top 300ms ease-out,width 300ms ease-out;
    -o-transition: top 300ms ease-out,width 300ms ease-out;
    transition: top 300ms ease-out,width 300ms ease-out;
    
    -webkit-transform: translate3d(0,0);
    -moz-transform: translate3d(0,0);
    -ms-transform: translate3d(0,0);
    transform: translate3d(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);
   -moz-transform: translate3d(0,0);
   -ms-transform: translate3d(0,0);
   transform: translate3d(0,0);

然而，在添加到我的CSS后，我看不到视觉改善。

问题然后…

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

解决方法

概述

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

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

一般来说，这些条件的要求是：

>必须启用相关的硬件加速选项，并且不得将设备的GPU和图形驱动程序列入黑名单
>仅合成CSS属性(opacity，transform：translate / scale / rotate等)可加速
>每个浏览器都有具体的原因来决定是否给自己的一个元素合成图层(或者可以通过使用“更快”的角色来强制转换：translate3d)

硬件加速层合成

要确定是否启用：

铬

一般加速

>转到chrome：//设置
>单击显示高级设置按钮
>在系统部分，检查使用硬件加速的状态(如果可用)复选框

如果启用加速度，则：

2.加速合成

>转到chrome：// gpu
>在图形特征状态部分，检查合成的值。这将是以下之一：

>硬件加速
>仅限软件，硬件加速不可用

有关软件组合的更多细节，从docs：

In some situations hardware compositing is infeasible,e.g. if the device’s graphics
drivers are 07001 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。

Firefox

一般加速

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

如果启用加速度，则：

层加速度

>转到about：config
>搜索layers.acceleration.disabled

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

GPU加速窗口

>转到：支持
>在图形部分，检查GPU加速Windows的值

如果它不以0开头，并且显示一个渲染API(例如OpenGL，Direct3D)，则GPU加速是活动的。

苹果浏览器

>通过在终端中运行此命令来启用Safari的调试菜单：
默认为com.apple.Safari IncludeInternalDebugMenu 1
>打开(或重新启动)Safari
>在Safari的Debug菜单中，检查“Drawing / Compositing Flags”子菜单中“Disable Accelerated Compositing”选项的状态

加速CSS属性

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

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

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

>转换就是转换：转换可以获得加速的全部好处(因为元素的图层可以简单地被GPU重新整合)。
>转换转换：转换和宽度几乎不会受益于加速(因为宽度上的转换会导致元素的图层被每个动画帧重新绘制)。

合成层&彩色边框

浏览器的渲染引擎决定(基于用户偏好，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)通常强制元素被赋予自己的层。

但即使一个元素被赋予了自己的层，非合成属性(宽度，高度，左边，顶部等)上的转换仍然无法加速，因为它们发生在合成阶段之前(例如在布局或绘制阶段)。 @ChrisSpittles这就是为什么在添加transform之后没有看到任何视觉改进：translate3d。

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

铬

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

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

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

边框颜色及其含义定义在debug_colors.cc.更多细节here和here。

Firefox

绘制合成图层的边框：

>转到about：config
>搜索layers.draw-border并启用它

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

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

苹果浏览器

(这对于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转换。如果它有一个彩色边框，那么它有自己的合成图层。

参考文献

详情请看这些优秀的文章：

> 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

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

解决方法

相关文章