Riduci l'ambito e la complessità dei calcoli di stile

Jeremy Wagner

Paul Lewis

JavaScript spesso attiva modifiche visive. A volte che cambia direttamente attraverso manipolazioni di stile e talvolta tramite calcoli che comportano cambiamenti visivi, come la ricerca o l'ordinamento dei dati. In orario inadeguato o JavaScript a lunga esecuzione può essere una causa comune di problemi di prestazioni dovrebbe cercare di minimizzare il suo impatto dove possibile.

Calcolo dello stile

Cambiare il DOM mediante l'aggiunta e la rimozione di elementi, la modifica di attributi, classi o la riproduzione di animazioni, fa ricalcolare gli stili degli elementi da parte del browser. in molti casi, il layout di una parte o dell'intera pagina. Questo processo è chiamato calcolo di stile calcolato.

Il browser inizia a calcolare gli stili creando un insieme di selettori corrispondenti a determinano quali classi, pseudoselettori e ID si applicano a un determinato elemento. Quindi, elabora le regole di stile dei selettori corrispondenti e scopre gli stili finali dell'elemento.

Tempo di ricalcolo dello stile e latenza dell'interazione

Interazione con Next Paint (INP) è un runtime incentrato sugli utenti metrica sul rendimento che valuta l'adattabilità complessiva di una pagina all'input dell'utente. Misura la latenza dell'interazione da quando l'utente interagisce con la pagina fino a quando il browser visualizza il frame successivo che mostra gli aggiornamenti visivi corrispondenti l'interfaccia utente.

Un componente significativo di un'interazione è il tempo necessario per colorare il successivo frame. Il lavoro di rendering fatto per presentare il frame successivo è composto da molte parti, tra cui il calcolo degli stili di pagina che si verificano subito prima del layout, della colorazione e di composizione. Questa pagina si concentra sui costi di calcolo dello stile, ma riduce eventuali parte della fase di rendering relativa all'interazione riduce anche il suo latenza, anche per i calcoli di stile.

Riduci la complessità dei selettori

La semplificazione dei nomi dei selettori può aiutarti a velocizzare lo stile della pagina calcoli. I selettori più semplici fanno riferimento a un elemento in CSS con nome della classe:

.title {
  /* styles */
}

Ma man mano che ogni progetto cresce, probabilmente ha bisogno di CSS più complessi e potresti finire con selettori simili al seguente:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

Per determinare come questi stili vengono applicati alla pagina, il browser deve gestire in modo efficace chiedi "Questo è un elemento con una classe title il cui padre è meno-nth-plus-1 elemento secondario con una classe di box?" Questa operazione può richiedere molto tempo, a seconda del selettore utilizzato come così come il browser in questione. Per semplificare questa operazione, puoi cambiare il selettore essere solo un nome di classe:

.final-box-title {
  /* styles */
}

Questi nomi delle classi di sostituzione possono sembrare imbarazzanti, ma rendono la classe lavoro molto più semplice. Nella versione precedente, ad esempio, affinché il browser sappia un elemento è l'ultimo del suo tipo, deve prima sapere tutto per determinare se gli elementi successivi che potrebbero nth-last-child. Questo può essere molto più costoso dal punto di vista computazionale abbinando un selettore a un elemento solo perché la sua classe corrisponde.

Riduci il numero di elementi di cui applicare lo stile

Un'altra considerazione del rendimento e spesso più importante del selettore e complessità, è la quantità di lavoro che deve essere svolta quando un elemento cambia.

In termini generali, il costo peggiore del calcolo dello stile degli elementi calcolati è il numero di elementi moltiplicato per il conteggio del selettore, perché il browser deve controllare ogni elemento almeno una volta rispetto a ogni stile per vedere se corrispondenze.

I calcoli degli stili possono avere come target alcuni elementi direttamente invece di invalidarli dell'intera pagina. Nei browser moderni, questo tende a essere meno problematico perché il browser non ha sempre bisogno di controllare tutti gli elementi interessati da una modifica. I browser meno recenti, invece, non sono sempre ottimizzati per questo tipo di attività. Dove puoi, devi ridurre il numero di elementi invalidati.

Misura il costo del ricalcolo dello stile

Un modo per misurare il costo dei ricalcoli dello stile è utilizzare le prestazioni in Chrome DevTools. Per iniziare, procedi nel seguente modo:

1. Apri DevTools.
2. Vai alla scheda Rendimento.
3. Fai clic su Registra.
4. Interagire con la pagina.

Quando interrompi la registrazione, viene visualizzato un elemento simile alla seguente:

La striscia in alto è un diagramma a fiamme in miniatura che traccia i fotogrammi per secondo. Più l'attività è vicina alla parte inferiore della striscia, più velocemente i frame vengono dipinti dal browser. Se vedi il grafico a fiamme che si allinea in alto con barre rosse sopra, c'è un lavoro che causa a lunga durata.

I frame lunghi durante un'interazione, come lo scorrimento, sono più utili look. Se vedi un grande blocco viola, aumenta lo zoom sull'attività e seleziona con l'etichetta Ricalcola stile per ottenere maggiori informazioni sulle costoso lavoro di ricalcolo dello stile.

Se fai clic sull'evento, viene visualizzato il relativo stack di chiamate. Se il lavoro di rendering è stato causato da un l'interazione dell'utente, viene richiamato il codice JavaScript che ha attivato la modifica dello stile. Mostra anche il numero di elementi interessati dalla modifica, poco più di 900 elementi in questo caso e quanto tempo ha richiesto il calcolo dello stile. Puoi utilizzare la modalità queste informazioni per iniziare a cercare una correzione nel codice.

Usa Blocco, Elemento, Modificatore

Approcci alla programmazione come BEM (blocco, elemento, modificatore) integrare nel selettore i vantaggi in termini di prestazioni. BEM consiglia di hanno una singola classe e, laddove è necessaria la gerarchia, questa viene poi integrato nel nome del corso:

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

Se hai bisogno di un modificatore, come nell'esempio dell'ultimo elemento secondario, puoi aggiungerlo questo:

.list__list-item--last-child {
  /* Styles */
}

BEM è un buon punto di partenza per organizzare il tuo CSS, sia da una struttura e grazie alle semplificazioni di ricerca dello stile che promuove.

Se BEM non ti piace, ci sono altri modi per approcciarti al tuo CSS, ma dovresti valutarne le prestazioni e l'ergonomia prima di iniziare.

Risorse

• Annullamento dello stile in Blink
• BEM (blocco, elemento, modificatore)

Immagine hero da Unsplash, di Markus Spiske.