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

A ferramenta Elementos Destacados é uma forma de localizar e apresentar todos os elementos desanexados numa página Web. Para obter formas adicionais de avaliar fugas de memória, veja Ferramentas para investigar elementos desanexados em Corrigir problemas de memória.

Importante

A ferramenta Elementos Destacados está a ser preterida. A partir do Microsoft Edge 130, a ferramenta Elementos Desanexados tem uma mensagem a indicar que a ferramenta foi preterida; em vez disso, na ferramenta Memória , no ecrã inicial Selecionar tipo de criação de perfis , selecione o botão de opção Elementos desanexados . A função EdgeDOMMemory.getDetachedNodesIds CDP (Chrome DevTools Protocol) apenas no Edge continua a funcionar, mas é utilizada DOM.getDetachedDomNodes .

No Microsoft Edge 133, a ferramenta Elementos Desanexados será removida; em vez disso, na ferramenta Memória , no ecrã inicial Selecionar tipo de criação de perfis , selecione o botão de opção Elementos desanexados . A função EdgeDOMMemory.getDetachedNodesIds CDP será removida; utilize DOM.getDetachedDomNodes em vez disso.

Para aumentar o desempenho da sua página Web, localize os elementos que estão desanexados da árvore DOM e que não esperava que continuassem a ser referenciados pelo código JavaScript. Localize os elementos desanexados que o browser não consegue recolher porque o código ainda os referencia e, em seguida, liberte as referências de código JavaScript aos elementos desanexados.

A ferramenta Elementos Desanexados , a mostrar retentores na ferramenta Memória , com ligações para abrir o código JavaScript na ferramenta Origens :

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

Estratégia para corrigir fugas de memória com a ferramenta Elementos Desanexados

1. Abra uma página Web para analisar.
2. Abra a ferramenta Elementos Desanexados .
3. Execute a libertação da memória, removendo todos os nós que já não são referenciados por um objeto JavaScript.
4. Obtenha todos os elementos desanexados, que não puderam ser recolhidos pela memória.
5. Analise um determinado elemento desanexado e o respetivo JavaScript, para identificar o nó responsável numa árvore desanexada que está a fazer com que toda a árvore seja mantida.

Obter elementos desanexados e analisar o JavaScript de um elemento desanexado

Para analisar um elemento desanexado através da página Web de demonstração Elementos Desanexados :

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

   O botão Sala 1 está inicialmente selecionado. No código JavaScript da página Web de demonstração, é utilizada uma instância da Room classe para gerir as mensagens na Sala 1.

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 o separador Elementos Desanexados (). Se esse separador não estiver visível, clique no botão Mais Ferramentas () ou torne as DevTools mais largas. A ferramenta Elementos Desanexados é aberta:

   

   Gerar mensagens, que serão armazenadas pela instância javaScript da classe Room:

4. Na página Web de demonstração, clique no botão Tráfego rápido .

   A página Web de demonstração começa a gerar mensagens e a apresentá-las na página Web:

   

5. Depois de algumas mensagens serem apresentadas, clique no botão Parar na página Web de demonstração.

   Cada mensagem é um <div class="message"> elemento referenciado pela instância da Sala 1 da Room classe . Não existem elementos desanexados na árvore DOM da página Web, porque todos os elementos da mensagem estão anexados à instância presente, Sala 1 da classe Sala .

   Mude para uma instância diferente da classe Sala, para que os elementos se desanexem:

6. Na página Web de demonstração, clique no botão Sala 2 , que corresponde a outra instância da Room classe.

   Na página Web, as mensagens desaparecem:

   

   As mensagens que foram geradas para a instância da Sala 1 da classe Sala (<div class="message"> elementos) já não estão anexadas ao DOM, mas continuam a ser referenciadas pela instância da Sala 1 da classe Sala . São elementos desanexados, o que pode causar fugas de memória, a menos que sejam novamente utilizados pela página Web.

   Obtenha a lista de elementos desanexados:

7. Em DevTools, na ferramenta Elementos Desanexados , clique no ícone Recolher lixo ().

   O browser executa a libertação da memória, removendo os nós que já não são referenciados por um objeto JavaScript.

8. Na ferramenta Elementos Desanexados , clique no botão Obter Elementos Desanexados ().

   São apresentados os elementos do DOM desanexados que não podem ser recolhidos da memória:

   

   Estes elementos desanexados são fugas de memória, se não forem reutilizados pela aplicação.

   Identifique o código JavaScript que referencia um elemento desanexado específico:

9. Na ferramenta Elementos Desanexados , clique no botão Analisar ().

   Uma mensagem é apresentada brevemente na parte inferior da ferramenta Elementos Desanexados, a utilizar uma área dinâmica para dados de memória snapshot...e, em seguida, a mensagem Tudo concluído. A ferramenta Memória é aberta no painel Vista Rápida na parte inferior de DevTools:

   

   Se os botões de opção Tipo de criação de perfis forem apresentados na ferramenta Memória em vez de uma IU de Resumo e Retentores , clique novamente no botão Analisar ().

10. Na ferramenta Elementos Desanexados , na coluna ID , faça duplo clique num ID, como @21299 ou @21783.

    Este é o identificador exclusivo de um dos <div class="message"> elementos na área dinâmica para dados da memória snapshot. A ferramenta Memória apresenta os retentores no separador Retentores :

    

    A ferramenta Memória seleciona automaticamente o objeto na área dinâmica para dados que faz referência ao elemento desanexado. Tal objeto é chamado de retenção.

11. No separador Retentores , numa subentrada de retenção sobre o unmounted membro, tal como desmontado na Sala @54011, clique na ligação room.js:13.

    A ferramenta Origens é aberta na Barra de Atividade e mostra a linha 13 do ficheiroroom.js (o Room construtor):

    

    unmounted é um membro de matriz da Room classe, definido na linha 19 no construtor: this.unmounted = [];.

12. Desloque-se para baixo até à linha 49, this.unmounted.push(el); no hide método da Room classe :

    

    O código adiciona cada mensagem na sala à unmounted matriz. A unmounted matriz é o objeto que referencia o elemento desanexado.

No código JavaScript, identificou agora o objeto de retenção (a unmounted matriz) que está a impedir que o elemento desanexado seja recolhido pela memória pelo browser.

Encontrou elementos desanexados que o browser não consegue recolher na memória e localizou o objeto JavaScript que ainda faz referência ao elemento desanexado. Em seguida, pode alterar o código JavaScript para libertar o elemento, para reduzir o número de elementos desanexados na página Web, aumentando o desempenho e a capacidade de resposta da página Web.

Identificar o nó DOM que está a fazer com que outros nós DOM sejam retidos

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 e o item restante é o nó DOM que fez com que outros nós DOM fossem retidos:

   

Alterar o destino selecionado para uma origem diferente

Para marcar para elementos desanexados de diferentes origens ou frames através da lista pendente Destino selecionado:

1. Clique na lista pendente Destino selecionado :

   

2. Selecione uma origem diferente.

A nova origem é apresentada na ferramenta Elementos Desanexados .

Acerca de elementos desanexados e fugas de memória

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. As fugas de memória dependem do contexto da sua aplicação.

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 Web. 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.

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

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

Execute o GC antes de obter elementos desanexados, para mostrar apenas elementos que não podem ser GC'd

Para mostrar apenas os elementos que estão desanexados da árvore DOM e que não podem ser recolhidos pela memória, clique sempre em Recolher Lixo primeiro e, em seguida, clique em Obter Elementos Desencaixados.

Apesar de alguns elementos poderem aparecer como desanexados num determinado momento, não saberá se ainda são referenciados pelo código JavaScript na página Web até executar o GC. Ao alternar entre salas de chat na aplicação de demonstração, a página Web remove os elementos utilizados para apresentar mensagens do DOM. No entanto, mudar para uma instância diferente da Room classe não elimina totalmente estes elementos e as referências a estes elementos ainda existem, pelo que estes elementos permanecem na memória.

Voltar a anexar elementos

Para a página Web de demonstração Elementos Desanexados, faz sentido manter a lista de mensagens de chat, para que, se um utilizador mudar novamente para a Sala 1, o registo de mensagens seja preservado. 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.

Quando a ferramenta Elementos desanexados comunica elementos desanexados, não é necessariamente uma fuga de memória. Cabe-lhe a si decidir o que é uma fuga de memória e o que não é. Talvez a sua aplicação volte a anexar esses elementos mais tarde (em vez de ter de os recriar, o que pode ser mais lento).

Desanexar nós DOM é uma abordagem útil, desde que, eventualmente, reutilize esses elementos desanexados (ou os elimine). O valor da ferramenta Elementos desanexados é que, quando suspeita de uma fuga de memória, pode marcar se existe um número crescente de elementos DOM desanexados inesperados a serem reportados pela ferramenta.

Aplicações de execução prolongada e componentes de desmontagem

Certifique-se de que desmonta os componentes. 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. Para páginas Web que utilizam a arquitetura React, 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.

Relatório de problemas

Se encontrar problemas com o funcionamento da funcionalidade Elementos Desanexados , contacte a equipa do Microsoft Edge DevTools para enviar feedback sobre a funcionalidade Elementos Desanexados e a depuração de fugas de memória.

Confira também

• Ferramentas para investigar elementos desanexados em Corrigir problemas de memória – comparação de ferramentas para ver elementos desanexados.

Demonstração:

• Página Web de demonstração de Elementos Desanexados
• MicrosoftEdge/Demos > detached-elements repo folder - código fonte.