Tom*_*ado 6 performance jquery cpu-usage css3
考虑David Nuon的这个演示:
http://zunostudios.com/demos/css32014-demos/filters.html
大卫在他的帖子中注意到:
您会注意到滑块越向右,页面响应越少.
这是事实.在我改变了图像之后,我看到了我的CPU如何开始工作.
我无法回答的是为什么在所有css修改后页面都没有响应.像所有的动画都是2fps.
如果工作完成,为什么它继续工作？
编辑: 在xengravity的帮助下,我可以看到,可能在所有过滤器都在右边后,似乎GPU以疯狂的速度执行以下操作:
1.-拍摄原始图像.
2.-修改它(数学计算,blabla等).
但始终从原始图像开始.也许这就是为什么它似乎都这么慢......
编辑:将演示添加到片段中以供将来后代使用
var update_filter = function () {
var styles = [
'grayscale( ' + parseInt($('#grayscale').val()) * .01 + ')',
'blur( ' + $('#blur').val() + 'px)',
'sepia( ' + $('#sepia').val() + '%)',
'brightness( ' + parseInt($('#brightness').val()) * .01 + ')',
'contrast( ' + $('#contrast').val() * .1 + ')',
'hue-rotate( ' + $('#hue-rotate').val() * 3.6 + 'deg)',
'invert( ' + $('#invert').val() + '%)',
'saturate( ' + parseInt($('#saturate').val()) * .1 + ')',
'opacity( ' + parseInt($('#opacity').val()) * .01 + ')',
'drop-shadow( ' + (function (n) {
return '0px ' +
'0px ' +
n + 'px ' +
'black)'; }
)($('#drop-shadow').val()) ,
];
var styles = '-webkit-filter:\n' + styles.map(function (e) { return '\t' + e;} ).join('\n') + ';';
$('#image').attr('style', styles);
$('#code').val(styles);
};
$('#reset').click( function () {
$('#grayscale').val( $('#grayscale').data('default') );
$('#blur').val( $('#blur').data('default') );
$('#sepia').val( $('#sepia').data('default') );
$('#brightness').val( $('#brightness').data('default') );
$('#contrast').val( $('#contrast').data('default') );
$('#hue-rotate').val( $('#hue-rotate').data('default') );
$('#invert').val( $('#invert').data('default') );
$('#saturate').val( $('#saturate').data('default') );
$('#opacity').val( $('#opacity').data('default') );
$('#drop-shadow').val( $('#drop-shadow').data('default') );
update_filter();
});
$( 'input[type="range"]').change(update_filter );
update_filter();body, html {
background: #fff;
}
.wrapper {
width: 800px;
height: 400px;
background: #fff;
border-radius: 5px;
position: relative;
margin: 60px auto 0 auto;
}
.controls {
background: #ddd;
width: 250px;
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
.image {
background: url(transparency.png);
width: 550px;
position: absolute;
left: 0;
bottom: 0;
top: 0;
}
.controls {
padding: 0 0 0 0;
}
.controls li {
list-style: none;
margin: 0;
padding: 5px 15px;
border-bottom: 1px solid #aaa;
}
.controls li span {
font-size: 13px;
}
.controls li span::after {
content: '()';
}
.controls li input {
color: #333;
float: right;
}
#code {
position: absolute;
left:0;
right: 0;
bottom: -155px;
border:0;
font-family: monospace;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<img id="image" src="http://i.imgur.com/WdIGZ1t.png" alt="">
</div>
<div class="controls">
<ul class="controls"><li>
<span>blur</span>
<input type="range" id="blur" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>grayscale</span>
<input type="range" id="grayscale" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>drop-shadow</span>
<input type="range" id="drop-shadow" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>sepia</span>
<input type="range" id="sepia" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>brightness</span>
<input type="range" id="brightness" min="0" max="100" value="100" data-default="100">
</li>
<li>
<span>contrast</span>
<input type="range" id="contrast" min="0" max="100" value="10" data-default="10">
</li>
<li>
<span>hue-rotate</span>
<input type="range" id="hue-rotate" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>invert</span>
<input type="range" id="invert" min="0" max="100" value="0" data-default="0">
</li>
<li>
<span>saturate</span>
<input type="range" id="saturate" min="0" max="100" value="10" data-default="10">
</li>
<li>
<span>opacity</span>
<input type="range" id="opacity" min="0" max="100" value="100" data-default="100">
</li>
<li><button id="reset">Reset</button></li>
</div>
<textarea id="code" cols="20" rows="11"></textarea>
</div>Bla*_*res 15
这个"应用程序"的主要问题是绘画.如果你应用了一些滤镜效果,或者甚至对滑块疯狂,你实际上是在用计算上昂贵的操作来杀死CPU,而这些操作非常适合GPU.这个东西非常好.如果您使用时间轴工具并跟踪您的应用程序,您将看到大量的绿色条,表示主线程(CPU)上正在进行绘画和绘画.您需要做的是手动将使用这些滤镜效果的元素提升到图层.你可以通过一些类似transform: translateZ(0);或新的黑客来做到这一点,will-change: transform;之后你会看到你的应用程序的响应能力大大提高.但是对于2012年及以后的移动设备,您可能会忘记良好的性能,这对他们来说太过分了.
尝试通过开发工具添加此代码并观察结果,如果不是更快,请告诉我？
img#image {
transform: translateZ(0); /*for older browsers*/
will-change: transform;
}
您会注意到,只有当您使用模糊或阴影时,性能受到严重打击的唯一时间.如果你使用任何其他过滤器,那么cpu使用率很少或者性能受到任何影响.
首先要理解的是,并非所有过滤器都是相同的.
大多数滤波器修改1:1级别的像素,这是一个相对简单的计算.
但是,当您引入任何带有"模糊"或"阴影"的内容时,它可能不再是1:1计算.
假设您使用radius参数并将其设置为5px.您现在需要查看5倍的像素数来计算模糊应该是什么样子.
当您将此与其他过滤器复合时,需要的计算会增加.
现代浏览器能够利用GPU来帮助进行这些计算,从而加快处理速度,但您会注意到GPU受到的影响很小的设备.
所以要具体回答你的问题.应用过滤器后CPU没有运行,它实际上仍处于计算过程中!当您输入像示例允许的疯狂值(例如半径为100px)时,您可以想象计算对CPU的密集程度.
以下是CSS过滤器性能的快速指南:
| 归档时间： |
|
| 查看次数： |
7818 次 |
| 最近记录： |