Depurar fugas de memória DOM (tipo de criação de perfis "Elementos desanexados")

Utilize o tipo de criação de perfis Elementos desanexados da ferramenta Memória para localizar e apresentar todos os elementos desanexados numa página Web. Para obter uma comparação das ferramentas para ver elementos desanexados, veja Ferramentas para investigar elementos desanexados em Corrigir problemas de memória.

O tipo de criação de perfis Elementos desanexados ajuda-o a corrigir fugas de memória devido a elementos DOM desanexados. O perfil resultante lista os objetos desanexados retidos por referências no código JavaScript. Este tipo de criação de perfis mostra uma vista dos nós desanexados para o ajudar a identificar possíveis fugas de memória na sua página Web.

Analisar os elementos desanexados de uma página Web

Para utilizar o tipo de criação de perfis Elementos desanexados para analisar os elementos desanexados de uma página Web:

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:

   

   Se o botão de opção Elementos desanexados não for apresentado, porque já é apresentado um perfil, no canto superior esquerdo, clique em Perfis ().

   Não precisa de selecionar o botão de opção Elementos desanexados neste momento, porque a página Web ainda não gerou elementos desanexados.

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

   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.

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 Memória , selecione o botão de opção Elementos desanexados e, em seguida, clique no botão Iniciar .

   A lista de nós desanexados é apresentada na coluna Nós desanexados do perfil de elementos destacados gerado:

   

   Os elementos desanexados são apresentados como nós DOM, como na árvore DOM na ferramenta Elementos . Na lista Perfis , na secção Elementos desanexados , o perfil é listado.

8. Expanda um nó DOM para apresentar os respetivos elementos subordinados (nós DOM):

   

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

Se quiser voltar à lista de botões de opção para tipos de criação de perfis, no canto superior esquerdo da ferramenta Memória , clique em Perfis ().

Para obter formas adicionais de avaliar fugas de memória, veja Ferramentas para investigar elementos desanexados em Corrigir problemas de memória.

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.

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.

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.

Confira também

• Ferramentas para investigar elementos desanexados em Corrigir problemas de memória.
• Página Web de demonstração de Elementos Desanexados
  • MicrosoftEdge/Demos > detached-elements repo folder - código fonte.