CSS透明度过滤比不透明属性更快?

在这篇html5rocks文章中,它说明了这一点

通常,CSS“不透明度”属性不是硬件加速的,但是一些使用硬件加速实现滤镜的浏览器将加速不透明度的滤镜版本,从而获得更好的性能。

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


首先,CSS3滤镜效果仍然是草案标准,它们的浏览器支持各不相同。 因此,请考虑一下你是否真的需要它们(例如,真实世界中的CSS过滤器文章(04.2013)报告了渲染工件)。 Webkit中的硬件加速和Chrome中的GPU Accelerated Compositing概述了它们的实现,并且都表明不存在对CSS2或CSS3的歧视(如果存在,我会感到惊讶)。

其次,PC杂志(01.2013)的评论显示了IE和Firefox团队的一些在线基准测试结果。 有画布,粒子和CSS(旋转)基准。 Maxthon(使用WebKit)和Opera版本测试的版本不支持加速,因此他们提供了性能提升的提示。 关于透明度:与重新采样相比,它的计算量要少几个数量级,所以你不应该注意到这个特定操作有什么不同。


保罗爱尔兰这里说的不透明度是*为数不多的CSS属性之一是* GPU加速:https://plus.google.com/+AddyOsmani/posts/aTRerYcZpts

另外,跨浏览器的过滤器严重缺乏支持,可以在这里看到,尽管全面支持不透明度:http://caniuse.com/#search=opacity。

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

我会坚持你所拥有的。

链接地址: http://www.djcxy.com/p/77725.html

上一篇: CSS opacity filter faster than opacity property?

下一篇: CSS Linear Gradient with "big steps"