JavaScript è spesso un attivatore di modifiche visive. A volte apporta queste modifiche direttamente tramite manipolazioni dello stile e a volte tramite calcoli che comportano modifiche visive, come la ricerca o l'ordinamento dei dati. Il codice JavaScript con tempistiche sbagliate o con tempi di esecuzione lunghi può essere una causa comune di problemi di prestazioni e dovresti cercare di ridurne al minimo l'impatto, se possibile.
Calcolo dello stile
La modifica del DOM aggiungendo e rimuovendo elementi, modificando attributi, classi o riproducendo animazioni fa sì che il browser ricalcoli gli stili degli elementi e, in molti casi, il layout di parte o di tutta la pagina. Questa procedura è chiamata calcolo dello stile.
Il browser inizia a calcolare gli stili creando un insieme di selettori corrispondenti per determinare quali classi, pseudo-selettori e ID si applicano a un determinato elemento. Successivamente, elabora le regole di stile dei selettori corrispondenti e determina gli stili finali dell'elemento.
Il ruolo del ricalcolo dello stile nella latenza dell'interazione
Interaction to Next Paint (INP) è una metrica di rendimento in fase di esecuzione focalizzata sugli utenti che valuta l'adattabilità complessiva di una pagina all'input utente. Misura la latenza dell'interazione dal momento in cui l'utente interagisce con la pagina fino a quando il browser visualizza il frame successivo mostrando gli aggiornamenti visivi corrispondenti all'interfaccia utente.
Un componente significativo di un'interazione è il tempo necessario per disegnare il frame successivo. L'operazione di rendering eseguita per presentare il frame successivo è composta da molte parti, tra cui il calcolo degli stili di pagina che avviene appena prima del layout, della pittura e del compositing. Questa guida si concentra sui costi di calcolo dello stile, ma se riduci qualsiasi parte della durata totale del rendering dell'interazione, ne riduci anche la latenza totale.
Riduci la complessità dei selettori
Semplificare i selettori CSS può contribuire ad accelerare 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 */
}
Tuttavia, man mano che un progetto cresce, probabilmente ha bisogno di CSS più complessi e potresti trovarti con selettori simili al seguente:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Per determinare in che modo questi stili vengono applicati alla pagina, il browser deve chiedere efficacemente "si tratta di un elemento con una classe title con un padre di una classe box che è il segno secondario meno-nth-plus-1 del suo elemento principale? Questa operazione può richiedere del tempo
per il browser. Per semplificare, puoi modificare il selettore in modo che sia un nome di classe più specifico:
.final-box-title {
/* styles */
}
Questi nomi di classi di sostituzione potrebbero sembrare ingombranti, ma semplificano molto il compito del browser. Nella versione precedente, ad esempio, affinché il browser sappia che un elemento è l'ultimo del suo tipo, deve prima sapere tutto su tutti gli altri elementi per determinare se gli elementi successivi potrebbero essere nth-last-child. Questo può essere molto più costoso dal punto di vista del calcolo rispetto alla corrispondenza di un selettore a un elemento solo sulla base del nome della sua classe.
Riduci il numero di elementi a cui viene applicato lo stile
Un altro aspetto da considerare per il rendimento, spesso più importante della complessità del selettore, è la quantità di lavoro da eseguire quando un elemento cambia.
In termini generali, il costo peggiore del calcolo dello stile degli elementi calcolati è il numero di elementi moltiplicato per il numero di selettori, perché il browser deve controllare ogni elemento almeno una volta rispetto a ogni stile per verificare se corrisponde.
I calcoli degli stili possono avere come target alcuni elementi direttamente anziché invalidare tutta la pagina. Nei browser moderni, questo tende a essere meno problematico perché il browser non deve sempre controllare tutti gli elementi che potrebbero essere interessati da una modifica. I browser meno recenti, invece, non sono sempre ottimizzati per queste attività. Se possibile, riduci il numero di elementi non validi.
Misura il costo di ricalcolo dello stile
Esistono due modi per misurare il costo del ricomputo degli stili nel browser. Ognuno di loro dipende da se vuoi misurarla nel browser nel tuo ambiente di sviluppo o se vuoi misurare quanto tempo richiede questo processo per gli utenti reali del tuo sito web.
Misurare il costo del ricalcolo dello stile in Chrome DevTools
Un modo per misurare il costo dei ricomputi degli stili è utilizzare il riquadro sul rendimento in Chrome DevTools. Per iniziare, segui questi passaggi:
- Apri DevTools.
- Vai alla scheda Rendimento.
- (Facoltativo) Seleziona la casella di controllo Statistiche selettore.
- Fai clic su Registra.
- Interagisci con la pagina.
Quando interrompi la registrazione, viene visualizzata un'immagine simile alla seguente:
La striscia in alto è un grafico a fiamme in miniatura che traccia i fotogrammi al secondo. Più l'attività è vicina al fondo della striscia, più velocemente il browser visualizza i frame. Se vedi il grafico a fiamme che si allinea in alto con barre rosse sopra, significa che c'è del lavoro che causa frame a lunga esecuzione.
Vale la pena dare un'occhiata più da vicino ai frame di lunga durata durante un'interazione come lo scorrimento. Se vedi un grande blocco viola, aumenta lo zoom sull'attività e seleziona qualsiasi lavoro con l'etichetta Ricalcola stile per ottenere maggiori informazioni sulle operazioni di ricalcolo dello stile potenzialmente costose.
Se fai clic sull'evento, viene visualizzato lo stack di chiamate. Se il lavoro di rendering è stato causato da un'interazione dell'utente, richiama il codice JavaScript che ha attivato la modifica dello stile. Mostra anche il numero di elementi interessati dalla modifica (in questo caso poco più di 900 elementi) e il tempo necessario per il calcolo dello stile. Puoi utilizzare queste informazioni per iniziare a cercare una soluzione nel codice.
Se hai selezionato la casella di controllo Statistiche selettore nelle impostazioni del riquadro Prestazioni prima di eseguire una traccia, nel riquadro inferiore della traccia sarà presente una scheda aggiuntiva con lo stesso nome.
Questo riquadro fornisce dati utili sul costo relativo di ciascun selettore, consentendoti di identificare selettori CSS costosi.
Per ulteriori informazioni, consulta la documentazione delle statistiche sui selettori CSS.
Misurare il costo del ricalcolo dello stile per gli utenti reali
Se vuoi sapere quanto tempo occorre per il ricalcolo degli stili per gli 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 alla web-vitals libreria JavaScript, incluso il tempo di ricalcolo degli stili.
Se sospetti che il ritardo di visualizzazione di un'interazione sia il principale contributo all'INP di una pagina, devi capire quanto tempo viene impiegato per ricalcolare gli stili nella pagina. Per ulteriori informazioni, consulta la sezione su come misurare il tempo di ricalcolo dello stile nel campo.