Scopri come utilizzare Chrome e DevTools per trovare problemi di memoria che influiscono sulle prestazioni della pagina, tra cui perdite di memoria, aumento inutilmente elevato della memoria e raccolte dei rifiuti frequenti.
Riepilogo
- Scopri quanta memoria utilizza la tua pagina con il Task Manager di Chrome.
- Visualizza l'utilizzo della memoria nel tempo con le registrazioni di Spostamenti.
- Identifica gli alberi DOM scollegati (una causa comune di perdite di memoria) con gli istantanei dell'heap.
- Scopri quando viene allocata nuova memoria nell'heap JS con le registrazioni della sequenza temporale di allocazione.
- Identifica gli elementi scollegati conservati dal riferimento JavaScript.
Panoramica
In linea con lo spirito del modello di prestazioni RAIL, l'obiettivo dei tuoi sforzi per migliorare il rendimento dovrebbe essere rivolto ai tuoi utenti.
I problemi di memoria sono importanti perché sono spesso percepibili dagli utenti. Gli utenti possono percepire i problemi di memoria nei seguenti modi:
- Il rendimento di una pagina peggiora progressivamente nel tempo. Potrebbe trattarsi di un sintomo di una perdita di memoria. Una perdita di memoria si verifica quando un bug nella pagina fa sì che la pagina utilizzi progressivamente sempre più memoria nel tempo.
- Il rendimento di una pagina è costantemente scadente. Potrebbe trattarsi di un sintomo di un aumento eccessivo della memoria. Il ballooning della memoria si verifica quando una pagina utilizza più memoria del necessario per una velocità ottimale.
- Il rendimento di una pagina è in ritardo o sembra essere in pausa di frequente. Potrebbe trattarsi di un sintomo di raccolte di rifiuti frequenti. La raccolta dei rifiuti avviene quando il browser recupera la memoria. È il browser a decidere quando ciò accade. Durante le raccolte, l'esecuzione di tutti gli script viene messa in pausa. Pertanto, se il browser svolge spesso la raccolta dei rifiuti, l'esecuzione dello script verrà messa in pausa molto spesso.
Aumento inutilmente elevato della memoria: quanto è "troppo"?
Una perdita di memoria è facile da definire. Se un sito utilizza progressivamente sempre più memoria, significa che hai una perdita. Tuttavia, l'aumento inutilmente elevato della memoria è un po' più difficile da individuare. Cosa si intende per "utilizzo di troppa memoria"?
Non ci sono numeri precisi, perché dispositivi e browser diversi hanno funzionalità diverse. La stessa pagina che funziona senza problemi su uno smartphone di fascia alta potrebbe bloccarsi su uno smartphone di fascia bassa.
L'importante è utilizzare il modello RAIL e concentrarti sugli utenti. Scopri quali dispositivi sono apprezzati dai tuoi utenti, quindi testa la tua pagina su questi dispositivi. Se l'esperienza è costantemente negativa, la pagina potrebbe superare le capacità di memoria di questi dispositivi.
Monitorare l'utilizzo della memoria in tempo reale con il Task Manager di Chrome
Utilizza Task Manager di Chrome come punto di partenza per la ricerca del problema di memoria. Task Manager è un monitor in tempo reale che ti dice quanta memoria sta utilizzando una pagina.
Premi Maiusc+Esc o vai al menu principale di Chrome e seleziona Altri strumenti > Task Manager per aprire il Task Manager.