Corrigir problemas de memória

Para encontrar problemas de memória que afetam o desempenho da página, incluindo fugas de memória, sobrecarga de memória e libertações de memória frequentes, utilize as seguintes ferramentas:

• Gestor de Tarefas do Browser Microsoft Edge.
• A caixa de verificação Memória da ferramenta Desempenho.
• Os vários tipos de criação de perfis da ferramenta memória .

Ferramentas para investigar a utilização da memória

A ferramenta Memória

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

Um perfil de Elementos Desanexados na ferramenta Memória :

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

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

No espírito do modelo de desempenho RAIL , o foco dos seus esforços de desempenho deve ser os seus utilizadores.

Os problemas de memória são importantes porque, muitas vezes, são percetáveis pelos utilizadores. Os utilizadores podem ver os problemas de memória das seguintes formas:

• O desempenho de uma página piora progressivamente ao longo do tempo. Isto é possivelmente um sintoma de fuga de memória. Uma fuga de memória ocorre quando um erro na página faz com que a página utilize cada vez mais memória ao longo do tempo.

• O desempenho de uma página é consistentemente mau. Isto é possivelmente um sintoma de inchaço da memória. A sobrecarga da memória ocorre quando uma página utiliza mais memória do que a necessária para uma velocidade de página ideal.

• O desempenho de uma página está atrasado ou parece colocar em pausa com frequência. Este é possivelmente um sintoma de libertações de lixo frequentes. A libertação da memória é quando o browser recupera a memória. O browser decide quando isto acontece. Durante as coleções, todos os scripts em execução são colocados em pausa. Por isso, se o browser estiver a recolher muita memória, o runtime do script será colocado em pausa.

Sobrecarga de memória: Quanto é "demasiado"?

É fácil definir uma fuga de memória. Se um site estiver a utilizar cada vez mais memória progressivamente, terá uma fuga. Mas a sobrecarga da memória é um pouco mais difícil de fixar. O que se qualifica como "utilizar demasiada memória"?

Não existem números rígidos aqui, porque diferentes dispositivos e browsers têm capacidades diferentes. A mesma página que funciona sem problemas num smartphone de alta qualidade pode cair num smartphone de gama baixa.

A chave aqui é utilizar o modelo RAIL e concentrar-se nos seus utilizadores. Descubra que dispositivos são populares com os seus utilizadores e, em seguida, teste a sua página nesses dispositivos. Se a experiência for consistentemente má, a página poderá estar a exceder as capacidades de memória desses dispositivos.

Detetar libertações de lixo frequentes (Gestor de Tarefas do Browser Microsoft Edge, caixa de verificação Memória da Ferramenta de desempenho)

Se a sua página parecer colocar em pausa com frequência, poderá ter problemas de libertação da memória. Para detetar a libertação da memória frequente, pode utilizar:

• Gestor de Tarefas do Browser Microsoft Edge. Os valores de Memória ou JavaScript frequentemente crescentes e em queda representam uma libertação de memória frequente. Veja Monitorizar a utilização da memória em tempo real (Gestor de Tarefas do Browser Microsoft Edge).

• A caixa de verificação Memória da ferramenta Desempenho. Em Gravações de memória de desempenho, as alterações frequentes (em ascensão e queda) na área dinâmica para dados do JS ou grafos de contagem de nós indicam uma libertação da memória frequente. Veja Ver métricas de memória na Referência de funcionalidades de desempenho.

Depois de identificar o problema com qualquer uma dessas ferramentas, pode utilizar as Alocações da ferramenta de Memóriano tipo de criação de perfis linha do tempo para descobrir onde a memória está a ser alocada e quais as funções que estão a causar as alocações. Veja Utilizar a instrumentação de Alocação no linha do tempo (tipo de criação de perfis "Alocações no linha do tempo").

Localizar fugas de memória de árvore do DOM de elementos desanexados

Um nó DOM só é recolhido pela memória pelo browser quando não existem referências ao nó a partir da árvore do DOM ou do código JavaScript em execução na página. Diz-se que um nó está "desanexado" quando é removido da árvore DOM, mas alguns JavaScript ainda o referenciam. Os nós DOM desanexados são uma causa comum de fugas de memória.

Ferramentas para investigar elementos desanexados

Consulte também

• Utilizar a instrumentação de Alocação no linha do tempo (tipo de criação de perfis "Alocações no linha do tempo")
• Depurar fugas de memória DOM com a ferramenta Elementos Desanexados
• Registar instantâneos de área dinâmica para dados com a ferramenta memória (tipo de criação de perfis "Heap snapshot")

Externo:

• Localizar e depurar fugas de memória em JavaScript com Chrome DevTools – conjunto de diapositivos (por Gonzalo Ruiz de Villa), que também se aplica ao Microsoft Edge DevTools.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.