Como usar a ferramenta de linha do tempo de alocação

Meggin Kearney
Meggin Kearney

Use a ferramenta Cronologia de alocação para encontrar objetos que não estão sendo coletados corretamente e continuam retendo memória.

Como a ferramenta funciona

Um relatório de linha do tempo de alocação combina as informações detalhadas do snapshot do analista de heap com a atualização incremental e o rastreamento do painel de linha do tempo. Assim como essas ferramentas, o rastreamento da alocação de heap envolve iniciar uma gravação, realizar uma sequência de ações e interromper a gravação para análise.

A ferramenta tira snapshots do heap periodicamente durante a gravação (a cada 50 ms!) e um snapshot final no final da gravação.

Exemplo de gravação da linha do tempo de alocação.

Gravar um relatório de linha do tempo de alocação

Para começar a usar a ferramenta Cronograma de alocação, siga estas etapas:

  1. Abra o painel Memória no DevTools.
  2. Ative o perfil Alocações na linha do tempo.
  3. Pressione o botão Start para iniciar a gravação.

Opção "Record allocations on a timeline" destacada.

Ler um perfil de alocação de heap

O perfil de alocação de pilha mostra onde os objetos são criados e identifica o caminho de retenção. No exemplo a seguir, as barras na parte de cima indicam quando novos objetos são encontrados na pilha.

A altura de cada barra corresponde ao tamanho dos objetos alocados recentemente, e a cor das barras indica se esses objetos ainda estão ativos no snapshot final da pilha. As barras azuis indicam objetos que ainda estão ativos no final da linha do tempo. As barras cinzas indicam objetos que foram alocados durante a linha do tempo, mas foram coletados:

Exemplo de gravação da linha do tempo de alocação.

É possível aumentar o zoom para filtrar o painel Constructor e mostrar apenas os objetos alocados durante o período especificado. Para aumentar o zoom, arraste o mouse sobre o período que você quer focar na linha do tempo.

Linha do tempo com zoom em uma única barra.

Clicar em um construtor específico no painel Constructor mostra a árvore de retenção no painel Retainers. O exame do caminho de retenção para o objeto deve fornecer informações suficientes para entender por que o objeto não foi coletado, e você pode fazer as mudanças necessárias no código para remover a referência desnecessária.

Conferir a alocação de memória por função

Também é possível conferir a alocação de memória por função JavaScript. Consulte Investigar a alocação de memória por função para mais informações.