¿Filtro de opacidad CSS más rápido que la propiedad de opacidad?

Question

En este html5rocks artículo, afirma que

En general, la propiedad "opacidad" de CSS no está acelerada por hardware, pero algunos navegadores que implementan filtros usando aceleración de hardware acelerarán la versión de filtro de opacidad para obtener un rendimiento mucho mejor.

Esto parece implicar que en aplicaciones de alto rendimiento, se debería utilizar el filtro de opacidad en lugar de la propiedad de opacidad.Por ejemplo, estoy renderizando un lienzo debajo de una imagen con una propiedad de opacidad de 0,5.¿Debería usar el filtro en su lugar?¿Cómo se podrían medir las ganancias de rendimiento al utilizar esta propiedad de filtro y en qué plataformas podría haber una mejora notable?

Answer 1

Primero, los efectos de filtro CSS3 son todavía un proyecto de norma y el soporte de su navegador varía.Así que piénselo dos veces si realmente los necesita (p. ej., Filtros CSS en el artículo del mundo real (04.2013) informa artefactos de representación).Aceleración de hardware en Webkit y Composición acelerada por GPU en Chrome brindan una descripción general de sus implementaciones y ambos sugieren que no hay discriminación contra CSS2 o CSS3 (me sorprendería si la hubiera).

Segundo, una reseña en la revista PC (01.2013) muestra los resultados de algunas pruebas comparativas en línea realizadas por los equipos de IE y Firefox.Hay puntos de referencia de lienzo, partículas y CSS (rotación).Las versiones de Maxthon (usa WebKit) y Opera probadas allí no admiten aceleración, por lo que dan una pista sobre la ganancia de rendimiento.En cuanto a la transparencia:Son órdenes de magnitud menos cálculos que el remuestreo, por lo que no debería notar ninguna diferencia para esta operación específica.

Answer 2

Paul Irish dice aquí que la opacidad es una de las pocas propiedades de CSS que * es * GPU acelerada: https://plus.google.com/+addyosmani/posts/atheryczpts

y también, existe una grave falta de soporte para los filtros en todos los navegadores, como se puede ver aquí Aunque la opacidad se apoya en todo el tablero: http://caniuse.com/#search=opacity .

Sin mencionar la propiedad de opacidad es mucho más fácil de usar.

me quedo con lo que tienes.