JavaScript è spesso un trigger per le 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. JavaScript con tempistiche errate o di lunga durata può essere una causa comune di problemi di prestazioni e devi cercare di ridurre al minimo il suo impatto, ove possibile.
Calcolo dello stile
La modifica del DOM tramite l'aggiunta e la rimozione di elementi, la modifica di attributi, classi o la riproduzione di 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. Poi, elabora le regole di stile dei selettori corrispondenti e determina gli stili finali dell'elemento.
Il ruolo del ricalcolo dello stile nella latenza di interazione
Interaction to Next Paint (INP) è una metrica sul rendimento di runtime incentrata sull'utente che valuta l'adattabilità complessiva di una pagina all'input utente. Misura la latenza di interazione dal momento in cui l'utente interagisce con la pagina fino a quando il browser disegna il frame successivo che mostra gli aggiornamenti visivi corrispondenti all'interfaccia utente.
Un componente significativo di un'interazione è il tempo necessario per disegnare il frame successivo. Il lavoro di rendering eseguito per presentare il frame successivo è composto da molte parti, tra cui il calcolo degli stili di pagina che si verifica poco prima del layout, della pittura e del lavoro di composizione. Questa guida si concentra sui costi di calcolo dello stile, ma la riduzione di qualsiasi parte della durata totale del rendering dell'interazione riduce anche la latenza totale.
Riduci la complessità dei selettori
La semplificazione dei selettori CSS può contribuire ad accelerare i calcoli dello stile della pagina. I selettori più semplici fanno riferimento a un elemento in CSS solo con un nome di classe:
.title {
/* styles */
}
Tuttavia, man mano che un progetto cresce, probabilmente ha bisogno di CSS più complessi e potresti ritrovarti con selettori come questo:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Per determinare come vengono applicati questi stili alla pagina, il browser deve chiedere in modo efficace:
"Si tratta di un elemento con una classe title con un elemento principale di classe
box che è l'elemento secondario meno-ennesimo-più-uno del suo elemento principale? Per il browser, capire
questo aspetto può richiedere un po' di tempo. Per semplificare questa operazione, puoi modificare il
selettore in modo che sia un nome di classe più specifico:
.final-box-title {
/* styles */
}
Questi nomi di classi sostitutivi potrebbero sembrare strani, ma semplificano
molto il lavoro del browser. Nella versione precedente, ad esempio, affinché il browser sappia
che un elemento è l'ultimo del suo tipo, deve prima conoscere tutto sugli
altri elementi per determinare se ci sono elementi che lo seguono che potrebbero
essere nth-last-child. Questa operazione può essere molto più costosa dal punto di vista computazionale rispetto
all'abbinamento di un selettore a un elemento in base al solo nome della classe.
Riduci il numero di elementi a cui viene applicato lo stile
Un altro aspetto da considerare per le prestazioni, spesso più importante della complessità del selettore, è la quantità di lavoro da svolgere quando un elemento cambia.
In termini generali, il costo peggiore per il calcolo dello stile degli elementi calcolati è il numero di elementi moltiplicato per il conteggio dei selettori, perché il browser deve controllare ogni elemento almeno una volta rispetto a ogni stile per verificare se corrisponde.
I calcoli dello stile possono essere indirizzati direttamente a pochi elementi anziché invalidare l'intera pagina. Nei browser moderni, questo problema tende a essere meno frequente perché il browser non deve sempre controllare tutti gli elementi che una modifica potrebbe interessare. I browser meno recenti, invece, non sono sempre ottimizzati per queste attività. Se possibile, riduci il numero di elementi invalidati.
Misurare il costo del ricalcolo dello stile
Esistono due modi per misurare il costo del ricalcolo dello stile nel browser. Ognuna di queste dipende dal fatto che tu voglia misurarla nel browser nel tuo ambiente di sviluppo o se vuoi misurare quanto tempo impiega questo processo per gli utenti reali sul tuo sito web.
Misurare il costo del ricalcolo dello stile in Chrome DevTools
Un modo per misurare il costo dei ricalcoli dello stile è utilizzare il pannello delle prestazioni in Chrome DevTools. Per iniziare:
- 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 fiamma in miniatura che traccia anche i fotogrammi al secondo. Più l'attività è vicina alla parte inferiore della striscia, più velocemente i frame vengono visualizzati dal browser. Se vedi il grafico a fiamma appiattirsi in alto con barre rosse sopra, significa che hai un lavoro che causa frame di lunga durata.
I frame di lunga durata durante un'interazione come lo scorrimento meritano un'analisi più approfondita. Se vedi un grande blocco viola, ingrandisci l'attività e seleziona qualsiasi lavoro etichettato Ricalcola stile per ottenere maggiori informazioni su un lavoro di ricalcolo dello stile potenzialmente costoso.
Se fai clic sull'evento, viene visualizzato il relativo stack di chiamate. Se il lavoro di rendering è stato causato da un'interazione dell'utente, viene chiamato il JavaScript che ha attivato la modifica dello stile. Mostra anche il numero di elementi interessati dalla modifica, poco più di 900 in questo caso, e il tempo impiegato per il calcolo dello stile. Puoi utilizzare queste informazioni per iniziare a cercare una correzione nel tuo codice.
Se hai selezionato la casella di controllo Statistiche selettore nelle impostazioni del pannello del rendimento prima di eseguire una traccia, il pannello inferiore della traccia avrà una scheda aggiuntiva con lo stesso nome.
Questo riquadro fornisce dati utili sul costo relativo di ogni selettore, consentendoti di identificare i selettori CSS costosi.
Per saperne di più, consulta la documentazione sulle statistiche dei selettori CSS.
Misurare il costo del ricalcolo dello stile per gli utenti reali
Se vuoi sapere quanto tempo impiega il ricalcolo dello stile per gli utenti reali del tuo sito web, l'API Long Animation Frames ti fornisce gli strumenti necessari per farlo. I dati di questa API sono stati aggiunti alla libreria JavaScript
web-vitals, incluso il tempo di ricalcolo dello stile.
Se sospetti che il ritardo di presentazione di un'interazione sia il principale fattore che contribuisce all'INP di una pagina, devi capire quanto tempo viene impiegato per ricalcolare gli stili della pagina. Per ulteriori informazioni, leggi come misurare il tempo di ricalcolo dello stile nel campo.