Il riquadro Prestazioni contrassegna ogni attività di lunga durata con un triangolo rosso nell'angolo in alto a destra e un avviso nella scheda Riepilogo, per indicare il lavoro nel thread principale la cui esecuzione richiede molto tempo e le prestazioni sono lente:
Nelle registrazioni delle esibizioni, alcune di queste attività di lunga durata potrebbero essere eventi Ricalcola stile. Un evento Ricalcola stile monitora il tempo necessario al browser per:
- Esegui l'iterazione tra gli 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 modificata, ad esempio quando:
- Gli elementi vengono aggiunti o rimossi dal DOM.
- Gli attributi di un elemento vengono modificati, ad esempio il valore di una classe o di un attributo ID.
- L'utente esegue un input, ad esempio lo spostamento del mouse o una modifica dell'elemento attivo di un elemento, che può influire sulle regole
:hover.
Se trovi eventi Ricalcola stile a lunga esecuzione, puoi utilizzare la scheda Statistiche selettore per capire quali selettori CSS impiegano più tempo e rallentano le prestazioni.
La scheda Statistiche selettore fornisce statistiche sui selettori delle regole CSS coinvolti in uno o più eventi Ricalcola stile in una registrazione del rendimento.
Registrare un'analisi del rendimento con le statistiche del selettore attivate
Per visualizzare le statistiche dei selettori delle regole CSS durante gli eventi Ricalcola stile a lunga esecuzione, 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 Prestazioni.
Nel riquadro Rendimento, fai clic sul pulsante Impostazioni Acquisisci impostazioni e seleziona check_box Attiva le statistiche del selettore CSS.
Fai clic su radio_button_checked Registra, esegui lo scenario che vuoi migliorare, quindi fai clic su radio_button_checked Interrompi.
Quindi, 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 delle regole CSS coinvolti in un singolo evento Ricalcola stile:
Registrare un'analisi del rendimento con le statistiche del selettore attivate.
Trova un evento Ricalcola stile nella registrazione della tua performance e fai clic su di esso.
Nella sezione inferiore del riquadro Rendimento, apri la scheda Statistiche selettore.
Tabella dei selettori CSS nella scheda Statistiche dei selettori
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 trascorsa dal browser per la corrispondenza con 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 abbinare a questo selettore CSS. |
| Numero di corrispondenze | Il numero di elementi che il motore del browser ha abbinato a questo selettore CSS. |
| % di non corrispondenze dei percorsi lenti | Il rapporto tra gli elementi che non corrispondevano 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 un 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 check_box Attiva le statistiche del selettore CSS.
Visualizzare le statistiche del selettore di regole CSS per più eventi
Per visualizzare le statistiche aggregate dei selettori delle regole CSS coinvolti in più eventi di Ricalcola stile, copia più tabelle Statistiche selettore in un foglio di lavoro, come indicato di seguito:
Registrare un'analisi 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 check_box Attiva le statistiche del selettore CSS.
Visualizza le statistiche aggregate del selettore delle regole CSS per la registrazione completa
Per visualizzare le statistiche aggregate dei selettori delle regole CSS coinvolti nell'intera registrazione del rendimento:
Registrare un'analisi del rendimento con le statistiche del selettore attivate.
Fai clic su un'area vuota del grafico a fiamme per deselezionare qualsiasi evento selezionato.
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. In alto, vedrai una nuova riga con i dati sui totali di tutti i selettori.
Al termine, nel riquadro Rendimento, apri le impostazioni Impostazioni di acquisizione e deseleziona check_box 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 utilizzano la maggiore quantità di tempo, fai clic sull'intestazione di colonna Entro (ms).
Per provare a migliorare le prestazioni della tua pagina web, concentrati sui selettori CSS che:
- Il calcolo ha richiesto molto tempo (valore Tempo trascorso (ms) elevato.
- Che il browser ha tentato di abbinare molte volte (valore Tentativi di corrispondenza elevato).
- Il browser non corrisponde effettivamente a molti elementi con un valore Match Count basso rispetto al valore Match Pending (Tentativi di corrispondenza).
- che hanno un'alta percentuale di non corrispondenze di percorsi lenti.
Ad esempio, nello screenshot precedente:
- Il primo selettore CSS (
html body .ps[tooltip...) ha richiesto più volte. - Il motore del browser ha tentato di trovare una corrispondenza con questo selettore CSS 1104 volte, ma non ha trovato corrispondenze per nessun elemento.
Di conseguenza, questo selettore CSS è il primo candidato a cercare di migliorare.
Prova a modificare i selettori CSS in modo che richiedano meno tempo per calcolare e corrispondano a meno elementi della pagina. Le modalità di miglioramento dei selettori CSS dipendono dal caso d'uso specifico.
Ripeti i passaggi di questo tutorial per confermare che le modifiche hanno contribuito a ridurre la durata dell'evento Ricalcola stile nella colonna Entro (ms).