jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

(注意: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及其朋友:translateXtranslateYtranslateZtranslate3d
> transform: scale及其朋友:scaleXscaleYscaleZscale3d
> transform: rotate及其朋友:rotateXrotateYrotateZrotate3d

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

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

合成层&彩色边框

浏览器的渲染引擎决定(基于用户偏好,CSS样式等)是否赋予元素自己的合成图层。

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

如果一个元素没有被赋予自己的层,那么该元素上的CSS转换将不会被加速。

transform:translate3d(the “go faster” hack)通常强制元素被赋予自己的层。

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

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

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

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

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

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

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

显然,硬件加速层应该是红色的。更多细节herehere

更新:

这是一个替代方法,适用于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动画启用了硬件加速?全部内容,希望文章能够帮你解决jquery – 测试是否为CSS动画启用了硬件加速?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。