CSS3 - ¿Cuáles son las mejores prácticas de rendimiento?

Question

El año pasado pasé mucho tiempo leyendo sobre el rendimiento de JavaScript, los cuellos de botella y las mejores prácticas. En mi último proyecto, estoy usando CSS3 con errores en javascript/jquery para animaciones y efectos básicos, como suspender y estoy interesado en experimentar con CSS3 aún más.

¿Hay problemas con el rendimiento de CSS3?

En caso afirmativo, ¿cuáles son las mejores prácticas?

Por ejemplo, ¿usa transition: all 150ms ease-out; más memoria que transition: opacity 150ms ease-out, background-color 150ms ease-out;?

[por favor, no lo hacen simplemente responder a mi pregunta ejemplo!]

Answer 1

Para probar que fuera, tendría que hacer su animación suceda 500 o 1000 veces y tiempo.

Lienzo y animaciones HTML5 forma más CPU que flash. Flash en el iPhone supera las alternativas HTML5. Haría mis animaciones, audio y video usando JQuery, ya que HTML5 intercambia flexibilidad para mayor comodidad.

Answer 2

O yes! Si le gusta jugar con el rendimiento, le alegrará saber que hay MUCHOS problemas de rendimiento con CSS3.

1. Repintado y reflujo. Es bastante fácil provocar reflejos y reflujos innecesarios y, por lo tanto, retrasar toda la página. Leído: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ Ejemplo extremo: http://files.myopera.com/c69/blog/lag-me.html
2. Desplácese y desplace el cursor. Al desplazarse o desplazarse, el navegador debe mostrar contenido nuevo. Webkit es inteligente aquí, ya que guarda en la memoria caché las páginas como imágenes estáticas, por lo que NO representa la página cuando se desplaza. Pero - PUEDE eludir esta optimización, usando elementos como fondo transparente en el bloque que está desplazando, agregando rotación al colocar el cursor, agregando position:fixed encabezados/pies de página adhesivos con y así sucesivamente - efecto desconfía en diferentes navegadores, Opera parece ser el más afectado actualmente .
3. Box-shadow is evil. Las sombras de caja tienen diferente calidad de representación en diferentes navegadores (bajo en Webkit, alto en Opera/IE9, varía entre versiones de Firefox) - y por lo tanto su impacto en el rendimiento es diferente entre diferentes navegadores - aún, inset box shadow y box-shadows con un gran radio de extensión puede causar bloqueos observables al volver a dibujar en cualquier navegador.
4. Flotantes, mesas y sus amigos son malvados. Suena loco al principio, pero lea este artículo (en ruso) - http://chikuyonok.ru/2010/11/optimization-story/ - podría ahorrarle algo de pelo en la cabeza. La idea principal es que los elementos flotantes de los niños provocan reflujos de cadena en la modificación a lo largo de todo el proceso.
5. El radio de borde es muy costoso, incluso más caro que los degradados. No afecta el diseño, pero afecta el repintado. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
6. Gradientes lag. Los degradados de CSS son una herramienta nueva y genial, soy un gran admirador de ellos. Sin embargo, solo un par de pruebas han demostrado que no debes usarlas, si planeas tener muchos elementos con degradado y necesitas una interfaz receptiva :(Sin embargo, hay una solución/truco, usando lienzo para renderizar imágenes de degradado y establecer como fondo a través de la url de datos
7. La transparencia es costosa. Si usted tiene una serie de elementos que se cruzan entre sí y son semitransparentes en movimiento (opacidad < 0, color RGBA, png, esquinas redondeadas ()!) - esperar lag. A menudo se puede resolver limitando la cantidad de elementos transparentes, que pueden superponerse.
8. Las transiciones son mejores que JS, pero ... Firefox no es capaz de hacer que las transiciones correctamente, si se las aplica a más de 150 elementos de forma simultánea. Opera no puede aplicar transiciones a antes y después. IE9 no los admite en absoluto. Pruebe antes de usarlos, pero en general: son más rápidos que los análogos de JS (jQuery.animate).
9. Cuidado con la CPU-carga. Es difícil medir navegadores uso de la memoria, (sin embargo, puede hacerlo en cromo e interpolar los resultados, con un poco de grano de sal) pero es fácil de observar uso de la CPU (a través de herramientas del Explorador de proceso o sistema). Los picos te mostrarán lugares donde necesitas tu atención.
10. navegadores antiguos son de edad. No intente modernizar IE6, Firefox 2, Safari 3. Esos navegadores nunca deberían manejar cosas nuevas y geniales. Déjalos en paz. Solo sirve contenido básico con estilos básicos. Los usuarios restantes de IE6 estarán agradecidos por eso.

Answer 3

Paul Irish on CSS3 performance