Depurar fugas de memória DOM com a ferramenta Elementos Desanexados

Utilize a ferramenta Elementos Destacados para localizar elementos desanexados que o browser não consegue recolher na memória e localize o objeto JavaScript que ainda faz referência ao elemento desanexado. Ao alterar o JavaScript para libertar o elemento, reduz o número de elementos desanexados na sua página.

Uma fuga de memória pode ocorrer na sua aplicação quando um elemento já não está ligado à árvore do Modelo de Objeto de Documento (DOM), mas ainda é referenciado por algum JavaScript em execução na página. Estes elementos são denominados elementos desanexados. Para que o browser recolha a memória (GC) do elemento desanexado, o elemento não pode ser referenciado a partir da árvore DOM ou do código JavaScript.

Para obter mais informações sobre instantâneos de área dinâmica para dados e elementos desanexados, leia Descobrir fugas de memória de árvore DOM desanexadas com Instantâneos de Área Dinâmica para Dados.

Conforme explicado em Corrigir problemas de memória, os problemas de memória afetam o desempenho da página, incluindo fugas de memória, sobrecarga de memória e libertações de memória frequentes. Os sintomas para os seus utilizadores incluem:

• O desempenho de uma página piora progressivamente ao longo do tempo.
• O desempenho de uma página é consistentemente mau.
• O desempenho de uma página está atrasado ou parece colocar em pausa com frequência.

Vídeo: Depurar fugas de memória com a ferramenta Elementos Desanexados do Microsoft Edge

Abrir a ferramenta Elementos Desanexados

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

1. Abra a aplicação de demonstração Elementos Destacados numa nova janela ou separador.

2. Para abrir o DevTools, 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 o separador Elementos Desanexados . Se esse separador não estiver visível, clique no botão Mais Ferramentas ():

   

Obter elementos desanexados

O botão Obter Elementos Desanexados () na ferramenta Elementos Desanexados localiza e apresenta todos os elementos desanexados numa página Web.

Para localizar elementos desanexados:

1. Na aplicação de demonstração, certifique-se de que o botão Sala 1 está selecionado.

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

3. Depois de algumas mensagens serem geradas e apresentadas na aplicação de demonstração, clique no botão Parar da demonstração:

   

4. Clique no botão Sala 2 :

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

   A ferramenta Elementos Desanexados apresenta todos os elementos desanexados da página. Quando muda para a Sala 2 na aplicação de demonstração, as mensagens que foram geradas na Sala 1 já não são anexadas ao DOM, mas continuam a ser referenciadas pelo JavaScript:

   

Acionar libertação da memória

Em seguida, acione a libertação da memória (GC) no browser:

1. Na ferramenta Elementos Destacados , clique no ícone Recolher lixo ().

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

Quando seleciona Recolher lixo, o browser executa a libertação da memória. Quando seleciona Obter Elementos Desanexados, a ferramenta Elementos Desanexados apresenta todos os elementos desanexados que não podem ser recolhidos da memória. Estes elementos desanexados podem ser fugas de memória se não forem reutilizados pela aplicação.

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

Depois de encontrar um elemento desanexado que não pode ser recolhido pela memória, pode utilizar o botão Analisar () na ferramenta Elementos Desanexados para identificar o código JavaScript em execução na página que ainda faz referência ao elemento desanexado. O botão Analisar tira um instantâneo da área dinâmica para dados e preenche o ID do elemento desanexado com a respetiva localização na área dinâmica para dados.

Para obter mais informações sobre instantâneos de área dinâmica para dados, leia Gravar instantâneos de área dinâmica para dados com a ferramenta Memória.

Para identificar o código JavaScript que referencia um elemento desanexado:

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

   A ferramenta Memória é aberta na barra de ferramentas Vista Rápida , na parte inferior de DevTools:

   

2. Na ferramenta Elementos Desanexados , selecione o campo ID de um elemento desanexado.

   A ferramenta Memória seleciona automaticamente o objeto na área dinâmica para dados que faz referência ao elemento desanexado. Chamamos a estes objetos Retentores:

   

3. Na ferramenta Memória , selecione a ligação room.js:13.

   A ferramenta Origens é aberta na Barra de Atividade e mostra a linha 13 do ficheiro room.js.

4. hide() Na função de room.js, o código JavaScript da aplicação de demonstração adiciona cada mensagem na sala a uma unmounted matriz. A unmounted matriz é o objeto que referencia o elemento desanexado:

   

Identificou agora o retenção que está a impedir que o elemento desanexado seja recolhido pela memória pelo browser!

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

Uma vez que o DOM é um grafo totalmente ligado, quando um nó DOM é retido na memória pelo JavaScript, pode fazer com que outros nós DOM sejam retidos com o mesmo.

Para identificar o nó responsável numa árvore desanexada que está a fazer com que toda a árvore seja mantida:

1. Clique no ícone Desencaixar Elementos () para destruir as ligações principal-subordinado dentro da árvore desanexada.

2. Clique no ícone Recolher lixo ().

   As ligações principal-subordinado são removidas dentro da árvore desanexada:

   

Alterar o destino selecionado para uma origem diferente

Pode verificar se existem elementos desanexados de diferentes origens ou frames com a lista pendente Destino selecionado .

1. Clique na lista pendente Destino selecionado :

   

2. Selecione uma origem diferente.

A nova origem é apresentada na ferramenta Elementos Desanexados .

Considerações adicionais

Ao procurar fugas de memória, lembre-se de que as fugas podem depender do contexto da sua aplicação. Para a aplicação de demonstração, encontrou elementos desanexados que não puderam ser libertados da memória pelo browser e identificou o JavaScript que está a reter os elementos desanexados. No entanto, no contexto da aplicação de demonstração, faz sentido manter a lista de mensagens de chat, para que, se um utilizador voltar à Sala 1, o registo de mensagens seja preservado.

A imagem seguinte mostra elementos desanexados sob a forma de mensagens que são anexadas novamente quando um utilizador navega da Sala 2 de volta para a Sala 1:

Da mesma forma, um feed nas redes sociais pode desencaixar elementos à medida que os utilizadores passam pelos mesmos e voltar a ligá-los ao DOM quando os utilizadores deslocarem novamente para cima. Os elementos desanexados nem sempre são uma indicação de uma fuga de memória e as fugas de memória nem sempre são causadas por elementos desanexados.

Para aplicações de execução prolongada, pequenas fugas de memória de apenas alguns quilobytes podem degradar visivelmente o desempenho ao longo do tempo. Os programadores Web que utilizam a arquitetura react sabem que o React mantém uma cópia virtualizada do DOM. A falha ao desmontar corretamente os componentes pode potencialmente levar a que uma aplicação vaze grandes partes do DOM virtual.

Esta aplicação de demonstração e as suas fugas são artificiais. Teste a ferramenta Elementos Desanexados no seu site ou aplicação de produção. Se encontrar potenciais problemas com a ferramenta Elementos Desanexados, contacte a equipa de DevTools do Microsoft Edge para enviar feedback sobre a ferramenta Elementos Desanexados e a depuração de fuga de memória.