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:
Abra a aplicação de demonstração Elementos Destacados numa nova janela ou separador.
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.
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:
Na aplicação de demonstração, certifique-se de que o botão Sala 1 está selecionado.
Na aplicação de demonstração, clique no botão Tráfego rápido .
Depois de algumas mensagens serem geradas e apresentadas na aplicação de demonstração, clique no botão Parar da demonstração:
Clique no botão Sala 2 :
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:
Na ferramenta Elementos Destacados , clique no ícone Recolher lixo ().
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:
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:
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:
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.
hide()
Na função de room.js, o código JavaScript da aplicação de demonstração adiciona cada mensagem na sala a umaunmounted
matriz. Aunmounted
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:
Clique no ícone Desencaixar Elementos () para destruir as ligações principal-subordinado dentro da árvore desanexada.
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 .
Clique na lista pendente Destino selecionado :
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.