Diagnosi dei problemi di memoria nelle pagine Web

Usa lo strumento Memoria per diagnosticare i problemi di memoria che possono influire su velocità e stabilità delle pagine Web.

Problemi correlati alla memoria

Se la pagina Web offre buone prestazioni al primo caricamento, ma rallenta progressivamente e a volte si blocca, il problema potrebbe essere correlato all'uso della memoria. Lo strumento Memoria è una novità degli strumenti di sviluppo F12 in Internet Explorer 11.

Per scoprire rapidamente la quantità di memoria usata dalla tua pagina Web, apri il nuovo Dashboard prestazioni dal menu Strumenti di IE11 oppure usa CTRL+MAIUSC+U. Fai clic sul numero relativo all'uso della memoria per visualizzarne un grafico dinamico. Per tornare al dashboard, fai clic sul grafico.

Se vuoi scoprire i motivi dei numeri visualizzati nel Dashboard prestazioni, devi usare lo strumento Memoria. Questo strumento analizza in dettaglio l'uso della memoria e il relativo aumento per la pagina Web, quindi identifica le potenziali soluzioni per il miglioramento.

Diagnostica di un problema di memoria

Dopo aver caricato la pagina Web nel browser, apri gli strumenti F12 e apri lo strumento Memoria (usa l'icona a forma di fotocamera o premi CTRL+7). Puoi avviare il profiling da questa schermata e creare snapshot dell'heap durante la sessione di profiling.

Se il problema è un utilizzo elevato della memoria sin dall'inizio, ma senza incrementi, acquisisci uno snapshot ed esaminalo per individuare le aree principali di uso della memoria. Se l'uso della memoria cresce nel tempo, puoi confrontare gli snapshot per individuare le aree in cui si verifica l'aumento dell'uso della memoria.

Visualizzazione Riepilogo

Dopo aver avviato il profiling e acquisito alcuni snapshot verrà visualizzato un riepilogo della sessione simile al seguente:

Visualizzazione Riepilogo dello strumento Memoria con due snapshot dell'heap

Quando avvii la registrazione di una sessione, la sequenza temporale Memoria totale mostra l'uso della memoria in base ai processi della scheda corrente del browser in forma di grafico nel tempo.

Puoi aggiungere indicatori utente personalizzati alla sequenza temporale tramite il metodo performance.mark() nel codice JavaScript, con un'etichetta per l'indicatore come argomento. Puoi aggiungere eventi specifici in questo modo. L'etichetta viene visualizzata come descrizione comando quando il puntatore del mouse viene posizionato sopra l'indicatore nella sequenza temporale.

Sotto la sequenza temporale verranno visualizzati dati di riepilogo degli snapshot dell'heap.

Informazioni offerte dai riepiloghi degli snapshot

Ogni snapshot mostra un'anteprima della pagina Web nelle condizioni esistenti al momento dell'acquisizione dello snapshot, oltre a dati specifici sull'uso della memoria da parte del codice. Dopo il primo snapshot, per gli snapshot successivi viene aggiunto un riepilogo delle variazioni a livello di uso della memoria e conteggio degli oggetti.

Nel secondo snapshot e in quelli successivi, il numero di nuovi oggetti creati e di vecchi oggetti rimossi è indicato sotto il numero degli oggetti. Se questi numeri sono elevati, potrebbe esistere un problema di prestazioni. Quando la quantità di memoria usata è accettabile, ma vengono creati e rimossi molti oggetti, si crea lavoro per il processo di Garbage Collection, che libera memoria. Le operazioni di Garbage Collection usano potenza di elaborazione, quindi è meglio trovare un modo per riutilizzare o riciclare questi oggetti e usare meno frequentemente il Garbage Collector.

Suggerimento  Per scoprire quanto sta lavorando il Garbage Collector, esegui il profiling della pagina Web con lo strumento Velocità di risposta interfaccia utente.

Se fai clic sui numeri relativi all'uso della memoria ottieni una visualizzazione dettagliata dello snapshot. Se fai clic sui numeri che indicano le variazioni nell'uso della memoria, viene attivata una visualizzazione di confronto in cui sono evidenziati gli oggetti aggiunti o modificati. Nell'immagine precedente Snapshot n. 2 include un'icona per accedere a ulteriori informazioni (un cerchietto con una "i" all'interno) e il numero 30 accanto. Questo numero rappresenta gli oggetti identificati dallo strumento Memoria come potenziali problemi di memoria.

Un fattore da considerare

Un altro importante fattore da tenere presente è la differenza tra il numero di oggetti aggiunti e quelli rimossi. Tale valore è visualizzato a partire dal secondo snapshot nella parte superiore destra, nel formato "+x/-y".

Nel set di snapshot precedenti, questo dato mostra che ogni volta che eseguiamo il processo che si sospetta avere problemi di memoria, abbiamo aumentato il numero di oggetti di 90 e ne abbiamo rimossi solo 9. Questo è un forte indizio di perdita di memoria nel processo. Le perdite di memoria continueranno a espandere l'uso della memoria da parte della pagina Web durante le sessioni degli utenti, causando lentezza o instabilità nel caso l'uso della memoria aumenti troppo.

Visualizzazione dei dettagli dello snapshot

Fai clic su una delle misurazioni di uno snapshot per visualizzarne i dettagli. L'immagine che segue mostra la visualizzazione attivata quando fai clic sul numero di problemi di memoria in uno snapshot.

Visualizzazione dei dettagli dello snapshot dello strumento Memoria con elencati i potenziali problemi di memoria

Nella visualizzazione sopra illustrata puoi vedere la visualizzazione Dominanti dei dettagli dello snapshot, ordinata in modo che i problemi vengano visualizzati per primi.

Se passi il mouse sull'icona per visualizzare altre informazioni, vedrai una descrizione comandi che indica il motivo per cui l'elemento è considerato un problema potenziale. Nell'esempio precedente, il nodo DOM non è collegato al DOM. Questa situazione può verificarsi quando il nodo viene rimosso dal DOM, ma esistono ancora riferimenti al nodo altrove.

Se fai clic sull'oggetto, vedrai l'elenco degli oggetti che vi fanno riferimento nella parte inferiore dello schermo. In questo caso, una matrice denominata nodeholder contiene un riferimento che mantiene il nodo in memoria. Se ciò non è previsto, puoi indagare ulteriormente.

Tre tipi di visualizzazione

  • La visualizzazione Dominanti mostra tutti i singoli elementi HTML, i nodi DOM e gli oggetti JavaScript creati dal codice. Questa è la visualizzazione più dettagliata.
  • La visualizzazione Tipi raggruppa gli oggetti in base alla rispettiva funzione costruttore e indica un conteggio di ogni tipo. In questo modo è più facile sapere quante matrici ci sono, quante stringhe e così via. I gruppi possono essere espansi per visualizzare i singoli oggetti.
  • La visualizzazione Radici mostra i principali oggetti radice che puoi espandere per visualizzare gli oggetti figlio associati.

In tutte e tre le visualizzazioni sono disponibili due colonne per le dimensioni e le dimensioni mantenute di un oggetto. La colonna Dimensioni indica la quantità di memoria usata dall'oggetto. La colonna Dimensioni mantenute indica la quantità di memoria usata dall'oggetto e dai relativi nodi figlio. Un oggetto HTMLDivElement, ad esempio, potrebbe usare solo poche decine di byte, ma potrebbe avere dimensioni mantenute nell'ordine dei megabyte se uno dei suoi elementi figlio è un'immagine grande o un video.

Nelle pagine grandi e complesse vengono caricati solo i primi duemila oggetti, ordinati in base alle dimensioni mantenute. In questo caso è disponibile un'opzione di filtro per limitare il set di oggetti.

Altre opzioni

Puoi modificare le impostazioni della visualizzazione dettagliata tramite un menu a discesa disponibile in alto a destra nella finestra dei dettagli dello snapshot.

  • Il comando Mostra predefiniti mostra gli oggetti interni creati per una pagina Web dal browser, che non sono stati creati dalla pagina stessa. Questi oggetti non vengono visualizzati per impostazione predefinita, per evitare distrazioni dal codice. In alcuni casi, tuttavia, può essere utile esaminarli.
  • Visualizza ID oggetti consente di identificare gli oggetti con più di un riferimento. L'oggetto jQuery, ad esempio, usa spesso sia jQuery che $ come riferimenti. Entrambi i riferimenti sono indicati con la stessa quantità di uso della memoria, ma usano la stessa memoria e lo stesso ID di oggetto. L'uso degli ID di oggetto può essere utile per separare oggetti univoci dagli oggetti con più riferimenti.
  • Visualizza riferimenti circolari: nella sua forma più semplice, un riferimento circolare esiste quando un oggetto fa riferimento a un altro oggetto che fa riferimento al primo creando un ciclo. Nelle forme più complesse, il percorso del riferimento circolare può attraversare molti oggetti. Per facilitare la ricerca della radice di un oggetto, i riferimenti circolari non sono visualizzati. Se hai bisogno di tracciare i percorsi di riferimenti circolari, usa questa opzione per visualizzarli:
    • Nella visualizzazione dei riferimenti circolari puoi ritrovarti a esaminare lo stesso oggetto più e più volte se non presti attenzione. L'attivazione di Visualizza ID oggetti permette di evitare questa confusione.

Una novità di Windows 8.1 Update è rappresentata dal fatto che quando l'oggetto che rappresenta una funzione viene visualizzato nello strumento Memoria, viene collegato alla sua posizione nel codice sorgente e il suo colore viene cambiato in blu. Se fai clic sul nome della funzione o sulla relativa riga e premi INVIO, passerai al Debugger, aperto nella posizione specifica della funzione nel corrispondente script.

Nota   Lo strumento Memoria visualizza i nomi delle funzioni così come sono nella memoria. Se usi codice JavaScript compresso o compilato da un altro linguaggio e hai un mapping di origine, può succedere che tu faccia clic su una funzione denominata t nello strumento Memoria, ma trovi lo strumento Debugger aperto su una funzione denominata setOrigination. Se ciò si verifica e non è quello che vuoi, prova a disattivare il supporto del mapping di origine per tale file nel Debugger.

Visualizzazione di confronto

Negli snapshot in cui è indicata una variazione nell'uso della memoria o nel conteggio degli oggetti, fai clic sul valore della variazione per visualizzare un confronto tra lo snapshot corrente e quello precedente.

Confronto di due snapshot dell'heap nello strumento F12 Memoria

La visualizzazione di confronto funziona come quella dei dettagli dello snapshot, con tre differenze:

  • Puoi ordinare la colonna Operazione in base agli elementi modificati e al modo in cui sono cambiati.
  • Le righe sono codificate con colori diversi per rappresentare le modifiche:
    • Blu: oggetti esistenti in entrambi gli snapshot, ma cambiati.
    • Verde: oggetti aggiunti rispetto allo snapshot precedente.
    • Nero: nessuna variazione.
  • Sono stati aggiunte colonne che mostrano la differenza di Dimensioni e Dimensioni mantenute.

In Windows 8.1 Update sono state rimosse la colonna Operazione e la codifica a colori, mentre è stato aggiunto il menu Ambito. Il menu Ambito mostra le varie visualizzazioni del confronto ed è particolarmente utile se combinato con un metodo a tre snapshot per l'analisi della memoria.

Il metodo a tre snapshot funziona come segue:

  • Carica la pagina e la usa normalmente per alcuni minuti.
  • Inizia a registrare la sessione e crea il primo snapshot di base.
  • Completa lo scenario che credi stia causando problemi di memoria. Crea il secondo snapshot.
  • Completa nuovamente lo scenario. Crea il terzo snapshot, quindi interrompe la registrazione.

Fai clic sui numeri che rappresentano l'aumento dell'uso di memoria o l'aumento/rimozione di oggetti in Snapshot n. 3 per visualizzare il confronto con Snapshot n. 2. In tale visualizzazione di confronto, nel menu Ambito sono disponibili tre scelte:

  • Oggetti rimasti dallo snapshot #2.
  • Oggetti aggiunti tra lo snapshot #2 e #3.
  • Tutti gli oggetti nello snapshot #3.

Quando confronti Snapshot n. 1 e Snapshot n. 2, l'opzione Oggetti rimasti dallo snapshot #1 includerà tutti gli oggetti della pagina che erano presenti nella base. La maggior parte di questi elementi usati per creare la pagina occupano solamente spazio. Fanno sempre parte dell'uso della memoria per la pagina Web ma non determinano aumento dell'uso di memoria.

Quando confronti Snapshot n. 2 e Snapshot n. 3, l'opzione Oggetti rimasti dallo snapshot #2 identifica solo gli oggetti aggiunti in Snapshot n. 2 che sono ancora presenti in Snapshot n. 3. Ora vedrai gli oggetti che sono stati aggiunti dopo la base e che rimangono dopo l'esecuzione dello scenario una seconda volta. Tali oggetti meritano un'analisi accurata quando si cerca l'origine del problema relativo all'uso della memoria per la pagina Web.

Contenitori ECMAScript 6

Windows 8.1 Update introduce il supporto per gli oggetti contenitore Set, Mape WeakMapnello strumento Memoria. Ciò semplifica l'analisi dei dettagli dell'uso della memoria. Questo supporto è disponibile solo se Internet Explorer 11 non è stato impostato su una modalità browser inferiore.

Argomenti correlati

Informazioni sui modelli di perdite di memoria di Internet Explorer e relativa soluzione
Uso degli strumenti di sviluppo F12

 

 

Mostra:
© 2014 Microsoft