jquery – CSS3过滤器性能和CPU使用率：为什么某些过滤器对CPU征税？

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>