Utilizar a instrumentação de Alocação no linha do tempo (tipo de criação de perfis "Alocações no linha do tempo")

Na ferramenta Memória, utilize o tipo de criação de perfis Alocações no linha do tempo para localizar objetos que não estão a ser devidamente recolhidos pela memória e continuar a reter memória.

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

As Alocações na linha do tempo tipo de criação de perfis da ferramenta memória combinam as informações detalhadas snapshot do gerador de perfis de área dinâmica para dados com a atualização incremental e o controlo da ferramenta desempenho. Da mesma forma, controlar a alocação de área dinâmica para dados para objetos envolve iniciar uma gravação, executar uma sequência de ações e parar a gravação para análise.

As alocações em linha do tempo capturam instantâneos de área dinâmica para dados periodicamente ao longo da gravação (com a frequência de cada 50 ms) e uma última snapshot no final da gravação.

O número após o @ é um ID de objeto que persiste nos múltiplos instantâneos tirados durante a sessão de gravação. O ID de objeto persistente permite uma comparação precisa entre estados de área dinâmica para dados. Os objetos são movidos durante as libertações da memória, pelo que não faz sentido apresentar o endereço de um objeto.

Ativar a Instrumentação de Alocação na Linha Cronológica

Para começar a utilizar alocações no linha do tempo:

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

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

   O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione a ferramenta Memória ().

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

   

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

   Se o botão de opção Alocações no linha do tempo não for apresentado, porque já é apresentado um perfil, 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 Web; por exemplo, clique no botão Tráfego rápido e, em seguida, no botão Parar na página Web de demonstração. Consoante o que está a tentar analisar, 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 de gravar o perfil de área dinâmica para dados ().

   É criado um novo Instantâneo na secção Linhas cronológicas de alocação da lista Perfis :

   

Alocações de registos no linha do tempo

Na ferramenta Memória, utilize o tipo de criação de perfis Alocações no linha do tempo. Esta é uma das funcionalidades do DevTools para localizar fugas de memória na área dinâmica para dados JS.

Dado o seguinte código:

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

Sempre que o botão referenciado no código for clicado, é adicionada uma cadeia de um milhão de carateres à x matriz.

Para registar alocações no linha do tempo:

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

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

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

4. Execute a ação que suspeita estar a causar a fuga de memória.

5. Quando terminar, clique no botão Parar gravação do perfil de área dinâmica para dados gravação.

6. À medida que estiver a gravar, repare se aparecem barras azuis na instrumentação de Alocação no linha do tempo:

   

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

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

   

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

   Por exemplo, nos detalhes do objeto alocado recentemente indica que foi alocado à x variável no Window âmbito:

   

Ler um linha do tempo de alocação de área dinâmica para dados

A alocação de área dinâmica para dados linha do tempo mostra onde os objetos estão a ser criados e identifica o caminho de retenção. Na figura seguinte, as barras na parte superior indicam quando são encontrados novos objetos na área dinâmica para dados.

A altura de cada barra corresponde ao tamanho dos objetos alocados recentemente e a cor das barras indica se esses objetos ainda estão ou não vivos na área dinâmica para dados final snapshot. As barras azuis indicam objetos que ainda estão vivos no final do linha do tempo, as barras cinzentas indicam objetos que foram alocados durante a linha do tempo, mas que foram entretanto recolhidos lixo.

Pode utilizar os controlos de deslize no linha do tempo acima para ampliar esse snapshot específico e rever os objetos que foram recentemente alocados nessa altura:

Clicar num objeto específico na área dinâmica para dados mostra a árvore de retenção na parte inferior da área dinâmica para dados snapshot. Examinar o caminho de retenção para o objeto deve fornecer-lhe informações suficientes para compreender por que motivo o objeto não foi recolhido e deve fazer as alterações de código necessárias para remover a referência desnecessária.

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

Pode ver a alocação de memória pela função JavaScript. Veja Acelerar o runtime de JavaScript (tipo de criação de perfis "Amostragem de alocação").

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.