Poco fa, Wilson Page ha scritto un ottimo articolo per Smashing Magazine, descrivendo in che modo ha dato vita all'app web del Financial Times. Nell'articolo, Wilson osserva:
A mano a mano che l'app ha iniziato a crescere, abbiamo riscontrato che le prestazioni peggioravano sempre di più.
Abbiamo trascorso alcune ore nella cronologia degli Strumenti per sviluppatori di Chrome e abbiamo scoperto che il colpevole è: scioccante, horror! era il nostro nuovo migliore amico, flexbox. La sequenza temporale ha dimostrato che alcuni layout richiedevano quasi 100 millisecondi; rielaborando i nostri layout senza flexbox, questo limite si è ridotto a 10 millisecondi.
I commenti di Wilson riguardavano il flexbox originale (legacy) che utilizzava display: box;. Purtroppo non hanno mai avuto la possibilità di rispondere se il nuovo flexbox (display: flex;) era più veloce, ma, oltre i trucchi per i CSS, Chris Coyier ha aperto la domanda.
Abbiamo chiesto a Ojan Vafai, che ha scritto gran parte dell'implementazione in WebKit & Blink, del modello e dell'implementazione flexbox più recenti.
Il nuovo codice flexbox ha molti meno percorsi di layout multi-pass. Tuttavia, puoi comunque utilizzare i codepath con più passaggi (ad es.
flex-align: stretchè spesso in 2 passaggi). In genere, dovrebbe essere molto più veloce nel caso comune, ma si può costruire un caso in cui è altrettanto lento.
Detto questo, se riesci a farla franca, il layout a blocchi regolare (non mobile) di solito sarà più veloce o più veloce del nuovo flexbox poiché è sempre single-pass. Ma il nuovo flexbox dovrebbe essere più veloce rispetto all'utilizzo di tabelle o alla scrittura di codice di layout personalizzato basato su JS.
Per vedere la differenza nei numeri, ho fatto un confronto diretto tra la vecchia e la nuova sintassi.
Benchmark precedente e nuovo Flexbox
- flexbox precedente rispetto a nuovo flexbox (con fallback)
- 500 elementi per pagina
- valutazione del costo di caricamento della pagina per organizzare gli elementi
- calcolata in media su 3 esecuzioni ciascuna
- misurate su computer. (il dispositivo mobile sarà circa 10 volte più lento)
Flexbox precedente: costi di layout di ~43,5 ms
Nuovo flexbox: costi di layout di ~18,2 ms
Riepilogo: la vecchia versione è 2,3 volte più lenta di quella nuova.
Cosa dovreste fare?
Quando usi flexbox, crea sempre le novità: la sintassi del tweener IE10 e la nuova flexbox aggiornata disponibile in Chrome 21 e versioni successive, Safari 7 e versioni successive, Firefox 22 e versioni successive, Opera (e Opera Mobile) 12.1 e versioni successive, IE 11 e versioni successive e BlackBerry 10 e versioni successive. In molti casi puoi eseguire una procedura di riserva per utilizzare le versioni precedenti di flexbox per dispositivi mobili.
Ricorda: strumenti, non regole
La cosa più importante è ottimizzare ciò che conta. Usa sempre la sequenza temporale per identificare i colli di bottiglia prima di dedicare del tempo a ottimizzare un tipo di operazione.
Infatti, abbiamo contattato Wilson e il team Financial Times Labs e, di conseguenza, abbiamo migliorato la copertura degli strumenti per il rendimento del layout in Chrome DevTools. A breve sarà disponibile la possibilità di visualizzare i confini di relayout di un elemento. Inoltre, gli eventi di layout nella sequenza temporale verranno caricati con i dettagli dell'ambito, della directory principale e del costo di ogni layout:
