Il riquadro Prestazioni contrassegna ogni attività a lunga esecuzione con un triangolo rosso nell'angolo in alto a destra e un avviso nella scheda Riepilogo, per indicare il lavoro sul thread principale che richiede molto tempo per l'esecuzione e le prestazioni sono lente:
Nelle registrazioni delle prestazioni, alcune di queste attività di lunga durata potrebbero essere eventi Ricalcola stile. Un evento Ricalcola stile tiene traccia del tempo necessario al browser per:
- Esegui l'iterazione degli elementi DOM di una pagina per trovare tutte le regole di stile CSS corrispondenti a un determinato elemento.
- Calcola lo stile effettivo di ogni elemento, in base alle regole di stile CSS corrispondenti.
Gli stili CSS devono essere ricalcolati ogni volta che l'applicabilità delle regole CSS può essere cambiata, ad esempio quando:
- Gli elementi vengono aggiunti o rimossi dal DOM.
- Vengono modificati gli attributi di un elemento, ad esempio il valore di un attributo class o ID.
- L'utente effettua l'input, ad esempio lo spostamento del mouse o la modifica dell'elemento attivo su un elemento, che possono influire sulle regole di
:hover.
Gli eventi di tipo Ricalcola stile di lunga durata possono rappresentare problemi di rendimento e possono causare lunghi ritardi nella presentazione, che influiscono sull'interazione con Next Paint (INP) del tuo sito web. Se trovi eventi Ricalcola stile a lungo termine, puoi utilizzare la scheda Statistiche selettore per capire quale dei tuoi selettori CSS impiega più tempo e rallenta le prestazioni.
La scheda Statistiche selettore fornisce le statistiche sui selettori di regole CSS coinvolti in uno o più eventi Ricalcola stile all'interno di una registrazione del rendimento.
Registrare un monitoraggio del rendimento con le Statistiche del selettore attivate
Per visualizzare le statistiche dei selettori di regole CSS durante gli eventi Ricalcola stile a lungo termine, registra un'analisi del rendimento con l'impostazione di acquisizione Statistiche selettore attivata.
Per registrare un'analisi del rendimento con le statistiche del selettore:
Apri una pagina web, ad esempio la pagina demo della Galleria fotografica.
Apri DevTools e vai al riquadro Rendimento.
Nel riquadro Rendimento, fai clic sul pulsante Impostazioni di acquisizione e seleziona check_box Attiva le statistiche del selettore CSS.
Fai clic su radio_button_checked Registra, esegui lo scenario che vuoi migliorare e fai clic su radio_button_checked Interrompi.
Successivamente, visualizza le statistiche del selettore CSS, come descritto nelle sezioni successive.
Visualizzare le statistiche del selettore di regole CSS per un singolo evento
Per visualizzare le statistiche dei selettori di regole CSS coinvolti in un singolo evento Ricalcola stile:
Registra un monitoraggio del rendimento con le Statistiche del selettore attivate.
Individua un evento Ricalcola stile nella registrazione dell'esibizione e fai clic su di esso.
Nella sezione inferiore del riquadro Rendimento, apri la scheda Statistiche selettore.
Tabella dei selettori CSS nella scheda Statistiche del selettore
La scheda Statistiche selettore contiene una tabella di selettori CSS. La tabella mostra le seguenti informazioni per ogni selettore CSS:
| Colonna | Descrizione |
|---|---|
| Tempo trascorso (ms) | La quantità di tempo che il browser ha trascorso corrispondente a questo selettore CSS. Questo tempo è espresso in millisecondi (ms), dove 1 ms è 1/1000 di secondo. |
| Tentativi di corrispondenza | Il numero di elementi che il motore del browser ha tentato di trovare con questo selettore CSS. |
| Numero di corrispondenze | Il numero di elementi che il motore del browser ha abbinato a questo selettore CSS. |
| % di non corrispondenze con percorsi lenti | Il rapporto tra gli elementi non corrispondenti a questo selettore CSS e gli elementi che il motore del browser ha tentato di trovare e che hanno richiesto al motore del browser di utilizzare codice meno ottimizzato per la corrispondenza. |
| Selettore | Il selettore CSS corrispondente. |
| Foglio di stile | Il foglio di stile CSS che contiene il selettore CSS. |
Al termine, nel riquadro Rendimento, apri le impostazioni Impostazioni di acquisizione e deseleziona la casella di controllo Attiva le statistiche del selettore CSS.
Visualizzare le statistiche del selettore di regole CSS per più eventi
Per visualizzare le statistiche aggregate dei selettori di regole CSS coinvolti in più eventi Ricalcola stile, copia più tabelle Statistiche selettore in un foglio di lavoro, come segue:
Registra un monitoraggio del rendimento con le Statistiche del selettore attivate.
Trova il primo evento Ricalcola stile che ti interessa e fai clic su di esso.
Nella sezione inferiore del riquadro Rendimento, apri la scheda Statistiche selettore.
Fai clic con il tasto destro del mouse sulla tabella delle statistiche del selettore e seleziona Copia tabella.
Incolla la tabella in un foglio di lavoro, ad esempio Fogli Google.
Ripeti i passaggi precedenti con gli altri eventi di Ricalcola stile che ti interessano.
Al termine, nel riquadro Rendimento, apri le impostazioni Impostazioni di acquisizione e deseleziona la casella di controllo Attiva le statistiche del selettore CSS.
Visualizzare le statistiche aggregate del selettore di regole CSS per la registrazione completa
Per visualizzare le statistiche aggregate dei selettori di regole CSS coinvolti nell'intera registrazione del rendimento:
Registra un monitoraggio del rendimento con le Statistiche del selettore attivate.
Fai clic su un'area vuota del grafico a fiamme per deselezionare gli eventi selezionati.
Seleziona l'intero intervallo di registrazione. Per farlo, fai doppio clic sul grafico della CPU nella parte superiore del riquadro Prestazioni.
Nella sezione inferiore del riquadro Rendimento, apri la scheda Statistiche selettore. Verrà visualizzata una nuova riga in alto con i dati sui totali per tutti i selettori.
Al termine, nel riquadro Rendimento, apri le impostazioni Impostazioni di acquisizione e deseleziona la casella di controllo Attiva le statistiche del selettore CSS.
Analizzare le statistiche del selettore CSS
Per ordinare i dati nella tabella Statistiche selettore in ordine crescente o decrescente, fai clic sull'intestazione di una colonna. Ad esempio, per vedere quali selettori CSS occupano più tempo, fai clic sull'intestazione di colonna Trascorsi (ms).
Per cercare di migliorare le prestazioni della tua pagina web, concentrati sui selettori CSS che:
- Il calcolo ha richiesto molto tempo (valore elevato Elapsed (ms)).
- Che il browser ha tentato di trovare più volte (valore elevato di Tentativi di corrispondenza).
- Il browser con cui il browser non corrispondeva in realtà a molti elementi (valore basso per Numero di corrispondenze rispetto al valore Tentativi di corrispondenza).
- Che hanno un'alta percentuale di non corrispondenze con percorsi lenti.
Ad esempio, nello screenshot precedente:
- Il primo selettore CSS (
html body .ps[tooltip...) ha richiesto più tempo. - Il motore del browser ha tentato di trovare una corrispondenza con questo selettore CSS 1104 volte, ma non ha trovato alcun elemento corrispondente.
Di conseguenza, questo selettore CSS è il primo candidato a provare a migliorare.
Prova a cambiare i selettori CSS in modo che richiedano meno tempo per il calcolo e abbinano meno elementi sulla pagina. Il modo in cui migliorare i selettori CSS dipende dal caso d'uso specifico.
Ripeti i passaggi di questo tutorial per confermare che le modifiche abbiano contribuito a ridurre la durata dell'evento Ricalcola stile nella colonna Tempo trascorso (ms).