Analisi dei dati di utilizzo della memoria (JavaScript)

In questo argomento viene descritto JavaScript Memory Analyzer. Questo strumento è disponibile per le app di Windows Store compilate utilizzando JavaScript in Visual Studio 2012 Update 1. Per un'esercitazione che illustra come usare lo strumento, vedi Esercitazione: Ricerca di una perdita di memoria (JavaScript).

Visualizzazione dei dati sull'utilizzo della memoria

Puoi usare JavaScript Memory Analyzer quando un'app di Windows Store funzionante è aperta in Visual Studio.

Per eseguire JavaScript Memory Analyzer

1. Se esegui l'app da Visual Studio, fai clic su Computer locale, Simulatore o su Computer remoto nell'elenco a discesa Avvia debug sulla barra degli strumenti Debug.

   Per ulteriori informazioni su queste opzioni, vedi Esecuzione di app di Windows Store da Visual Studio.

2. Scegli Analisi memoria JavaScript dal menu Debug, quindi fai clic su una delle seguenti opzioni:

   • Avvia progetto di avvio. Fai clic su questa opzione per avviare il progetto di avvio corrente. Se esegui l'app in un computer remoto, devi fare clic su questa opzione.

   • Avvia pacchetto applicazione installato. Fai clic su questa opzione per selezionare un'app installata che desideri analizzare. Questa opzione non è supportata quando si esegue l'app in un computer remoto.

     Puoi usare questa opzione per analizzare l'utilizzo della memoria da parte delle app installate nel tuo computer quando non disponi dell'accesso al codice sorgente. Questa opzione può essere utile anche quando vuoi semplicemente analizzare l'utilizzo della memoria di qualsiasi app, al di là dello sviluppo delle tue app.

   • Connetti ad applicazione in esecuzione. Fai clic su questa opzione per selezionare l'app da un elenco di app in esecuzione. Questa opzione non è supportata quando si esegue l'app in un computer remoto.

     Puoi usare questa opzione per analizzare l'utilizzo della memoria da parte delle app in esecuzione nel tuo computer quando non disponi dell'accesso al codice sorgente.

   Quando avvii l'analizzatore di memoria, potresti vedere un messaggio di Controllo dell'account utente che richiede l'autorizzazione a eseguire VsEtwCollector.exe. Fai clic su Sì.

3. Passa a Visual Studio premendo ALT+TAB.

   La Visualizzazione Riepilogo per JavaScript Memory Analyzer compare nella scheda Hub diagnostica.

Visualizzazioni dell'utilizzo della memoria

Quando esegui JavaScript Memory Analyzer, sono disponibili queste visualizzazioni dei dati sull'utilizzo della memoria:

• Visualizzazione Riepilogo. Fornisce un grafico dell'utilizzo della memoria per l'app in esecuzione e una raccolta di tutte le sezioni di riepilogo dello snapshot. Questa visualizzazione compare nella scheda Hub diagnostica.

• Visualizzazione di dettagli dello snapshot. Mostra in dettaglio i dati sull'utilizzo della memoria per un singolo snapshot.

• Visualizzazione delle differenze di uno snapshot. Mostra in dettaglio i dati sull'utilizzo della memoria come valori differenziali tra due snapshot selezionati.

Visualizzazione Riepilogo

Fornisce un grafico dell'utilizzo della memoria per l'app in esecuzione e una raccolta di tutte le sezioni di riepilogo dello snapshot. In questa visualizzazione puoi eseguire attività di base, ad esempio acquisire snapshot, analizzare le informazioni di riepilogo e passare ad altre visualizzazioni.

Il grafico relativo alla memoria mostra una visualizzazione in tempo reale della memoria di processo dell'app, inclusi i byte privati, la memoria nativa e l'heap JavaScript. Ecco come appare il grafico:

Il grafico relativo alla memoria è una visualizzazione scorrevole della memoria di processo.

Se al codice dell'app sono stati aggiunti contrassegni del profilo, nel grafico relativo all'utilizzo della memoria compare un triangolo con l'etichetta Contrassegno utente per indicare quando si raggiunge quella sezione di codice. Per ulteriori informazioni, vedi Comandi della console JavaScript.

La memoria indicata nel grafico viene allocata dal runtime JavaScript. Non puoi controllare questo utilizzo della memoria nella tua app. L'utilizzo della memoria mostrato nel grafico aumenta quando acquisisci il primo snapshot, quindi aumenta in misura minima per ogni snapshot aggiuntivo.

Visualizzazione del riepilogo di uno snapshot

Puoi acquisire uno snapshot dello stato corrente dell'utilizzo della memoria dell'app facendo clic su Crea snapshot heap nella visualizzazione di riepilogo. Una sezione di riepilogo dello snapshot, che appare anche nella visualizzazione di riepilogo, fornisce informazioni sull'heap JavaScript e collegamenti a informazioni più dettagliate. Se hai acquisito due o più snapshot, uno di essi fornisce informazioni aggiuntive mediante il confronto dei relativi dati con quelli dello snapshot precedente.

Questa illustrazione mostra un esempio di snapshot quando ne è stato acquisito uno precedente.

Queste sono le informazioni che compaiono nel riepilogo dello snapshot:

• Titolo dello snapshot e timestamp.

• Dimensioni heap (testo blu, lato sinistro). Questo numero include oggetti ed elementi DOM che il motore di runtime JavaScript aggiunge all'heap JavaScript. Le dimensioni heap corrispondono a un collegamento alla visualizzazione Dominatori dello snapshot.

• Dimensioni heap differenziali (testo rosso o verde, lato sinistro). Questo valore mostra la differenza tra le dimensioni heap dello snapshot corrente e quelle dello snapshot precedente. Il valore è visualizzato in rosso in presenza dei un aumento della memoria. In caso contrario, è visualizzato in verde. Se le dimensioni heap sono le stesse, il valore è Nessuna diff. Per il primo snapshot il valore è semplicemente Linea di base (testo grigio). Questo valore corrisponde a un collegamento alla visualizzazione Dominatori di differenze dello snapshot.

• Conteggio oggetti (testo blu, lato destro). Questo conteggio mostra solo gli oggetti creati nella tua app e filtra gli oggetti incorporati creati dal runtime JavaScript. Il conteggio di oggetti è un collegamento alla visualizzazione Tipi dei dettagli dello snapshot.

• Conteggio oggetti differenziale (testo rosso o verde, lato destro). Questo valore mostra la differenza tra il conteggio di oggetti dello snapshot corrente e quello dello snapshot precedente. Il valore è visualizzato in rosso in presenza di un aumento nel conteggio di oggetti. In caso contrario, è visualizzato in verde. Se il conteggio di oggetti è lo stesso, il valore è Nessuna diff. Per il primo snapshot il valore è semplicemente Linea di base (testo grigio). Questo valore corrisponde a un collegamento alla visualizzazione Tipi di differenze dello snapshot.

• Schermata creata al momento dell'acquisizione dello snapshot.

Visualizzazione di dettagli dello snapshot

Nella visualizzazione relativa ai dettagli dello snapshot puoi vedere informazioni dettagliate sull'utilizzo della memoria per ogni snapshot.

Dalla visualizzazione di riepilogo puoi vedere i dettagli dello snapshot facendo clic su un collegamento nel riepilogo di uno snapshot. Ad esempio, il collegamento delle dimensioni heap nel riepilogo di uno snapshot apre i dettagli dello snapshot nella visualizzazione Dominatori, aperta per impostazione predefinita.

Questa illustrazione mostra la visualizzazione Tipi nel dettaglio di uno snapshot.

Nella visualizzazione relativa ai dettagli dello snapshot sono disponibili queste visualizzazioni aggiuntive dei dati sull'utilizzo della memoria:

• Dominatori. Mostra un elenco di tutti gli oggetti presenti nell'heap, ordinati in base alle dimensioni conservate.

• Tipi. Mostra il conteggio delle istanze e le dimensioni totali degli oggetti, raggruppati per tipo di oggetto. Per impostazione predefinita, sono ordinati in base al conteggio delle istanze.

• Radici. Mostra un albero di oggetti, dagli oggetti radice fino ai riferimenti figlio. Per impostazione predefinita, i nodi figlio sono ordinati in base alla colonna delle dimensioni conservate, con le dimensioni di grandezza massima nella parte superiore.

• DOM. Mostra gli oggetti corrispondenti a elementi di markup (DOM) e le relative dimensioni conservate. Per impostazione predefinita, sono ordinati in base alle dimensioni conservate.

• WinRT. Mostra gli oggetti Windows gestiti e non gestiti a cui fa riferimento la tua app JavaScript. Per impostazione predefinita, sono ordinati in base alle dimensioni conservate.

La maggior parte delle visualizzazioni, ad esempio Dominatori, mostra tipi di valori simili. Questo valori includono:

• Identificatore/i. Nome che identifica meglio l'oggetto. Ad esempio, per gli elementi HTML è indicato il valore dell'attributo ID, se utilizzato.

• Tipo. Nome di tipo dell'oggetto.

• Dimensioni. Dimensioni dell'oggetto, escluse quelle di qualsiasi oggetto a cui si fa riferimento.

• Dimensioni conservate. Somma delle dimensioni dell'oggetto più quelle di tutti gli oggetti figlio che non hanno altri oggetti padre. Ai fini pratici, questa somma è la quantità di memoria conservata dall'oggetto, quindi eliminando l'oggetto si recupera la quantità di memoria specificata.

• Conteggio. Numero di istanze dell'oggetto. Questo valore compare solo nella visualizzazione Tipi.

Visualizzazione delle differenze di uno snapshot

In JavaScript Memory Analyzer puoi confrontare uno snapshot con uno precedente in una visualizzazione delle differenze di uno snapshot.

Nella visualizzazione di riepilogo puoi vedere i dettagli differenziali dello snapshot facendo clic su un altro snapshot nell'elenco a discesa, presente nell'angolo superiore destro di una sezione di riepilogo dello snapshot.

Le differenze dello snapshot consentono di vedere informazioni differenziali su dominatori, tipi, radici, oggetti DOM e oggetti Windows Runtime.

Le differenze dello snapshot mostrano tutti gli oggetti aggiunti all'heap tra i due snapshot. Nella visualizzazione Radici differenziale, e nel Grafico di riferimento, il colore del testo grigio chiaro indica che l'oggetto stesso era presente nello snapshot precedente, ma un elemento figlio non lo era.

Questa illustrazione mostra le differenze dello snapshot nella visualizzazione Dominatori.

Le visualizzazioni che mostrano differenze dello snapshot, come la visualizzazione Dominatori, sono uguali alla visualizzazione Visualizzazione di dettagli dello snapshot. Queste visualizzazioni mostrano gli stessi tipi di valore delle visualizzazioni di dettagli dello snapshot, con questi valori aggiuntivi:

• Diff. dimensioni. Differenza tra le dimensioni dell'oggetto nello snapshot corrente e quelle dello snapshot di confronto (lo snapshot precedente), escluse le dimensioni di qualsiasi oggetto a cui si fa riferimento.

• Diff. dimensioni conservate. Differenza tra le dimensioni conservate dell'oggetto nello snapshot corrente e quelle conservate dello snapshot di confronto (lo snapshot precedente). Le dimensioni conservate includono le dimensioni dell'oggetto più quelle di tutti gli oggetti figlio che non hanno altri oggetti padre. Ai fini pratici, le dimensioni conservate corrispondono alla quantità di memoria conservata dall'oggetto, quindi eliminando l'oggetto si recupera la quantità di memoria specificata.

• Diff. conteggio. Differenza tra il numero di istanze dell'oggetto nello snapshot corrente e quello delle istanze nello snapshot di confronto. Questo valore compare solo nella visualizzazione Tipi.

Mostra in visualizzazione radice

Nelle visualizzazioni Dominatori, Tipi, DOM e WinRT puoi vedere la relazione di un oggetto specifico con l'oggetto Global. Tramite questa funzionalità puoi trovare facilmente un oggetto noto nella visualizzazione Radici senza cercare in tutto l'albero di oggetti Global.

Per usare questa funzionalità, fai clic con il pulsante destro del mouse su un identificatore nella visualizzazione Dominatori, Tipi, DOM o WinRT e scegli Mostra in visualizzazione radice.

Filtro dei dati

Nelle visualizzazioni Dominatori, Tipi, DOM e WinRT puoi filtrare i dati mediante la ricerca di identificatori specifici. Per cercare un identificatore, digita semplicemente il valore nella casella di testo Filtro identificatore. Quando inizi a digitare i caratteri, gli identificatori che non contengono i caratteri digitati vengono esclusi dal filtro.

Ogni visualizzazione include un filtro specifico, pertanto le informazioni filtrate non sono riportate nelle altre visualizzazioni.

Visualizzazione di riferimenti

I riquadri inferiori delle visualizzazioni Dominatori, Tipi, DOM e WinRT contengono un Grafico di riferimento che puoi usare per vedere i riferimenti condivisi. Se selezioni un oggetto nel riquadro superiore, il Grafico di riferimento mostra un elenco di riferimenti che puntano all'oggetto selezionato.

Per una guida generale all'identificazione di oggetti equivalenti, nel riquadro superiore puoi fare clic su Visualizza ID oggetto nell'elenco a discesa delle impostazioni, presente nell'angolo superiore destro del riquadro. Quando fai clic su questa opzione, gli ID oggetto compaiono accanto agli oggetti nell'elenco Identificatore/i. Gli oggetti con lo stesso ID sono riferimenti condivisi.

Visualizzazione di valori incorporati

Nelle visualizzazioni Dominatori, Tipi, DOM e WinRT puoi vedere gli oggetti incorporati. Per impostazione predefinita, queste visualizzazioni mostrano solo gli oggetti creati nella tua app. Ciò consente di filtrare le informazioni non necessarie e di isolare i problemi correlati all'app. Talvolta può comunque essere utile vedere tutti gli oggetti generati per l'app dal runtime JavaScript. Questi oggetti sono visibili tramite JavaScript Memory Analyzer.

Per visualizzare gli oggetti, fai clic su Mostra predefiniti nell'elenco a discesa delle impostazioni, presente nell'angolo superiore destro del riquadro.

File delle sessioni di diagnostica

I riepiloghi di snapshot diagnostici, con le relative visualizzazioni di dettagli associate, vengono salvati come file con estensione diagsession. Esplora soluzioni visualizza le sessioni di diagnostica precedenti nella cartella Sessioni di diagnostica. In Esplora soluzioni puoi aprire sessioni precedenti oppure rimuovere o rinominare file.

Comandi della console JavaScript

JavaScript Memory Analyzer supporta i seguenti due Comandi della console JavaScript che puoi usare nel codice per isolare la sezione in cui si verifica un problema di memoria. Questi comandi generano un'eccezione se li aggiungi all'app e la esegui in un contesto diverso dall'analizzatore di memoria. Puoi comunque verificare se i comandi sono presenti prima di usarli. I comandi non saranno presenti nella fase iniziale di avvio della sessione.

• console.takeHeapSnapshot accetta uno snapshot dell'heap che compare in JavaScript Memory Analyzer.

• console.profileMark imposta un contrassegno del profilo (il triangolo Contrassegno utente) che compare nella sequenza temporale del grafico relativo alla memoria nella visualizzazione di riepilogo. Questo comando accetta un argomento stringa che rappresenta una descrizione dell'evento e compare come descrizione comando nel grafico relativo alla memoria. La descrizione non deve superare 100 caratteri.

L'esempio di codice seguente mostra come chiamare takeHeapSnapshot in modo sicuro.

    if (console && console.takeHeapSnapshot) { console.takeHeapSnapshot(); }

L'esempio di codice seguente mostra come chiamare profileMark in modo sicuro.

    if (console && console.profileMark) { console.profileMark("Initialized"); }

Suggerimenti per l'identificazione dei problemi di memoria

Questi suggerimenti possono risultare utili per diagnosticare i problemi di utilizzo della memoria:

• Usa la visualizzazione Dominatori relativa alle differenze di uno snapshot per tentare di identificare rapidamente i principali problemi di memoria.

• Usa Mostra in visualizzazione radice per identificare la posizione in cui si fa riferimento a un oggetto nella gerarchia di memoria globale.

• Quando la causa di un problema di memoria è difficile da identificare, puoi usare le diverse visualizzazioni, ad esempio Dominatori e Tipi, per trovare gli elementi comuni, come oggetti e tipi correlati.

• Considera se può essere utile modificare temporaneamente il codice per isolare i problemi. Potresti, ad esempio:

  • Usare i Comandi della console JavaScript, console.takeSnapshot e console.profileMark, per l'analizzatore di memoria.

    Questi comandi consentono di isolare i problemi che non puoi isolare manualmente facendo clic su Crea snapshot heap.

  • Creare un oggetto test facilmente individuabile nelle visualizzazioni di JavaScript Memory Analyzer, ad esempio la visualizzazione Dominatori. Ad esempio, puoi collegare un oggetto di grandi dimensioni a un altro oggetto per vedere se un oggetto o un elemento specifico è stato sottoposto a Garbage Collection.

• Cerca gli oggetti mantenuti inavvertitamente in memoria dopo che si è verificato il passaggio a una nuova pagina. Questa è una causa comune dei problemi di memoria. Ad esempio, l'uso non corretto della funzione URL.CreateObjectUrl può provocare questo problema.

Vedere anche

Attività

Esercitazione: Ricerca di una perdita di memoria (JavaScript)