CSS3过滤器性能和CPU使用率:为什么某些过滤器会给CPU造成负担? [英] CSS3 filter performance & CPU usage: Why do certain filters tax the CPU?
问题描述
在 David Nuon 中查看此演示:
http://zunostudios.com/demos/css32014-demos/filters.html
David在他的帖子中注意到:
As David notices in his post:
您会注意到，右侧的滑块越多，则越少 响应页面变为.
You'll notice that the more the sliders are to the right, the less responsive the page becomes.
是的.更改图像后，我看到了CPU如何开始正常工作.
And that is true. After I altered the image, I saw how my CPU began to work a lot.
在对所有css进行修改后，页面无法响应，我无法回答自己的原因.就像所有动画都是2fps.
What I could not answer to myself is WHY after all the css modifications the page is so unresponsive. Like all the animations are 2fps.
如果工作完成了，为什么还能继续工作?
If the job is done why it keeps working?
修改: 在xengravity的帮助下，我可以看到也许所有的滤镜都在右边之后，GPU似乎以疯狂的速度完成了以下工作:
With the help of xengravity I could see that maybe after all the filters are to the right it seems that the GPU does the following at an insane rate:
1.-拍摄原始图像.
2.-修改它(数学计算，blabla等).
1.- takes the original image.
2.- modifies it (math calculations, blabla, etc).
但是总是从原始图像开始.也许这就是为什么它看起来这么慢的原因....
But always starting from the original image. Maybe thats why it seems all so slow....
将演示添加到摘要中以供将来使用
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>
推荐答案
您会注意到，性能受到严重打击的唯一时间是使用模糊或阴影效果.如果您与其他任何过滤器一起玩，则CPU使用率非常低，也没有任何性能下降的迹象.
You'll notice that the only time the performance is hit hard is when you either use blur or drop-shadow. If you play with any of the other filters there is very little cpu usage or any indication of a performance hit.
首先要了解的是，并非所有过滤器都是相同的.
大多数过滤器会按1:1的比例修改像素，这是一个相对简单的计算.
Most filters modify pixels on a 1:1 level which is a relatively straight forward calculation.
但是，当您引入带有模糊"或阴影"的任何内容时，它可能不再是1:1的计算.
However when you introduce anything with a "blur" or "shadow" it may no longer be a 1:1 calculation.
假设您使用radius参数并将其设置为5px.现在，您需要查看5倍的像素量，以计算出模糊效果.
Say you use the radius parameter and set it to 5px. You now need to look at 5x the amount of pixels to calculate what the blur should look like.
将其与其他过滤器混合使用时，所需的计算会增加.
When you compound this with other filters on top of this the calculation required increases.
现代的浏览器能够利用GPU来帮助进行这些计算，从而使处理过程更快，但是您会注意到GPU遭受苦难的设备.
Modern browsers are able to utilize the GPU to help with these calculations to make the process faster but you'll notice devices with weak GPU's suffering.
因此，专门回答您的问题.应用过滤器后，CPU没有运行，实际上它仍在计算过程中！当您输入疯狂的值(如示例所示)时(例如100px的半径)，您可以想象该计算在CPU上的强度.
So to answer your question specifically. The CPU isn't running after the filter is applied, it's actually still in the process of calculating! When you put in crazy values like the example allows you to (e.g. a radius of 100px) you can imagine how intensive that calculation will be on the CPU.
以下是有关CSS过滤器性能的快速指南:
Here is a quick guideline on performance for CSS filters:
- 灰度/快速
- 深褐色/快速
- 饱和/快速
- 色相旋转/快速
- 反转/快速
- 不透明度/变量
- 亮度/快速
- 对比/快速
- 模糊/缓慢
- 阴影/缓慢
- url()/变量
- grayscale / fast
- sepia / fast
- saturate / fast
- hue-rotate / fast
- invert / fast
- opacity / variable
- brightness / fast
- contrast / fast
- blur / slow
- drop-shadow / slow
- url() / variable
这篇关于CSS3过滤器性能和CPU使用率:为什么某些过滤器会给CPU造成负担?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
