Introduzione
Se sei il tipo di persona che si tiene aggiornata su cose come il funzionamento dei browser, saprai già che di recente sono stati pubblicati alcuni articoli straordinari che descrivono in dettaglio l'operazione di rendering/composizione con accelerazione GPU di Chrome. Innanzitutto, Accelerated Rendering in Chrome: The Layer Model è un'ottima introduzione al modo in cui Chrome utilizza il concetto di livelli per disegnare la pagina. Per un approfondimento, GPU Accelerated Compositing in Chrome illustra come Chrome utilizza questi livelli, insieme alla GPU, per il rendering della pagina.
La domanda filosofica
Avendo trascorso molto tempo a scrivere rasterizzatori software per scopi 3D, mi è apparso evidente che alcune proprietà CSS dovrebbero avere prestazioni diverse durante il disegno della pagina. Ad esempio, la rasterizzazione di un'immagine di piccole dimensioni sullo schermo è un'operazione algoritmica completamente diversa rispetto al disegno di un'ombra su una forma arbitraria. Quindi la domanda è diventata: In che modo le diverse proprietà CSS influiscono sul peso di rendering della pagina?
Il mio obiettivo era classificare un ampio insieme di proprietà/valori CSS in base ai tempi di visualizzazione, in modo da poter comprendere quali tipi di proprietà CSS sono più efficienti di altri. Per farlo, ho scritto un'automazione con nastro adesivo e gomma da masticare per tentare di aggiungere visibilità numerica ai tempi di visualizzazione CSS, che funzionava in questo modo:
- Genera una suite di singole pagine HTML, ciascuna con un singolo elemento DOM e una permutazione di proprietà CSS associate.
- Esegui uno script di automazione che, per ogni pagina:
- Avvia Chrome
- Carica una pagina
- Genera un'immagine Skia per la pagina
- Esegui ogni Skia Picture acquisita tramite Skia Benchmark per ottenere i tempi
- Estrai tutte le tempistiche e ammira i 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 altro, più complesso
<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 radial-gradient:
<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 quindi caricata in una nuova istanza di Chrome (per garantire che i tempi non siano in qualche modo influenzati da stati obsoleti nei ricaricamenti delle pagine) e viene acquisita una Skia Picture (*.SKP) per valutare quali comandi Skia vengono utilizzati per visualizzare la pagina. Una volta generati i file SKP per ogni file HTML, eseguiamo un altro batch per inviare i file *.SKP tramite l'applicazione Skia Benchmark (creata dal codice sorgente di Skia), che restituisce il tempo medio impiegato per eseguire il rendering della pagina.
Valutazione dei dati
In questo modo, ora abbiamo una certa capacità di tracciare il tempo necessario per la visualizzazione di una suite di proprietà CSS. O meglio, possiamo iniziare a classificare le proprietà CSS in base alle loro prestazioni di visualizzazione. Ecco un grafico di grandi dimensioni acquisito con Chrome 27 beta che mostra l'intero set di dati di temporizzazione di questo processo. Tieni presente che tutti i dati sono soggetti a modifiche, poiché Chrome diventa sempre più veloce con il passare del tempo.
Ogni barra verticale rappresenta il tempo di visualizzazione di una pagina con una singola combinazione di proprietà CSS (ingrandita di 100 volte; il valore della scala reale di questo grafico è 0,1,56 ms). Tante belle linee, ma in questa forma sono un po' 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 rispetto ad altre. Ad esempio, disegnare un'ombra su un elemento DOM comporta un'operazione in più passaggi con spline e altri tipi di elementi complessi, a differenza dell'opacità, che dovrebbe essere più facile da visualizzare.
In secondo luogo, e questo è l'aspetto più interessante, le combinazioni di proprietà CSS possono avere un tempo di visualizzazione superiore alla somma delle loro parti. Dal punto di vista di un osservatore, questo è un po' strano, ci aspetteremmo che A+B = C, non 2,2C. Ad esempio, aggiungendo box-shadow e border-radius-stroke :
La cosa davvero interessante è che non si tratta solo della proprietà box-shadow, ma di quella specifica permutazione di valori. Ad esempio, di seguito è riportato un raggruppamento di box-shadow : 50% e border-radius con variazioni di valore.
Osservando i dati, questo continua per un po'. Esistono molte combinazioni strane e la mia suite di test le tocca a malapena tutte; ci sono ancora tantissimi test e combinazioni che potrebbero produrre risultati interessanti
Individuazione del peso di 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 influisce sulla reattività del sito. Ecco un paio di suggerimenti per iniziare
- Utilizza la modalità Continuous Paint di Chrome in Chrome DevTools per capire quali proprietà CSS ti stanno costando.
- Integra le revisioni del CSS nel processo di revisione del codice esistente per individuare i problemi di prestazioni. Cerca i punti del CSS in cui utilizzi elementi noti per essere più onerosi, come gradienti e ombre. Chiediti: ho davvero bisogno di queste parole chiave qui?
- In caso di dubbi, scegli sempre l'opzione che offre un rendimento migliore. I tuoi utenti potrebbero non ricordare la larghezza della spaziatura interna delle colonne, ma ricorderanno l'esperienza di visita del tuo sito.
Considerazioni finali
Uno degli aspetti più interessanti di questo esperimento è che le tempistiche continueranno a cambiare con ogni versione di Chrome (si spera che diventino più veloci ;) il software del browser è un'area di superficie in continua evoluzione. Ciò che è lento oggi potrebbe essere veloce domani. Puoi trarre da questo articolo l'indicazione di evitare di inserire box-shadow: 1px 2px 3px 4px in un elemento che ha già border-radius:5. Tuttavia, l'aspetto più importante è che le proprietà CSS influiscono direttamente sui tempi di visualizzazione della pagina.