El diseño de Flexbox no es lento

Paul Ireland

Hace un poco, Wilson Page escribió un excelente artículo para Smashing Magazine en el que profundizó en cómo dieron vida a la aplicación web del Financial Times. En el artículo, Wilson señala lo siguiente:

Cuando la app comenzó a crecer, descubrimos que el rendimiento empeoró cada vez más.

Pasamos unas horas repasando la línea de tiempo de las Herramientas para desarrolladores de Chrome y encontramos la causa: ¡impacto, terror! era nuestro nuevo mejor amigo, Flexbox. El cronograma mostró que algunos diseños tardaban cerca de 100 milisegundos. La reelaboración de nuestros diseños sin flexbox redujo esto a 10 milisegundos.

Los comentarios de Wilson estaban relacionados con la caja flexbox original (heredada) que usaba display: box;. Lamentablemente, nunca tuvieron la oportunidad de responder si la versión más reciente de Flexbox (display: flex;) era más rápida, pero con respecto a los trucos de CSS, Chris Coyier abrió esa pregunta.

Le preguntamos a Ojan Vafai, que escribió la mayor parte de la implementación en WebKit y Blink, sobre la implementación y el modelo más reciente de Flexbox.

El nuevo código de Flexbox tiene muchas menos rutas de código de diseño de varios pases. Sin embargo, puedes encontrar rutas de código de varios pases con facilidad (p.ej., flex-align: stretch suele 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 lo puedes lograr, el diseño de bloques normal (no flotante), generalmente será tan rápido o más rápido que el nuevo Flexbox, ya que siempre es un pase único. 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 las cifras, hice una comparación cara a cara entre la sintaxis anterior y la nueva.

Comparativa de Flexbox anterior respecto de la nueva

  • flexbox antigua frente a flexbox nueva (con resguardo)
  • 500 elementos por página
  • evaluar el costo de carga de la página para diseñar los elementos
  • promediado en 3 carreras cada una
  • se miden en computadoras de escritorio. (la velocidad de los dispositivos móviles será aproximadamente 10 veces más lenta)

Flexbox antiguo: costos de diseño de ~43.5 ms


Ejemplo de diseño antiguo de Flexbox

Nuevo Flexbox: costos de diseño de ~18.2 ms


Ejemplo de nuevo diseño de Flexbox

Resumen: La vista anterior es 2.3 veces más lenta que la nueva.

¿Qué deberías hacer?

Cuando uses Flexbox, crea siempre los elementos nuevos: la sintaxis del tweener de IE10 y las versiones actualizadas de Flexbox, que están disponibles en Chrome 21 y versiones posteriores, Safari 7 y versiones posteriores, Firefox 22 y versiones posteriores, Opera (y Opera Mobile) 12.1 y versiones posteriores, IE 11+ y Blackberry 10+. En muchos casos, puedes hacer un resguardo para navegadores móviles antiguos.

Recuerden que son herramientas, no reglas.

Lo más importante es optimizar lo que es importante. Siempre usa el cronograma para identificar los cuellos de botella antes de dedicar tiempo a optimizar un tipo de operación.

De hecho, nos conectamos con Wilson y el equipo de Financial Times Labs y, como resultado, mejoramos la cobertura de Chrome Herramientas para desarrolladores de rendimiento. Pronto agregaremos la capacidad de ver el límite de rediseño de un elemento, y 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:

Ventana emergente de diseño de sincronización forzada