Depurar vazamentos de memória DOM com a ferramenta Elementos Desapegados

Use a ferramenta Elementos Desapegados para encontrar elementos desanexados que o navegador não pode coletar lixo e localize o objeto JavaScript que ainda está fazendo referência ao elemento desanexado. Ao alterar o JavaScript para liberar o elemento, você reduz o número de elementos desanexados em sua página.

Um vazamento de memória pode ocorrer em seu aplicativo quando um elemento não está mais anexado à árvore DOM (Modelo de Objeto de Documento), mas ainda é referenciado por algum JavaScript em execução na página. Esses elementos são chamados de elementos desanexados. Para que o navegador colete lixo (GC) o elemento desanexado, o elemento não deve ser referenciado da árvore DOM ou do código JavaScript.

Para obter mais informações sobre instantâneos de heap e elementos desapegados, leia Descobrir vazamentos de memória de árvore DOM desanexados com Instantâneos de Heap.

Conforme explicado em Corrigir problemas de memória, problemas de memória afetam o desempenho da página, incluindo vazamentos de memória, bloat de memória e coletas de lixo frequentes. Os sintomas para seus usuários incluem:

• O desempenho de uma página fica progressivamente pior com o tempo.
• O desempenho de uma página é consistentemente ruim.
• O desempenho de uma página é atrasado ou parece pausar com frequência.

Abrir a ferramenta Elementos Desapegados

Para abrir a ferramenta Elementos Desapegados e carregar a página de demonstração:

1. Abra o aplicativo de demonstração Elementos Desapegados em uma nova janela ou guia.

2. Para abrir o DevTools, 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). DevTools é aberto.

3. Em DevTools, na Barra de Atividades, selecione a guia Elementos Desapegados . Se essa guia não estiver visível, clique no botão Mais Ferramentas ():

   

Obter elementos desapegados

O botão Obter Elementos Desapegados () na ferramenta Elementos Desapegados localiza e exibe todos os elementos desanexados em uma página da Web.

Para encontrar elementos desapegados:

1. No aplicativo de demonstração, verifique se o botão Sala 1 está selecionado.

2. No aplicativo de demonstração, clique no botão Tráfego rápido .

3. Depois que algumas mensagens forem geradas e exibidas no aplicativo de demonstração, clique no botão Parar da demonstração:

   

4. Clique no botão Sala 2 :

5. Na ferramenta Elementos Desapegados , clique no ícone Obter Elementos Desapegados ().

   A ferramenta Elementos Desapegados exibe todos os elementos desanexados da página. Quando você alterna para a Sala 2 no aplicativo de demonstração, as mensagens geradas na Sala 1 não são mais anexadas ao DOM, mas ainda são referenciadas por JavaScript:

   

Disparar coleta de lixo

Em seguida, acione a coleta de lixo (GC) no navegador:

1. Na ferramenta Elementos Desapegados , clique no ícone Coletar lixo ().

2. Clique no ícone Obter Elementos Desapegados ().

Quando você seleciona Coletar lixo, o navegador executa a coleta de lixo. Quando você seleciona Obter Elementos Desapegados, a ferramenta Elementos Desapegados exibe todos os elementos desanexados que não podem ser coletados. Esses elementos desapegados podem ser vazamentos de memória se não forem reutilizados pelo aplicativo.

Identificar o código JavaScript que retém elementos desvinculados

Depois de encontrar um elemento desanexado que não pode ser coletado no lixo, você pode usar o botão Analisar () na ferramenta Elementos Desapegados para identificar o código JavaScript em execução na página que ainda está fazendo referência ao elemento desanexado. O botão Analisar usa um heap instantâneo e preenche a ID do elemento desanexado com sua localização no heap.

Para obter mais informações sobre instantâneos de heap, leia Registrar instantâneos de heap usando a ferramenta Memória.

Para identificar o código JavaScript que faz referência a um elemento desanexado:

1. Na ferramenta Elementos Desapegados , clique no ícone Analisar ().

   A ferramenta Memória é aberta na barra de ferramentas Modo Rápido , na parte inferior do DevTools:

   

2. Na ferramenta Elementos Desapegados , selecione o campo Id de um elemento desanexado.

   A ferramenta Memória seleciona automaticamente o objeto no heap que está fazendo referência ao elemento desanexado. Chamamos esses objetos de Retentores:

   

3. Na ferramenta Memória , selecione o link room.js:13.

   A ferramenta Fontes é aberta na Barra de Atividades e mostra a linha 13 do arquivo room.js.

4. hide() Na função de room.js, o código JavaScript do aplicativo de demonstração adiciona cada mensagem na sala a uma unmounted matriz. A unmounted matriz é o objeto que está fazendo referência ao elemento desanexado:

   

Agora você identificou o retentor que está impedindo que o elemento desanexado seja coletado pelo navegador!

Identificar o nó DOM fazendo com que outras pessoas sejam retidas

Como o DOM é um grafo totalmente conectado, quando um nó DOM é mantido na memória pelo JavaScript, ele pode fazer com que outros nós DOM sejam mantidos com ele.

Para identificar o nó culpado em uma árvore desapegada que está fazendo com que toda a árvore seja retida:

1. Clique no ícone Elementos de Desanexar () para destruir os links pai-filho dentro da árvore desanexada.

2. Clique no ícone Coletar lixo ().

   Os links pai-filho são removidos dentro da árvore desanexada:

   

Alterar o destino selecionado para uma origem diferente

Você pode marcar para elementos desanexados de diferentes origens ou quadros usando a lista suspensa de destino selecionada.

1. Clique na lista suspensa De destino selecionado :

   

2. Selecione uma origem diferente.

A nova origem é exibida na ferramenta Elementos Desapegados .

Considerações adicionais

Ao procurar vazamentos de memória, lembre-se de que os vazamentos podem depender do contexto do seu aplicativo. Para o aplicativo de demonstração, você encontrou elementos desanexados que não podiam ser lixo coletados pelo navegador e identificou o JavaScript que está retendo os elementos desanexados. No entanto, no contexto do aplicativo de demonstração, faz sentido manter a lista de mensagens de chat, para que, se um usuário voltar para a Sala 1, o log de mensagens seja preservado.

A imagem a seguir mostra elementos desapegados na forma de mensagens que são recolocados quando um usuário navega da Sala 2 de volta para a Sala 1:

Da mesma forma, um feed nas mídias sociais pode desanexar elementos à medida que os usuários passam por eles e reanexá-los ao DOM quando os usuários rolarem de volta para cima. Elementos desanexados nem sempre são uma indicação de um vazamento de memória, e os vazamentos de memória nem sempre são causados por elementos desanexados.

Para aplicativos de longa duração, pequenos vazamentos de memória de apenas alguns quilobytes podem degradar visivelmente o desempenho ao longo do tempo. Os desenvolvedores Web que usam a estrutura React sabem que React mantém uma cópia virtualizada do DOM. Falha ao desmontar corretamente componentes pode potencialmente levar a um aplicativo que está vazando grandes partes do DOM virtual.

Esse aplicativo de demonstração e seus vazamentos são artificiais. Teste a ferramenta Elementos Desapegados em seu site ou aplicativo de produção. Se você encontrar problemas potenciais com a ferramenta Elementos Desapegados, entre em contato com a equipe do Microsoft Edge DevTools para enviar comentários sobre a depuração de vazamento de memória e ferramenta Elementos Desapegados .