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

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 dello stile.

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.

Il ruolo del ricalcolo dello stile nella 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 guida si concentra sui costi di calcolo dello stile, ma sulla riduzione qualsiasi parte della durata totale del rendering dell'interazione ne riduce anche il totale una latenza di pochi millisecondi.

Riduci la complessità dei selettori

La semplificazione dei selettori CSS può aiutare a velocizzare i calcoli degli stili della pagina. I selettori più semplici fanno riferimento a un elemento in CSS con solo il nome di una 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 con un padre di una classe di box, ovvero il segno secondario meno-nth-plus-1 dell'elemento principale? Capire il problema può richiedere del tempo per il browser. Per semplificare questo processo, puoi modificare selettore per essere un nome di classe più specifico:

.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 sulla base del nome della sua classe.

Riduci il numero di elementi di cui applicare lo stile

Un'altra considerazione delle prestazioni, e spesso più importante del selettore complessità, indica la quantità di lavoro da svolgere 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

Esistono due modi per misurare il costo del ricalcolo dello stile in il browser. Ognuno di essi dipende dalla misurazione nel browser o meno nel tuo ambiente di sviluppo o se vuoi misurare per quanto tempo questo processo per gli utenti reali del tuo sito web.

Misura i costi di ricalcolo dello stile in Chrome DevTools

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. (Facoltativo) Seleziona la casella di controllo Statistiche selettore.
  4. Fai clic su Registra.
  5. Interagire con la pagina.

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

DevTools che mostra i calcoli di stile.
Un report DevTools che mostra i calcoli degli stili.

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.

Aumentare lo zoom
    un'area che presenta problemi in Chrome DevTools nel riepilogo delle attività del prompt
    delle prestazioni in Chrome DevTools.
Frame a lunga esecuzione nell'attività DevTools riassunto.

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.

Recupero
    i calcoli di stile a lungo termine, tra cui informazioni fondamentali come
    come la quantità di elementi interessati dal ricalcolo dello stile.
Un ricalcolo di stile a lungo termine che richiede di oltre 25 ms nel riepilogo di DevTools.

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 questo informazioni per iniziare a cercare una correzione nel codice.

Se hai selezionato la casella di controllo Statistiche del selettore nelle impostazioni del riquadro Prestazioni prima di eseguire una traccia, poi in basso della traccia avrà una scheda aggiuntiva con lo stesso nome.

La tabella delle statistiche del selettore CSS attuale
    viene visualizzato nel riquadro delle prestazioni di Chrome DevTools. Questa tabella contiene
    e i dati corrispondenti per elementi come il tempo trascorso, corrispondono
    tentativi, conteggio delle corrispondenze, percentuale di nodi non corrispondenti, selettori e
    il foglio di stile in cui si trovano.
. La tabella delle statistiche del selettore, come mostrata nel riquadro delle prestazioni di Chrome DevTools.

Questo riquadro fornisce dati utili sul costo relativo di ciascun selettore, consentendo per identificare selettori CSS costosi.

Per ulteriori informazioni, consulta la documentazione relativa alle statistiche del selettore CSS.

Misura i costi di ricalcolo dello stile per gli utenti reali

Se vuoi sapere quanto tempo occorre per il ricalcolo dello stile utenti reali del tuo sito web, l'API Long Animation Frames ti offre gli strumenti necessari per farlo. I dati di questa API sono stati aggiunti al web-vitals libreria JavaScript, incluso il tempo di ricalcolo dello stile.

Se sospetti che il ritardo nella presentazione di un'interazione sia il fattore principale contributo all'INP di una pagina, ti consigliamo di capire quanto tempo a ricalcolare gli stili nella pagina. Per ulteriori informazioni, leggi le informazioni come misurare il tempo di ricalcolo dello stile sul campo.

Risorse

Immagine hero da Unsplash, di Markus Spiske.