Come scrivere meglio CSS con prestazioni in mente

Nel post di oggi esamineremo le scelte di codice che possiamo fare in CSS per migliorare le prestazioni del sito. Ma, prima di immergerci in queste scelte, facciamo prima una breve panoramica del flusso di lavoro di rendering della pagina web per concentrarci sularee problematiche (in termini di prestazioni) che sono risolvibili tramite CSS.

Ecco il flusso approssimativo delle operazioni eseguite dal browser dopo la creazione dell'albero DOM:

1. Ricalcola stile (e crea la creazione dell'albero). Browser calcola gli stili da applicare agli elementi nell'albero DOM. Successivamente viene creato un albero di rendering mentre scartano i nodi (elementi) dall'albero DOM che non devono essere renderizzati (elementi con display: none) e quelli che sono (pseudo-elementi).
2. Layout (aka Reflow). Utilizzando lo stile calcolato di prima, il browser calcola la posizione e la geometria di ciascun elemento sulla pagina.
3. Riverniciare. Una volta mappato il layout, i pixel vengono disegnati sullo schermo.
4. Strati compositi. Durante la riverniciatura, il dipinto può essere eseguito autonomamente in diversi strati; questi strati vengono infine combinati insieme.

Ora proseguiamo su ciò che possiamo fare nelle prime tre fasi dell'operazione per scrivere codici CSS con prestazioni migliori.

1. Riduci i calcoli di stile

Come accennato in precedenza, nella fase "Ricalcola stile" il browser calcola gli stili da applicare agli elementi. Per fare ciò, il browser individua tutti i selettori nel CSS che puntano a un dato nodo di elemento nell'albero DOM. Quindi passa attraverso tutte le regole di stile in quei selettori e decide quali devono essere effettivamente applicati all'elemento.

Per evitare costosi calcoli di stile, ridurre i selettori complessi e profondamente annidati in modo che sia più semplice per il browser capire a quale elemento si riferisce un selettore. Questo riduce il tempo di calcolo.

Altri modi di impiegare includono riducendo il numero di regole di stile (dove possibile), rimuovere CSS inutilizzati ed evitando ridondanza e sostituzioni, in modo che il browser non debba passare attraverso lo stesso stile più e più volte durante i calcoli di stile.

2. Riduci i riflessi

Le modifiche di Reflows o Layout in un elemento sono processi molto "costosi" e possono essere di un problema ancora più grande quando l'elemento che ha attraversato le modifiche del layout ha una quantità significativa di I riflussi ricadono lungo la gerarchia).

I riflessi sono attivati ​​dalle modifiche del layout a un elemento, come le modifiche alle proprietà geometriche come altezza o dimensione del carattere, l'aggiunta o la rimozione di classi agli elementi, il ridimensionamento della finestra, attivato : hover, Cambiamenti DOM con JavaScript, ecc.

Proprio come nel calcolo dello stile, per ridurre i riflessi, evitare selettori complessi e alberi DOM profondi (ancora, questo serve a prevenire un'eccessiva cascata di Reflows).

Se devi modificare gli stili di layout di un componente nella tua pagina, scegli come target gli stili dell'elemento che è al più basso nella gerarchia di elementi che il componente è fatto di. Questo è così che il layout cambia non innesca (quasi) nessun altro Reflows.

Se stai animando un elemento che passa attraverso le modifiche al layout, tiralo fuori dal flusso della pagina di posizionandolo in modo assoluto, poiché il Reflow in elementi posizionati in modo assoluto non influenzerà il resto degli elementi sulla pagina.

Riassumere:

• Gli elementi di destinazione che sono più bassi nell'albero DOM quando si apportano modifiche al layout
• Scegli elementi posizionati in modo assoluto per le animazioni che cambiano il layout
• Evita di animare le proprietà del layout quando possibile

3. Riduci i rifacimenti

Il ridisegno si riferisce al disegno dei pixel sullo schermo ed è un processo costoso come Reflow. I ritardi possono essere attivati ​​da Rifletti, scorrimento della pagina, modifiche di proprietà come colore, visibilità e opacità.

Per evitare frequenti ed enormi riduzioni, utilizzare meno delle proprietà che causano ripetuti costi come ombre.

Se stai animando le proprietà di un elemento che può attivare Repaint direttamente o indirettamente, sarà di grande vantaggio se quell'elemento è nel proprio livello impedendo che il suo effetto pittorico influenzi il resto della pagina e innescando l'accelerazione hardware. Nell'accelarazione hardware, la GPU assumerà l'incarico di eseguire le modifiche dell'animazione nel livello, salvando il lavoro extra della CPU mentre accelera il processo.

In alcuni browser, opacità (con un valore inferiore a 1) e trasformare (valore diverso da nessuna) vengono automaticamente promossi a nuovi livelli e viene applicata l'accelerazione hardware per animazioni e transizioni. Preferire queste proprietà per le animazioni è quindi buono.

Per forzatamente promuovi un elemento su un nuovo livello e vai all'accelerazione hardware per l'animazione, ci sono due tecniche invocate:

1. Inserisci transform: translate3d (0, 0, 0); all'elemento, ingannando il browser per attivare l'accelerazione hardware per animazioni e transizioni.
2. Aggiungi il cambierà proprietà dell'elemento, che informa il browser delle proprietà che potrebbero cambiare nell'elemento in futuro. Nota: Sara Soueidan ha un approfondito e super-utile articolo su questo nel sito Dev.Opera.

Riassumere:

• Evita gli stili costosi che causano ritardi
• Cerca la promozione del livello e l'accelerazione hardware per animazioni e transizioni pesanti.

Prendi nota

(1) Quindi, fino a ora, non abbiamo toccato la riduzione delle dimensioni dei file CSS. Abbiamo menzionato che la riduzione delle regole di stile (e degli elementi DOM) produce un miglioramento significativo delle prestazioni a causa di quanto il browser dovrà funzionare Di meno sul processo di calcolo degli stili. Come conseguenza di questa riduzione del codice, scrivendo migliori selettori e la cancellazione di CSS inutilizzati, la dimensione del file diminuirà automaticamente.

(2) È anche consigliabile non apportare troppe modifiche consequenziali agli stili di un elemento in JavaScript. Aggiungi invece una classe all'elemento (utilizzando JavaScript) che contiene i nuovi stili per apportare queste modifiche, evitando inutili riflessi.

(3) Volete evitare il Thrashing del layout anche (forzato sincrono reflow) che si pone a causa dell'accesso e la modifica delle proprietà di layout degli elementi utilizzando JavaScript. Leggi di più su come questo uccide le prestazioni qui.