Hace poco, Wilson Page escribió un excelente artículo para Smashing Magazine en el que analizó cómo dieron vida a la app web de Financial Times. En el artículo, Wilson señala lo siguiente:
A medida que la app comenzó a crecer, descubrimos que el rendimiento empeoraba cada vez más.
Pasamos varias horas en el cronograma de las herramientas para desarrolladores de Chrome y encontramos al culpable: ¡horror! — era nuestro nuevo mejor amigo, flexbox. El cronograma mostró que algunos diseños tardaban cerca de 100 milisegundos. Rehacer nuestros diseños sin flexbox redujo este tiempo a 10 milisegundos.
Los comentarios de Wilson se referían al flexbox original (heredado) que usaba display: box;. Lamentablemente, nunca tuvo la oportunidad de responder si el flexbox más reciente (display: flex;) era más rápido, pero en CSS Tricks, Chris Coyier abrió esa pregunta.
Le preguntamos a Ojan Vafai, quien escribió gran parte de la implementación en WebKit y Blink, sobre el modelo y la implementación más recientes de flexbox.
El nuevo código de flexbox tiene muchas menos instrucciones de código de diseño de varios pases. Sin embargo, puedes alcanzar fácilmente las instrucciones de código de varios pases (p.ej.,
flex-align: stretchsuele ser de 2 pases). En general, debería ser mucho más rápido en el caso común, pero puedes crear un caso en el que sea igual de lento.
Dicho esto, si puedes hacerlo, el diseño de bloque normal (no flotante) suele ser tan rápido o más rápido que el nuevo flexbox, ya que siempre es de un solo paso. Sin embargo, el nuevo flexbox debería ser más rápido que usar tablas o escribir código de diseño personalizado basado en JS.
Para ver la diferencia en números, hice una comparación directa de la sintaxis anterior y la nueva.
Comparación de las comparativas de Flexbox antiguas y nuevas
- flexbox anterior en comparación con flexbox nuevo (con resguardo)
- 500 elementos por página
- evaluar el costo de carga de la página para diseñar los elementos
- promedio de 3 ejecuciones cada una
- medidas en computadoras (los dispositivos móviles serán aproximadamente 10 veces más lentos)
Flexbox anterior: costos de diseño de ~43.5 ms
Nuevo Flexbox: costos de diseño de ~18.2 ms
Resumen: El modelo anterior es 2.3 veces más lento que el nuevo.
¿Qué deberías hacer?
Cuando uses flexbox, siempre crea contenido para los elementos nuevos: la sintaxis del tweener de IE10 y el nuevo flexbox actualizado que se encuentra en Chrome 21 y versiones posteriores, Safari 7 y versiones posteriores, Firefox 22 y versiones posteriores, Opera (& Opera Mobile) 12.1 y versiones posteriores, IE 11 y versiones posteriores, y Blackberry 10 y versiones posteriores. En muchos casos, puedes realizar un resguardo al flexbox heredado para detectar algunos navegadores para dispositivos móviles más antiguos.
Recuerda: Herramientas, no reglas
Lo más importante es optimizar lo que importa. Usa siempre el cronograma para identificar los cuellos de botella antes de dedicar tiempo a optimizar un tipo de operación.
De hecho, nos comunicamos con Wilson y el equipo de Financial Times Labs y, como resultado, mejoramos la cobertura de las herramientas de rendimiento del diseño de las Herramientas para desarrolladores de Chrome. Pronto agregaremos la capacidad de ver el límite de rediseño de un elemento, y los eventos de diseño en la línea de tiempo se cargarán con detalles del alcance, la raíz y el costo de cada diseño:
