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:
- Apri DevTools.
- Vai alla scheda Rendimento.
- (Facoltativo) Seleziona la casella di controllo Statistiche selettore.
- Fai clic su Registra.
- 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 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.
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 come misurare il tempo di ricalcolo dello stile sul campo.
Risorse
- Statistiche del selettore in Chrome DevTools
- Annullamento dello stile in Blink
- Interazione con Next Paint (INP)
- La libreria JavaScript
web-vitals - Misurare il tempo di ricalcolo dello stile sul campo
Immagine hero da Unsplash, di Markus Spiske.