Usar instrumentação de alocação no linha do tempo (tipo de criação de perfil "Alocações em linha do tempo")

Na ferramenta Memória, use o tipo de criação de perfil Alocações na linha do tempo para encontrar objetos que não estão sendo coletados corretamente e continuar a reter memória.

Como funciona a instrumentação de alocação na linha do tempo

As alocações da ferramenta Memória no tipo de criação de perfil linha do tempo combinam as informações detalhadas de snapshot do criador de perfil de heap com a atualização incremental e o acompanhamento da ferramenta Desempenho. Da mesma forma, o acompanhamento da alocação de heap para objetos envolve iniciar uma gravação, executar uma sequência de ações e interromper a gravação para análise.

As alocações na linha do tempo tiram instantâneos de heap periodicamente durante a gravação (com a frequência de 50 ms) e um snapshot final no final da gravação.

O número após o @ é uma ID de objeto que persiste nos vários instantâneos tirados durante a sessão de gravação. A ID do objeto persistente permite uma comparação precisa entre os estados de heap. Os objetos são movidos durante as coletas de lixo, portanto, exibir o endereço de um objeto não faz sentido.

Habilitar a instrumentação de alocação na linha do tempo

Para começar a usar as alocações na linha do tempo:

1. Abra uma página da Web, como a página da Web de demonstração de Elementos Desanexados, em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

   O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a ferramenta Memória (ícone da ).

   Se essa guia não estiver visível, clique no botão Mais Ferramentas () e selecione Memória. A ferramenta Memória é aberta:

   

4. Selecione o botão de opção Alocações na linha do tempo.

   Se o botão de opção Alocações na linha do tempo não for mostrado, porque um perfil já foi exibido, no canto superior esquerdo, clique em Perfis ().

5. Na parte inferior da ferramenta Memória , clique no botão Iniciar .

6. Interagir com a página da web; por exemplo, clique no botão Tráfego rápido e, em seguida, no botão Parar na página da Web de demonstração. Dependendo do que você está tentando analisar, você pode atualizar a página, interagir com a página ou simplesmente deixar a página ser executada.

7. No canto superior esquerdo da ferramenta Memória, clique no botão Parar gravação de perfil de heap (

   Um novo instantâneo é criado na seção Linhas do tempo de alocação da lista Perfis :

   

Registre alocações na linha do tempo

Na ferramenta Memória, use o tipo de criação de perfil Alocações na linha do tempo. Esse é um dos recursos do DevTools para rastrear vazamentos de memória no heap JS.

Dado o seguinte código:

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Toda vez que o botão referenciado no código é clicado, uma cadeia de caracteres de um milhão de caracteres é adicionada à x matriz.

Para registrar alocações na linha do tempo:

1. Abra uma página da Web, como uma página da Web de demonstração.

2. Abra DevTools e selecione a ferramenta Memória .

3. Clique no botão de opção Alocações na linha do tempo e, em seguida, clique no botão Iniciar.

4. Execute a ação que você suspeita estar causando o vazamento de memória.

5. Quando terminar, clique no botão Parar gravação de perfil de heap .

6. Enquanto você está gravando, observe se alguma barra azul aparece na instrumentação de alocação na linha do tempo:

   

   Essas barras azuis representam novas alocações de memória. Essas novas alocações de memória são suas candidatas a vazamentos de memória.

7. Amplie uma barra para filtrar o painel Construtor para mostrar apenas os objetos que foram alocados durante o período especificado.

   

8. Expanda o objeto e selecione o valor para exibir mais detalhes no painel Objeto .

   Por exemplo, nos detalhes do objeto recém-alocado indica que ele foi alocado para a x variável no Window escopo:

   

Ler uma linha do linha do tempo de alocação de heap

A linha do linha do tempo de alocação de heap mostra onde os objetos estão sendo criados e identifica o caminho de retenção. Na figura a seguir, as barras na parte superior indicam quando novos objetos são encontrados no heap.

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 ou não no snapshot final do heap. 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 desde então foram coletados como lixo.

Você pode usar os controles deslizantes na linha do tempo acima para ampliar esse snapshot específico e revisar os objetos que foram alocados recentemente naquele ponto:

Clicar em um objeto específico no heap mostra a árvore de retenção na parte inferior do snapshot do heap. Examinar o caminho de retenção para o objeto deve fornecer informações suficientes para entender por que o objeto não foi coletado e você deve fazer as alterações de código necessárias para remover a referência desnecessária.

Exibir alocação de memória por função

Você pode visualizar a alocação de memória pela função JavaScript. Consulte Acelerar o tempo de execução do JavaScript ("Amostragem de alocação" tipo de criação de perfil).

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.