CSS不透明度滤镜比不透明度属性更快？

Question

在this html5rocks文章中，它说明了

  

一般来说，CSS'opacity'属性不是硬件加速，但是一些使用硬件加速实现过滤器的浏览器会加速不透明度的过滤版本，以获得更好的性能。

这似乎意味着在性能密集型应用程序中，应该使用不透明度过滤器而不是opacity属性。例如，我在不透明度属性为0.5的图像下渲染画布。我应该使用过滤器吗？如何在使用此过滤器属性时衡量性能提升，以及在哪些平台上可能会有明显的改进？

Answer 1

首先，CSS3过滤效果为still a draft standard和their browser support varies。因此，请三思而后行是否确实需要它们（例如，CSS Filters in the Real World article（04.2013）报告渲染工件）。 Hardware acceleration in Webkit和GPU Accelerated Compositing in Chrome概述了它们的实现，并且都表明不存在对CSS2或CSS3的歧视（如果有的话，我会感到惊讶）。

其次，a review in PC magazine（01.2013）显示了IE和Firefox团队的一些在线基准测试结果。有画布，粒子和CSS（旋转）基准。在那里测试的Maxthon（使用WebKit）和Opera版本不支持加速，因此它们提示性能增益。关于透明度：它比重新采样的计算量少了几个数量级，所以你不应该注意到这个特定操作的任何差异。

Answer 2

Paul Irish在这里说不透明度是 *是* GPU加速的少数CSS属性之一：https://plus.google.com/+AddyOsmani/posts/aTRerYcZpts

此外，我们可以看到here对浏览器的过滤器严重缺乏支持，尽管我们支持不透明度：http://caniuse.com/#search=opacity。

更不用说opacity属性更容易使用。

我会坚持你所拥有的。