React Academy · Lezione

Uso della scheda Profiler

Registrare i render, leggere i flame graph e individuare i componenti lenti.

Uso della scheda Profiler è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione utilizzerà il Profiler di React DevTools per registrare i rendering, leggere i flame graph e individuare i componenti che causano colli di bottiglia nelle prestazioni.

Apertura del Profiler

Faccia clic sulla scheda **Profiler** in React DevTools, accanto a Components. Vedrà un pulsante Record (cerchio) e un pulsante Reload and Profile. Il profiler funziona solo in modalità di sviluppo.

Registrazione di una sessione

Faccia clic su **Record** (il cerchio), interagisca con l'app (ad esempio facendo clic su un pulsante o digitando in un campo di input), quindi faccia clic su **Stop** (il quadrato). DevTools acquisisce ogni rendering eseguito durante la sessione.

Lettura del flame graph

Il flame graph mostra una barra per ogni componente e per ogni commit. Larghezza = tempo impiegato per il rendering. Stack più alti = alberi di componenti più profondi. Passi il mouse su una barra per visualizzare il nome del componente e la durata esatta del rendering.

Cronologia dei commit

Nella parte superiore del Profiler vedrà una riga di piccole barre, una per ogni commit di React. Le barre più alte rappresentano commit più lenti. Faccia clic su una barra per passare al flame graph di quel commit.

Perché è stato eseguito il rendering di un componente?

Selezioni un componente nel flame graph e osservi la sezione **Perché è stato eseguito questo rendering?**. Indica se il componente ha eseguito il rendering perché sono cambiate le props, è cambiato lo stato o un componente genitore ha eseguito nuovamente il rendering.

Barre grigie e colorate

Le barre grigie indicano che il componente non ha eseguito il rendering in questo commit (React ha riutilizzato l'output precedente). Le barre colorate indicano che il componente ha eseguito nuovamente il rendering: i colori più scuri indicano tempi di rendering più lunghi.

La vista del grafico Ranked

Passi da Flame Graph al grafico **Ranked** (tramite il selettore in alto). Questo elenca tutti i componenti sottoposti a rendering, ordinati in base al tempo di rendering, così può individuare immediatamente il componente più lento.

Registrazione e ricaricamento

Faccia clic su **Reload and Profile** invece di Record per acquisire il caricamento della pagina, inclusi i rendering iniziali. Questo aiuta a individuare i componenti lenti al primo montaggio.

Abilitare il profiling in produzione

Le build di produzione disabilitano il Profiler per impostazione predefinita. Per eseguire il profiling della produzione, crei la build usando `react-dom/profiling` come alias e `scheduler/tracing-profiling`. La maggior parte dei team esegue prima il profiling in sviluppo.

Verifica rapida

Nel flame graph del Profiler di React DevTools, che cosa rappresenta la larghezza di una barra?

Riepilogo

Ora sa registrare una sessione del profiler, leggere i flame graph e i grafici Ranked, controllare perché un componente ha eseguito nuovamente il rendering e usare la sequenza temporale dei commit per spostarsi tra i rendering.

Prossimo argomento

Prossima lezione: **Debug degli errori comuni di React** — diagnosticherà gli avvisi relativi alle key mancanti, i problemi causati da uno stato undefined e le discrepanze di hydration usando DevTools e la console del browser.

Domande Frequenti

La lezione «Uso della scheda Profiler» è gratuita?

Sì — il testo completo di «Uso della scheda Profiler» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Uso della scheda Profiler»?

Registrare i render, leggere i flame graph e individuare i componenti lenti. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Uso della scheda Profiler»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Installazione e apertura di React DevTools
Ispezione degli alberi dei componenti e delle props
Uso della scheda Profiler
Debug degli errori comuni di React

← Torna a React Academy