Nella prima parte di questo articolo abbiamo capito che  Google Chrome Dev Tools è utile per misurare le performance del codice presente sul browser e non nel back-end dell’applicazione.

Gli strumenti di Google Chome Dev Tools che ci danno la possibilità di individuare i memory leak di cui abbiamo parlato nella prima parte sono:

  • Allocation Profiles
  • Heap Snapshots
  • Allocation Timelines

In questo questa parte dell’articolo vediamo più nel dettaglio di cosa si tratta:

Allocation Profile

Allocation Profile permette di registrare un’attività per determinare:

  • Le parti del codice stanno allocando più heap memory
  • Quelle che stanno creando più “garbage” per il GC

Questo è il primo passo per determinare lo stato della memoria heap dell’applicazione. Per avviare quast’analisi si deve:

  • Premere F12 in google chrome
  • Selezionare la tab “Performance”
  • Verificato di aver spuntato la tab “Memory”
  • Cliccare su start per iniziare la registrazione

A questo punto si può iniziare ad eseguire le attività su cui si vuole fare l’analisi. Una volta terminate le operazioni premere “Stop”. Google Chrome Dev Tools elaborerà i dati raccolti e presenterà una videata contenente una serie di sezioni. Al momento consideriamo sole le 3 sezioni evidenziate nella figura seguente:

La sezione “1” contiene la visualizzazione temporale della registrazione.  E’ possibile utilizzare i 2 cursori indicati dalle frecce nella figura, per restringere il periodo di analisi. I colori indicano come è stato utilizzato il tempo dal browser, la cui legenda è indicata nella sezione 3.

La sezione più importante per i nostri scopi, è la sezione 2: questa sezione contiene l’andamento della memoria heap. Ovviamente più si alza più aumenta l’occupazione di memoria, più diminuisce più la memoria viene liberata. L’andamento normale di un’applicazione, è simile a quella di un elettrocardiogramma, perchè indica che gli oggetti vengono costantemente costruiti e distrutti. In questo caso, vediamo che c’è un punto dove la memoria scende, ma la tendenza è quella di salire. Questa indica un potenziale memory leak.

Heap Snapshots

Heap Snapshot esegue una “fotografia” della memoria allocata e permette di determinare:

  • Gli oggetti più comuni trattenuti in memoria
  • Quali oggetti sono stati aggiunti dall’ultimo snapshot (confronto tra snapshot)
  • Cosa non è stato possibile eliminare dal GC dall’ultimo snapshot

Una volta stabilito che vi è un potenziale memory leak, dato dal continuo aumentare dell’occupazione della memoria (visto nella sezione precedente), è possibile verificare quali sono gli oggetti che rimangono più in memoria. Per avviare quest’analisi si deve:

  • Premere F12 in google chrome
  • Selezionare la tab “Memory”
  • Verificato di aver selezionato il profiling “Heap Snapshot”
  • Cliccare su “Take snapshot”

Quando Google Chrome Dev Tools termina la creazione dello snapshot, sarà visualizzata una videata come la seguente. Cliccando sull’intestazione della colonna “Retained Size” possiamo ordinare gli oggetti in memoria secondo la “memoria trattenuta”. Questa é la quantità di memoria che sarebbe rilasciata se questo oggetto venisse eliminato dal GC.

Espandendo il nodo “closure”, ci accorgiamo che 1.7 Mb sono allocati da “CodeMirror” (plugin per l’editor degli script di Smeup). Cliccando sulla riga di CodeMirror, ci appaiono, nella sezione “Retainers”,  tutte le informazioni sulla catena delle dipendenze  di questo oggetto. Da qui è possibile verificare chi lo ha istanziato e quindi come è possibile annullare la referenza spianando la strada al GC.

Ora vediamo se ripetendo la stessa operazione di prima sui todo, la memoria aumenta. Vogliamo anche capire qual è l’oggetto che continua ad essere residente in memoria quindi eseguiamo le seguenti operazioni:

  • ripetiamo le operazioni sui todo
  • eseguiamo un altro snapshot
  • selezioniamo “Comparison” al posto di “Summary” e scegliamo lo snapshot da confrontare

Le informazioni in questa videata sono molto importanti, perchè rappresentano il “delta” di memoria tra le 2 operazioni. Si possono anche vedere gli oggetti che sono stati creati nuovi, e la loro occupazione. Ancora una volta, espandendo l’albero delle degli oggetti, si possono vedere nei retainers i dettagli.

Allocation Timeline

Allocation timeline permette di registrare un’attività per determinare:

  • Quando sono stati allocati gli oggetti non ancora eliminati dal GC
  • Se gli oggetti vengono eliminati rapidamente dal GC

Per avviare quest’analisi si deve:

  • Premere F12 in google chrome
  • Selezionare la tab “Memory”
  • Verificare di aver selezionato il profiling “Allocation instrumentation on timeline”
  • Cliccare su “Start”

A questo punto si può iniziare ad eseguire le attività su cui si vuole fare l’analisi. Una volta terminato le operazioni premere “Stop”.

Google Chrome Dev Tools elaborerà i dati raccolti e presenterà una videata contenente un grafico a barre dove ogni barra rappresenta l’occupazione nella memoria heap. La porzione grigia della barra rappresenta la memoria rilasciata mentre quella blu quella non rilasciata.

Anche in questo caso è possibile utilizzare i 2 cursori indicati dalle frecce nella figura, per restringere il periodo di analisi.

Come nei casi precedenti, analizzando gli oggetti nella “Retained Size” è possibile individuare l’origine della root e la corrispondente sorgente della referenza.