jquery - CSS3 过滤器性能和 CPU 使用率 : Why do certain filters tax the CPU?

Question

考虑来自 David Nuon 的这个演示:

http://zunostudios.com/demos/css32014-demos/filters.html

正如 David 在他的帖子中指出的那样:

You'll notice that the more the sliders are to the right, the less responsive the page becomes.

这是真的。更改图像后，我看到我的 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>

Answer 1

这个“应用程序”的主要问题是绘画。如果你应用了一些滤镜效果，或者甚至疯狂地使用 slider ，你实际上是在用非常适合 GPU 的计算量大的操作来杀死 CPU。它非常擅长这个东西。如果您使用时间轴工具并跟踪您的应用程序，您将看到大量的绿色条，这表明主线程 (CPU) 正在绘制和绘制。您需要做的是手动将使用这些滤镜效果的元素提升到一个层。您可以使用 transform: translateZ(0); 或新的 will-change: transform; 等一些 hack 来做到这一点，之后您将看到应用程序响应能力的巨大改进.但在 2012 年及以下一代的移动设备上，您可能会忘记良好的性能，这对他们来说太过分了。

尝试通过开发工具添加此代码并观察结果，如果不是更快请告诉我？

 img#image {
  transform: translateZ(0); /*for older browsers*/
  will-change: transform;
}