从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>
答案 0 :(得分：8)
这个＆＃34; app＆＃34;的主要问题正在粉刷。如果你应用了一些滤镜效果，或者甚至对滑块疯狂，你实际上是在用计算上昂贵的操作来杀死CPU，而这些操作非常适合GPU。这个东西非常好。如果您使用时间轴工具并跟踪您的应用程序，您将看到大量的绿色条，表示主线程（CPU）上正在进行绘画和绘画。您需要做的是手动将使用这些滤镜效果的元素提升为图层。您可以使用transform: translateZ(0);或新will-change: transform;之类的黑客来做到这一点，之后您会看到应用响应速度的大幅提升。但是对于2012年及以后的移动设备，你可能会忘记良好的性能，这对他们来说太过分了。
尝试通过开发工具添加此代码并观察结果，如果不是更快，请告诉我？
img#image {
transform: translateZ(0); /*for older browsers*/
will-change: transform;
}
答案 1 :(得分：6)
你会注意到，只有当你使用模糊或阴影时，性能受到严重打击的唯一时间。如果你使用任何其他过滤器，那么cpu使用率很少或者性能受到任何影响。
首先要了解的是，并非所有过滤器都是相同的。
大多数过滤器修改1：1级别的像素，这是一个相对简单的计算。
但是，当您引入任何带有“模糊”或“阴影”的内容时，它可能不再是1：1计算。
假设您使用radius参数并将其设置为5px。您现在需要查看5倍的像素数来计算模糊应该是什么样子。
当您将此与其他过滤器复合时，需要的计算会增加。
现代浏览器能够利用GPU来帮助进行这些计算，从而加快处理速度，但是你会发现GPU的设备质量很差。
所以要具体回答你的问题。应用过滤器后CPU没有运行，它实际上仍处于计算过程中！当您放入像示例允许的疯狂值（例如，半径为100px）时，您可以想象计算对CPU的密集程度。
以下是CSS过滤器性能的快速指南：