Introduzione
Se sei un tipo di persona che tiene il passo con cose come come funzionano i browser, sai già che di recente sono stati pubblicati alcuni articoli interessanti che illustrano in dettaglio l'operazione composita e il renderer con accelerazione GPU di Chrome. Il primo video Accelerated Rendering in Chrome: The Layer Model è un'ottima introduzione al modo in cui Chrome utilizza il concetto di livelli per disegnare le pagine; per un approfondimento più approfondito, la compositing accelerata GPU in Chrome spiega in che modo Chrome utilizza questi livelli, insieme alla GPU per il rendering della pagina.
La questione filosofica
Dopo aver dedicato molto tempo alla scrittura di rasterizzatori software per scopi 3D, mi è sembrato chiaro che alcune proprietà CSS avrebbero dovuto avere prestazioni diverse durante il disegno della pagina. Ad esempio, la rasterizzazione di una piccola immagine sullo schermo è un'operazione algoritmica completamente diversa, in quanto consente di disegnare un'ombra su una forma arbitraria. La domanda è diventata: in che modo le diverse proprietà CSS influiscono sul peso di rendering della tua pagina?
Il mio obiettivo era classificare un ampio insieme di proprietà/valori CSS in base ai tempi di colorazione, in modo da poter capire quali tipi di proprietà CSS sono più efficaci di altri. Per farlo, ho scritto alcune automazioni con nastro adesivo e bubble gum per tentare di aggiungere visibilità numerica ai tempi di disegno del CSS, funzionando così:
- Genera una suite di singole pagine HTML, ognuna con un singolo elemento DOM e alcune permutazioni di proprietà CSS associate.
- Esegui alcuni script di automazione che, per ogni pagina, potranno:
- Avvia Chrome
- Carica una pagina
- Crea un'immagine sci per la pagina.
- Esegui ogni foto Skia acquisita con lo Skia Benchmark per ottenere i tempi.
- Sfrutta al massimo la tempistica e lasciati stupire dai numeri. (Questa parte è importante...)
Con questa configurazione, generiamo una suite di pagine HTML, in cui ogni pagina contiene una permutazione univoca di proprietà e valori CSS; ad esempio, ecco due file HTML:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Un'altra cosa è che è più complessa
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Di seguito, come variante dell'ultimo esempio, in cui modifichiamo solo il valore del gradiente radiale:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Ogni pagina viene poi caricata in un'istanza nuova di Chrome (per garantire che i tempi non siano in qualche modo alterati da stati inattivi nei ricaricamenti delle pagine) e un'immagine Sci (*.SKP) viene utilizzata per valutare quali comandi Skia vengono utilizzati per colorare la pagina. Dopo aver generato i file SKP per ogni file HTML, eseguiamo un altro batch per eseguire il push dei file *.SKP tramite l'applicazione Skia Benchmark (creata dal codice sorgente di Skia), che scarica il tempo medio necessario per il rendering della pagina.
Valutare i dati
Da qui, ora abbiamo una certa capacità di tracciare il tempo necessario per la colorazione di una suite di proprietà CSS. In alternativa, possiamo iniziare a eseguire il ranking delle proprietà CSS in base alle loro prestazioni di disegno. Ecco un grande grafico creato con Chrome 27 beta che mostra tutti i dati relativi alle tempistiche di questo processo. Tieni presente che tutti i dati sono soggetti a modifica man mano che Chrome diventa più veloce e veloce nel tempo.
Ogni barra verticale rappresenta il tempo di visualizzazione di una pagina con una singola combinazione di proprietà CSS (ingrandimento di 100 volte; il valore in scala reale di questo grafico è 0,1,56 ms). Molte linee carine, ma in questa forma sono in qualche modo inutili; dobbiamo eseguire un po' di data mining per trovare tendenze utili.
Innanzitutto, troviamo la prova che alcune proprietà CSS sono semplicemente più costose da visualizzare di altre. Ad esempio, disegnare un'ombra su un elemento DOM comporta un'operazione a più passaggi con spline e altri tipi di elementi dannosi, al contrario di un'opacità che dovrebbe essere più facile da visualizzare.
In secondo luogo, cosa più interessante, le combinazioni di proprietà CSS possono richiedere un tempo di colorazione maggiore rispetto alla somma delle parti. Dal punto di vista di un osservatore, questo è un po' strano, ci aspettiamo che A + B = C, non 2, 2C. Ad esempio, l'aggiunta di box-shadow e border-radius-stroke :
L'aspetto più interessante di questo processo è che non si tratta solo della proprietà box-shadow stessa, ma piuttosto di quella specifica permutazione di valore. Ad esempio, la tabella seguente mostra un raggruppamento di box-shadow : 50% e border-radius con varianti dei valori.
Osservando i dati, succede per un po'. Ci sono molte combinazioni strane e di vario tipo e la mia suite di test difficilmente le tocca tutti; ci sono ancora tantissimi test e combinazioni che potrebbero dare risultati interessanti
Individuazione del peso del rendering della pagina
Grazie alla possibilità di monitorare i tempi di rendering di ogni elemento della pagina, gli sviluppatori possono iniziare a valutare il peso del rendering della pagina e il modo in cui questo influisce sulla reattività del sito. Ecco un paio di suggerimenti per iniziare
- Utilizza la modalità di colorazione continua di Chrome in Chrome Dev Tools per comprendere i costi delle proprietà CSS.
- Incorpora le revisioni del codice CSS nel processo di revisione del codice esistente per rilevare i problemi di prestazioni Cerca nel tuo CSS le parti in cui utilizzi elementi noti per essere più costosi, come gradienti e ombre. Chiediti, ne ho davvero bisogno qui.
- In caso di dubbi, cerca sempre un rendimento migliore. Magari i tuoi utenti non ricordano la larghezza di spaziatura interna nelle colonne, ma ricorderanno come ci si sente a visitare il sito.
Considerazioni finali
Uno degli aspetti più interessanti di questo esperimento è che i tempi di esecuzione continueranno a cambiare ogni volta che ogni versione di Chrome (si spera che diventi più veloce); il software del browser è una superficie in continua evoluzione. Quello che è lento oggi, potrebbe esserlo domani. Puoi prendere spunto da questo articolo per evitare di mettere box-shadow: 1px 2px 3px 4px un elemento che ha già border-radius:5. Tuttavia, l'aspetto più importante dovrebbe essere che le proprietà CSS influiscono direttamente sui tempi di visualizzazione delle pagine.