Qualche tempo fa, Wilson Page ha scritto un ottimo articolo per Smashing Magazine in cui spiegava come è stata realizzata l'app web del Financial Times. Nell'articolo, Wilson osserva:
Quando l'app ha iniziato a crescere, abbiamo notato che le prestazioni peggioravano sempre di più.
Abbiamo trascorso diverse ore nella cronologia degli Strumenti per sviluppatori di Chrome e abbiamo trovato il colpevole: shock, horror! Si tratta del nostro nuovo migliore amico, Flexbox. La sequenza temporale ha mostrato che alcuni layout richiedevano quasi 100 millisecondi; la rielaborazione dei layout senza flexbox ha ridotto questo tempo a 10 millisecondi.
I commenti di Wilson riguardavano il flexbox originale (legacy) che utilizzava display: box;. Purtroppo non ha mai avuto la possibilità di rispondere se il nuovo flexbox (display: flex;) fosse più veloce, ma su CSS Tricks, Chris Coyier ha aperto questa domanda.
Abbiamo chiesto a Ojan Vafai, che ha scritto gran parte dell'implementazione in WebKit e Blink, di parlarci del nuovo modello e dell'implementazione di flexbox.
Il nuovo codice flexbox ha molti meno percorsi di codice del layout con più passaggi. Tuttavia, puoi comunque raggiungere facilmente percorsi di codice con più passaggi (ad es.
flex-align: stretchè spesso a 2 passaggi). In generale, dovrebbe essere molto più veloce nel caso più comune, ma puoi creare un caso in cui sia altrettanto lento.
Detto questo, se puoi, il layout dei blocchi standard (non in primo piano) sarà in genere veloce o più veloce del nuovo flexbox, poiché è sempre a passaggio singolo. Tuttavia, il nuovo flexbox dovrebbe essere più veloce dell'utilizzo di tabelle o della scrittura di codice di layout basato su JS personalizzato.
Per vedere la differenza nei numeri, ho fatto un confronto diretto tra la vecchia e la nuova sintassi.
Benchmark del vecchio e del nuovo Flexbox
- vecchio flexbox e nuovo flexbox (con fallback)
- 500 elementi per pagina
- valutare il costo del caricamento della pagina per disporre gli elementi
- media di 3 esecuzioni ciascuna
- misurate su computer. (sui dispositivi mobili sarà circa 10 volte più lento)
Vecchio flexbox: costi di layout di circa 43,5 ms
Nuovo flexbox: costi di layout di circa 18,2 ms
Riepilogo: la versione precedente è 2,3 volte più lenta della nuova.
Cosa dovresti fare?
Quando utilizzi flexbox, crea sempre contenuti per le nuove funzionalità: la sintassi del tweener di IE10 e il nuovo flexbox aggiornato presente in Chrome 21 e versioni successive, Safari 7 e versioni successive, Firefox 22 e versioni successive, Opera (& Opera Mobile) 12.1 e versioni successive, IE 11 e versioni successive e Blackberry 10 e versioni successive. In molti casi puoi eseguire il fallback al flexbox precedente per supportare alcuni browser mobile meno recenti.
Ricorda: strumenti, non regole
È 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.
Infatti, abbiamo contattato Wilson e il team di Financial Times Labs e, di conseguenza, abbiamo migliorato la copertura di Chrome DevTools degli strumenti per le prestazioni del layout. A breve aggiungeremo la possibilità di visualizzare il confine del nuovo layout di un elemento e gli eventi di layout nella sequenza temporale verranno caricati con i dettagli dell'ambito, della radice e del costo di ogni layout:
