Hace un tiempo, Wilson Page escribió un excelente artículo para Smashing Magazine que analizaba cómo dieron vida a la aplicación web del Financial Times. En este artículo, Wilson señala lo siguiente:
A medida que la app comenzó a crecer, notamos que el rendimiento empeoraba cada vez más.
Pasamos unas horas en el cronograma de las Herramientas para desarrolladores de Chrome y encontramos el culpable: ¡la sorpresa, el terror! Fue nuestro mejor amigo, flexbox. La línea de tiempo mostró que algunos diseños tardaban cerca de 100 milisegundos. La revisión de nuestros diseños sin flexbox redujo este tiempo a 10 milisegundos.
Los comentarios de Wilson se relacionan con la flexbox original (heredada) que usaba display: box;. Lamentablemente, nunca tuvieron la oportunidad de responder si la nueva flexbox (display: flex;) era más rápida, pero en cuanto a los trucos de CSS, Chris Coyier abrió esa pregunta.
Le preguntamos a Ojan Vafai, quien escribió gran parte de la implementación en WebKit & Blink, sobre el nuevo modelo y la implementación de flexbox.
El nuevo código Flexbox tiene muchas menos rutas de código de diseño de varios pasos. Sin embargo, puedes seleccionar rutas de código de varios pasos con bastante facilidad (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 construir un caso en el que sea igual de lento.
Dicho esto, el diseño de bloque regular (no flotante) suele ser igual o rápido que el de la nueva flexbox, ya que siempre es de un solo paso. Pero el nuevo flexbox debería ser más rápido que usar tablas o escribir código de diseño JS-base personalizado.
Para ver la diferencia en los números, realicé una comparación directa entre la sintaxis anterior y la nueva.
Comparativa de Flexbox antigua vs. nueva
- flexbox anterior frente a flexbox nueva (con resguardo)
- 500 elementos por página
- y evaluar el costo de carga de la página para diseñar los elementos
- promediado en 3 carreras cada una
- medirse en computadoras de escritorio. (la velocidad para dispositivos móviles será aprox. 10 veces más lenta)
Flexbox anterior: costo de diseño de ~43.5 ms
Nueva flexbox: costos de diseño de ~18.2 ms
Resumen: La versión anterior es 2.3 veces más lenta que la nueva.
¿Qué deberías hacer?
Cuando uses Flexbox, crea siempre contenido nuevo: la sintaxis de tweener de IE10 y el nuevo flexbox actualizado que está en Chrome 21 (y versiones posteriores), Safari 7 (o versiones posteriores), Firefox 22 (o versiones posteriores), Opera (y Opera Mobile) 12.1 (o versiones posteriores), IE 11 (o versiones posteriores) y Blackberry 10 (o versiones posteriores). En muchos casos, puedes revertir a los navegadores flexibles para dispositivos móviles heredados.
Recuerda: herramientas, no reglas
Lo más importante es optimizar lo que importa. Siempre usa el cronograma para identificar los cuellos de botella antes de dedicar tiempo a optimizar un tipo de operación.
De hecho, nos hemos conectado con Wilson y el equipo de Financial Times Labs y, como resultado, mejoramos la cobertura de las Herramientas para desarrolladores de Chrome de las herramientas de rendimiento de diseño. Pronto agregaremos la capacidad de ver el límite de rediseño de un elemento. Además, los eventos de diseño en el cronograma se cargarán con detalles del alcance, la raíz y el costo de cada diseño:
