CSS 透明度滤镜比透明度属性快吗？

Question

在this html5rocks文章上，它指出：“通常CSS的‘opacity’属性不是硬件加速的，但是一些使用硬件加速的浏览器将加速滤镜版本的透明度以获得更好的性能。” 这似乎意味着在性能密集型应用程序中，应该使用透明度滤镜而不是透明度属性。例如，我正在渲染带有0.5透明度属性的图像下的画布。我应该使用滤镜吗？如何测量使用此滤镜属性时的性能增益，并且在哪些平台上可能会有明显的改进？

- Trey Keown

Answer 1

首先，CSS3滤镜效果仍然是草案标准，并且浏览器支持程度不同。因此，请三思而后行，看看您是否真的需要它们（例如，Real World文章中的CSS过滤器(04.2013)报告了渲染伪像）。 Webkit中的硬件加速和Chrome中的GPU加速合成概述了它们的实现，并且都表明没有对CSS2或CSS3进行歧视（如果有的话，我会感到惊讶）。

其次，PC杂志的一篇评论（01.2013）展示了IE和Firefox团队进行的一些在线基准测试结果。其中包括画布、粒子和CSS（旋转）基准测试。在那里测试的Maxthon（使用WebKit）和Opera版本不支持加速，因此它们提供了性能增益的提示。关于透明度：与重新采样相比，它需要的计算量要少得多，因此您不应该在此特定操作中注意到任何差异。

- ivan_pozdeev

---

Trey所提到的文章讨论的不是IE的专有过滤器，而是CSS3 Filter Effects（http://caniuse.com/#feat=css-filters），目前在基于WebKit和Blink的浏览器中得到支持。有趣的是，同一篇文章在下面的“现代浏览器中的可用性”部分（http://www.html5rocks.com/en/tutorials/filters/understanding-css/#toc-availability）指出，在Chrome中，“opacity”过滤器“可能会很慢”。 - Ilya Streltsyn

这篇html5rocks文章的日期是2012年5月，肯定已经过时了。 - ivan_pozdeev

2012年6月发布的Chromium Blog文章指出，Chromium 19已支持加速CSS滤镜：http://blog.chromium.org/2012/06/accelerated-css-filters-landed-in.html。 - Ilya Streltsyn

Answer 2

保罗·爱尔兰在这里说，透明度是为数不多的CSS属性之一，GPU会加速它: https://plus.google.com/+AddyOsmani/posts/aTRerYcZpts 而且，跨浏览器的滤镜支持严重缺乏，可以在here看到，尽管不透明度在各地都得到支持：http://caniuse.com/#search=opacity。

更不用说透明度属性只是更容易使用。

我会坚持你现有的东西。

- Kevin Jurkowski