Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Use o tipo de criação de perfil Elementos desanexados da ferramenta Memória para localizar e exibir todos os elementos desanexados em uma página da Web. Para obter uma comparação de ferramentas para exibir elementos desanexados, consulte Ferramentas para investigar elementos desanexados em Corrigir problemas de memória.
O tipo de criação de perfil de elementos desanexados ajuda a corrigir vazamentos de memória devido a elementos DOM desanexados. O perfil resultante lista os objetos desanexados que são retidos por referências em seu código JavaScript. Esse tipo de criação de perfil mostra uma exibição dos nós desanexados para ajudá-lo a identificar possíveis vazamentos de memória em sua página da Web.
Analisar os elementos desanexados de uma página da Web
Para usar o tipo de criação de perfil Elementos desanexados para analisar os elementos desanexados de uma página da Web:
Abra uma página da Web, como a página da Web de demonstração de Elementos Desanexados, em uma nova janela ou guia.
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).
O DevTools é aberto.
No DevTools, na Barra de Atividades, selecione a ferramenta Memória (ícone da
).Se essa guia não estiver visível, clique no botão Mais Ferramentas (
) e selecione Memória. A ferramenta Memória é aberta:
Se o botão de opção Elementos desanexados não for mostrado, porque um perfil já está exibido, no canto superior esquerdo, clique em Perfis (
).Você não precisa selecionar o botão de opção Elementos desanexados neste ponto, porque a página da Web ainda não gerou nenhum elemento desanexado.
Gere mensagens, que serão armazenadas pela instância JavaScript da classe Room:
O botão Sala 1 é selecionado inicialmente. No código JavaScript da página da Web de demonstração, uma instância da
Roomclasse é usada para gerenciar as mensagens na Sala 1.Na página da demonstração, clique no botão Tráfego rápido .
A página da web de demonstração começa a gerar mensagens e exibi-las na página da web:
Depois que algumas mensagens forem exibidas, clique no botão Parar na página da Web de demonstração.
Cada mensagem é um
<div class="message">elemento referenciado pela instância da sala 1 daRoomclasse. Não há elementos separados na árvore DOM da página da Web, porque todos os elementos da mensagem estão anexados à instância presente, Room 1, da classe Room .Mude para uma instância diferente da classe Room, para que os elementos sejam desanexados:
Na página da Web de demonstração, clique no botão Room 2 , que corresponde a outra instância da
Roomclasse.Na página da Web, as mensagens desaparecem:
As mensagens que foram geradas para a instância da sala 1 da classe Room (
<div class="message">elementos) não estão mais anexadas ao DOM, mas ainda são referenciadas pela instância da sala 1 da classe Room . São elementos separados, que podem causar vazamentos de memória, a menos que sejam usados novamente pela página da web.Obtenha a lista de elementos separados:
No DevTools, na ferramenta Memória , selecione o botão de opção Elementos desanexados e clique no botão Iniciar .
A lista de nós desanexados é exibida na coluna Nós desanexados do perfil Elementos desanexados gerados:
Os elementos desanexados são exibidos, como nós DOM, como na árvore DOM na ferramenta Elementos . Na lista Perfis , na seção Elementos desanexados , o perfil é listado.
Expanda um nó DOM para exibir seus elementos filho (nós DOM):
Esses elementos desanexados (nós DOM) serão vazamentos de memória, se não forem reutilizados pelo aplicativo.
Se você quiser retornar à lista de botões de opção para tipos de criação de perfil, no canto superior esquerdo da ferramenta Memória , clique em Perfis ().
Para obter maneiras adicionais de avaliar vazamentos de memória, consulte Ferramentas para investigar elementos desvinculados em Corrigir problemas de memória.
Sobre elementos desanexados e vazamentos de memória
Elementos desanexados nem sempre são uma indicação de um vazamento de memória e vazamentos de memória nem sempre são causados por elementos desanexados. Os vazamentos de memória dependem do contexto do seu aplicativo.
Um vazamento de memória pode ocorrer em seu aplicativo quando um elemento não está mais anexado à árvore DOM (Modelo de Objeto do Documento), mas ainda é referenciado por algum JavaScript em execução na página da Web. Esses elementos são chamados de elementos separados. Para que o navegador colete o elemento desanexado (coleta de lixo), o elemento não deve ser referenciado da árvore DOM ou do código JavaScript.
Problemas de memória afetam o desempenho da página da Web, incluindo vazamentos de memória, inchaço de memória e coletas de lixo frequentes. Os sintomas para seus usuários incluem:
- O desempenho de uma página da Web piora progressivamente com o tempo.
- O desempenho de uma página da Web é consistentemente ruim.
- O desempenho de uma página da Web está atrasado ou parece pausar com frequência.
Para aumentar o desempenho da página da Web, localize os elementos separados da árvore DOM e que você não esperava que ainda fossem referenciados pelo código JavaScript. Localize os elementos desanexados que o navegador não pode coletar porque seu código ainda faz referência a eles e, em seguida, libere as referências de código JavaScript para os elementos desanexados.
Reanexando elementos
Para a página da Web de demonstração de Elementos Desanexados, 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. Da mesma forma, um feed na mídia social pode desanexar elementos à medida que os usuários passam por eles e reanexá-los ao DOM quando os usuários rolam para cima.
Quando a ferramenta Elementos desanexados relata elementos desanexados , não é necessariamente um vazamento de memória. Cabe a você decidir o que é um vazamento de memória e o que não é. Talvez seu aplicativo reconecte esses elementos mais tarde (em vez de ter que recriá-los, o que pode ser mais lento).
Desanexar nós DOM é uma abordagem útil, desde que você eventualmente reutilize esses elementos desanexados (ou exclua-os). O valor da ferramenta Elementos desvinculados é que, quando você suspeita de um vazamento de memória, pode marcar se há um número crescente de elementos DOM desanexados inesperados sendo relatados pela ferramenta.
Aplicativos de longa execução e componentes de desmontagem
Certifique-se de desmontar os componentes. Para aplicativos de execução longa, pequenos vazamentos de memória de apenas alguns kilobytes podem degradar visivelmente o desempenho ao longo do tempo. Para páginas da Web que usam a estrutura do React, o React mantém uma cópia virtualizada do DOM. Se você não desmontar corretamente os componentes, pode fazer com que um aplicativo vaze grandes partes do DOM virtual.