Analisi dei dati delle prestazioni di JavaScript nelle app di Windows Store

In questo argomento vengono illustrati i dati relativi alle prestazioni del codice JavaScript presentato nelle visualizzazioni dei rapporti dello strumento di profilatura di Microsoft Visual Studio Express 2012 per Windows 8. Per raccogliere dati sulle prestazioni di JavaScript, vedi uno degli argomenti seguenti:

• Come profilare codice JavaScript nelle app di Windows Store in un computer locale

• Come profilare codice JavaScript nelle app di Windows Store in un dispositivo remoto

In questo argomento

Questo argomento contiene le seguenti sezioni:

Viewing performance reports

Tipi di dati di profilatura

Tipi di visualizzazioni dei rapporti di profilatura

Visualizzazioni dei rapporti di profilatura

• Visualizzazione Riepilogo

• Visualizza Dettagli funzione

• Visualizzazione Albero delle chiamate

• Visualizzazione Chiamante/chiamato

• Visualizzazioni Moduli e Funzioni

Personalizzare le visualizzazioni griglia dei dati

Aprire il file di rapporto della profilatura

Quando interrompi l'esecuzione di una profilatura dall'IDE di Visual Studio, i dati delle prestazioni vengono visualizzati automaticamente in un documento.

Per aprire un file di rapporto della profilatura (con estensione vspx) generato dallo strumento da riga di comando VSPerf o salvato dopo l'esecuzione di una profilatura precedente, procedi come indicato di seguito:

1. Se necessario, apri Visual Studio.

2. Scegli Apri file dal menu File.

3. Nella finestra di dialogo Apri file passa alla cartella contenente il file di rapporto della profilatura, quindi scegli il file di rapporto.

Tipi di dati di profilatura

I dati di profilatura per una funzione includono il tempo totale, medio, minimo e massimo e le percentuali. I dati sono calcolati per due set di valori di intervallo:

• I valori di Inclusivo trascorso corrispondono alla quantità totale di tempo impiegato per l'esecuzione di una funzione.

• I valori in Esclusivo trascorso corrispondono alla quantità di tempo impiegato da una funzione per l'esecuzione solo del proprio codice. I valori non include il tempo impiegato nelle funzioni figlio.

Tipi di visualizzazioni dei rapporti di profilatura

Le visualizzazioni dei rapporti di profilatura presentano i dati in due modi:

• Visualizzazioni del grafico chiamate: mostra le informazioni sulle funzioni nel contesto dei percorsi di esecuzione. L'albero Percorso critico nella finestra di riepilogo mostra il percorso di esecuzione in cui l'app ha complessivamente impiegato più tempo durante l'esecuzione della profilatura. La visualizzazione Albero delle chiamate è un grafico delle chiamate per tutte le funzioni nell'esecuzione della profilatura. Le visualizzazioni Dettagli funzione e Chiamante/chiamato si concentrano su una funzione selezionata, presentando le funzioni che hanno chiamato la funzione selezionata e le funzioni chiamate dalla funzione. Le visualizzazioni del grafico chiamate consentono di individuare i problemi di prestazioni negli algoritmi.

• Visualizzazioni di elenchi di funzioni: presentano le funzioni ordinate ed elencate in base a una colonna di dati selezionata. L'elenco Funzioni con più lavoro individuale nella pagina di riepilogo mostra le funzioni che hanno impiegato la maggior parte del tempo per l'esecuzione del proprio codice, escluso il tempo che la funzione ha impiegato per chiamare le funzioni figlio. La visualizzazione Moduli raggruppa le funzioni in base al file di origine per il codice JavaScript e in base al modulo per altri linguaggi. La visualizzazione Funzioni è un unico elenco di funzioni.

Visualizzazioni dei rapporti di profilatura

Visualizzazione Riepilogo

La pagina Riepilogo fornisce due visualizzazioni dei dati di profilatura che spesso possono indicare i migliori candidati per l'ottimizzazione delle prestazioni.

• L'albero Percorso critico mostra lo stack di chiamate in cui l'app ha complessivamente impiegato più tempo durante l'esecuzione della profilatura. Comprendere il motivo per cui questo algoritmo richiede così tanto tempo può portare a un'ottimizzazione.

• L'elenco Funzioni con più lavoro individuale presenta le dieci funzioni che hanno utilizzato il maggior tempo esclusivo. Puoi ottenere miglioramenti delle prestazioni rapidi e significativi ottimizzando il codice della funzione o riducendo il numero di chiamate di queste funzioni.

Visualizza Dettagli funzione

Il grafico a barre Distribuzione costi rappresenta le relazioni tra una funzione selezionata e le funzioni chiamanti che hanno eseguito la funzione selezionata e tra la funzione selezionata e le funzioni che ha chiamato.

• Sulla barra Funzioni chiamanti sono visualizzate le funzioni che hanno chiamato la funzione selezionata. La dimensione di un blocco di funzioni chiamanti indica la percentuale di tempo di esecuzione totale della funzione selezionata causata dalla funzione chiamante.

• La barra Funzione selezionata indica la quantità relativa del tempo di esecuzione totale impiegato dalla funzione selezionata per l'esecuzione del proprio codice, il blocco Corpo funzione, e la quantità di tempo impiegata per l'esecuzione delle funzioni chiamate dalla funzione selezionata.

• Sulla barra Funzioni chiamate sono visualizzate le funzioni chiamate dalla funzione selezionata. La dimensione di un blocco di funzioni chiamate indica la percentuale di tempo di esecuzione totale della funzione chiamata impiegato nella funzione chiamata.

Visualizzazione Albero delle chiamate

Puoi usare la visualizzazione Albero delle chiamate per esplorare i percorsi di esecuzione della funzione utilizzati nella tua app. La radice dell'albero è il punto di ingresso nell'app. Per ogni nodo della funzione vengono elencate tutte le funzioni chiamate e i dati delle prestazioni delle relative chiamate di funzione. I valori delle funzioni nella visualizzazione Albero delle chiamate sono relativi alle istanze della funzione chiamate dalla funzione padre nell'albero delle chiamate. I valori percentuali sono il rapporto del periodo del valore delle istanze della funzione con il tempo di esecuzione totale della profilatura.

Per concentrarti su un nodo della visualizzazione Albero delle chiamate, seleziona il nodo, quindi scegli Imposta radice dal menu di scelta rapida. Quando imposti il nodo radice, elimini dalla visualizzazione tutte le altre voci ad eccezione del sottoalbero del nodo selezionato. Per reimpostare il nodo radice sul nodo originale, sceglie Reimposta radice dal menu di scelta rapida.

Colonne della visualizzazione Albero delle chiamate

Visualizzazione Chiamante/chiamato

La visualizzazione Chiamante/chiamato è una rappresentazione albero dei dati del grafico a barre Distribuzione costi dettagli funzione della visualizzazione Riepilogo che include tutti i dettagli dell'intervallo. Puoi usare la visualizzazione Chiamante/chiamato per esaminare la relazione tra una funzione selezionata e le funzioni che l'hanno la chiamata e la funzione che ha chiamato. La visualizzazione Chiamante/chiamato è costituita da tre griglie.

Nella griglia centrale, Funzione corrente mostra le informazioni di profilatura sulla funzione selezionata. Sono incluse tutte le chiamate alla funzione. I valori di Funzioni che hanno chiamato la funzione corrente sono visualizzati nella griglia superiore, mentre i valori di Funzioni che sono state chiamate dalla funzione corrente sono visualizzati nella griglia inferiore. I valori della funzione corrente sono i totali di tutte le chiamate alla funzione. I valori delle funzioni chiamanti e chiamate includono solo il tempo impiegato dalla funzione per chiamare o è essere chiamata dalla funzione selezionata.

Per esplorare l'albero delle chiamate di una funzione, fai doppio clic su una funzione chiamante o chiamata. La funzione su cui fai doppio clic diventa la nuova funzione selezionata. Le funzioni chiamanti e chiamate sono ora visibili.

Colonne della visualizzazione Chiamante/chiamato

Visualizzazioni Moduli e Funzioni

Le visualizzazioni Moduli e Funzioni presentano i dettagli dei dati di profilatura per le funzioni nel rapporto di profilatura. La visualizzazione Moduli organizza le funzioni JavaScript in base al file di origine JS che le contiene. Altre funzioni sono elencate in base al modulo, ad esempio una DLL. La visualizzazione Funzioni elenca tutte le funzioni senza utilizzare una gerarchia. Individuare il tuo codice personalizzato nella visualizzazione Moduli è spesso più facile rispetto alla visualizzazione Funzioni. Potrebbe tuttavia risultare più facile confrontare le funzioni nella visualizzazione Funzioni.

Colonne delle visualizzazioni Moduli e Funzioni

Personalizzare le visualizzazioni griglia dei dati

Puoi aggiungere o rimuovere colonne di dati e modificare l'ordine in cui sono visualizzate le colonne. Fai clic con il pulsante destro del mouse su una riga di dati e scegli Aggiungi/Rimuovi colonne.

Ulteriori colonne dei dati di profilatura