Poco fa, Wilson Page ha scritto un ottimo articolo per Smashing magazine per approfondire il modo in cui è stata creata l'app web del Financial Times. Nell'articolo, Wilson osserva che:
Man mano che l'app iniziava a crescere, il rendimento migliorava sempre di più.
Abbiamo trascorso qualche ora nella cronologia degli strumenti per sviluppatori di Chrome e abbiamo trovato il colpevole: shock, orrore! era il nostro nuovo migliore amico, Flexbox. La sequenza temporale mostrava che alcuni layout richiedevano quasi 100 millisecondi; la rielaborazione dei nostri layout senza flexbox ha ridotto i tempi di attesa a 10 millisecondi.
I commenti di Wilson riguardavano la flexbox originale (legacy) che utilizzava display: box;. Sfortunatamente, non hanno mai avuto modo di rispondere se il più recente flexbox (display: flex;) fosse più veloce, ma su CSS Tricks Chris Coyier ha aperto la domanda.
Abbiamo chiesto a Ojan Vafai, che ha scritto gran parte dell'implementazione in WebKit & Blink, di parlare del nuovo modello e della relativa implementazione flexbox.
Il nuovo codice flexbox ha molti meno percorsi di codice per il layout a più passaggi. Tuttavia, puoi comunque raggiungere abbastanza facilmente percorsi di codice multi-passaggio (ad es.
flex-align: stretchè spesso in due passaggi). In generale, dovrebbe essere molto più veloce nel caso comune, ma puoi costruire un caso in cui è altrettanto lento.
Detto questo, se riesci a farla franca, il layout a blocchi normale (non float) di solito sarà più veloce o più veloce dei nuovi flexbox, in quanto è sempre in single-pass. Tuttavia, la nuova flexbox dovrebbe essere più veloce rispetto all'uso di tabelle o alla scrittura di codice di layout JS-base personalizzato.
Per vedere la differenza in termini di numeri, ho fatto un confronto diretto tra la vecchia e la nuova sintassi.
Benchmark precedente/nuovo Flexbox
- versione precedente di flexbox e nuova flexbox (con funzionalità di riserva)
- 500 elementi per pagina
- valutare il costo di caricamento della pagina per definire gli elementi
- calcolata in media su 3 esecuzioni ciascuna
- misurata su computer. (il dispositivo mobile sarà circa 10 volte più lento)
Vecchio flexbox: costi di layout di ~43,5 ms
Nuovo flexbox: costi di layout di ~18,2 ms
Riepilogo: il vecchio metodo è 2,3 volte più lento rispetto al nuovo.
Cosa dovreste fare?
Quando usi Flexbox, crea sempre contenuti nuovi: la sintassi dei tweener di IE10 e la nuova flexbox aggiornata 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 alcuni casi, puoi eseguire il fallback della versione precedente di flexbox
Ricorda: strumenti, non regole
L'aspetto più importante è ottimizzare ciò che conta. Utilizza sempre la sequenza temporale per identificare i colli di bottiglia prima di dedicare tempo all'ottimizzazione di un tipo di operazione.
Di fatto, abbiamo contattato Wilson e il team dei Financial Times Labs e, di conseguenza, abbiamo migliorato la copertura degli strumenti per le prestazioni del layout in Chrome DevTools. Presto aggiungeremo la possibilità di visualizzare i confini del relayout di un elemento. Gli eventi di layout nella sequenza temporale verranno caricati con i dettagli dell'ambito, della radice e del costo di ogni layout:
