Corrigir problemas de memória

Para localizar problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória, inchaço de memória e coletas de lixo frequentes, use as seguintes ferramentas:

• Gerenciador de Tarefas do Navegador Microsoft Edge.
• A caixa de seleção Memória da ferramenta Desempenho.
• Os vários tipos de criação de perfil da ferramenta Memória .

Ferramentas para investigar o uso de memória

A ferramenta Memória

A principal ferramenta para investigar problemas de memória é a ferramenta Memória :

Um perfil de Elementos Desvinculados na ferramenta Memória :

Para 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 ().

Visão geral da correção de problemas de memória

No espírito do modelo de desempenho RAIL , o foco de seus esforços de desempenho deve ser seus usuários.

Problemas de memória são importantes porque geralmente são perceptíveis pelos usuários. Os usuários podem perceber problemas de memória das seguintes maneiras:

• O desempenho de uma página piora progressivamente ao longo do tempo. Isso é possivelmente um sintoma de um vazamento de memória. Um vazamento de memória ocorre quando um bug na página faz com que a página use progressivamente mais e mais memória ao longo do tempo.

• O desempenho de uma página é consistentemente ruim. Isso é possivelmente um sintoma de inchaço de memória. Inchaço de memória é quando uma página usa mais memória do que o necessário para a velocidade ideal da página.

• O desempenho de uma página está atrasado ou parece pausar com frequência. Isso é possivelmente um sintoma de coletas frequentes de lixo. A coleta de lixo é quando o navegador recupera a memória. O navegador decide quando isso acontece. Durante as coletas, todos os scripts em execução são pausados. Portanto, se o navegador estiver coletando muito lixo, o tempo de execução do script será muito pausado.

Inchaço de memória: quanto é "demais"?

Um vazamento de memória é fácil de definir. Se um site estiver usando progressivamente mais e mais memória, você tem um vazamento. Mas o inchaço da memória é um pouco mais difícil de definir. O que se qualifica como "usar muita memória"?

Não há números concretos aqui, pois diferentes dispositivos e navegadores têm diferentes recursos. A mesma página que funciona sem problemas em um smartphone de última geração pode travar em um smartphone de baixo custo.

A chave aqui é usar o modelo RAIL e focar em seus usuários. Descubra quais dispositivos são populares entre seus usuários e, em seguida, teste sua página nesses dispositivos. Se a experiência for consistentemente ruim, a página pode estar excedendo os recursos de memória desses dispositivos.

Identifique coletas de lixo frequentes (Gerenciador de Tarefas do Navegador Microsoft Edge, caixa de seleção Memória da ferramenta Desempenho)

Se sua página parece pausar com frequência, talvez você tenha problemas de coleta de lixo. Para identificar a coleta de lixo frequente, você pode usar:

• Gerenciador de Tarefas do Navegador Microsoft Edge. Aumento e queda frequentes Memória ou JavaScript Os valores de memória representam a coleta de lixo frequente. Consulte Monitorar o uso de memória em tempo real (Gerenciador de Tarefas do Navegador).

• A caixa de seleção Memória da ferramenta Desempenho. Em gravações de memória de desempenho, mudanças frequentes (subindo e descendo) no heap JS ou gráficos de contagem de nós indicam coleta de lixo frequente. Consulte Exibir métricas de memória em Referência de recursos de desempenho.

Depois de identificar o problema usando qualquer uma dessas ferramentas, você poderá usar o tipo de criação de perfil Alocações na linha do tempo da ferramenta Memória para descobrir onde a memória está sendo alocada e quais funções estão causando as alocações. Consulte Usar instrumentação de alocação no linha do tempo (tipo de criação de perfil "Alocações em linha do tempo")

Localizar vazamentos de memória da árvore DOM de elementos desvinculados

Um nó DOM só é coletado como lixo pelo navegador quando não há referências ao nó da árvore DOM ou do código JavaScript em execução na página. Diz-se que um nó é "desanexado" quando é removido da árvore DOM, mas algum JavaScript ainda faz referência a ele. Nós DOM desanexados são uma causa comum de vazamentos de memória.

Ferramentas para investigar elementos destacados

Consulte também

• Usar instrumentação de alocação no linha do tempo (tipo de criação de perfil "Alocações em linha do tempo")
• Registre instantâneos de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")

Externo:

• Localizando e depurando vazamentos de memória no JavaScript com o Chrome DevTools - apresentação de slides (por Gonzalo Ruiz de Villa), que também se aplica ao Microsoft Edge DevTools.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.