Compartilhar via

Corrigir problemas de memória

  • Artigo

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

Caso de utilização Ferramenta Artigo
Monitorize a quantidade de memória que uma página Web utiliza, em tempo real. Gestor de Tarefas do Browser Microsoft Edge Monitorizar a utilização da memória em tempo real (Gestor de Tarefas do Browser Microsoft Edge)
Visualizar a utilização da memória de uma página Web durante um período de tempo. Caixade verificação Memória da ferramenta > de desempenho Visualize fugas de memória (Ferramenta de desempenho: caixa de verificação Memória) na Referência de funcionalidades de desempenho.
Detetar libertações de lixo frequentes. Caixa de verificação Do Gestor de Tarefas do Browser Microsoft Edge ou da Ferramenta > de desempenhoMemória Detete libertações de lixo frequentes (Gestor de Tarefas do Browser Microsoft Edge, caixa de verificação Memória da Ferramenta de desempenho), abaixo.
Inspecione o conteúdo da memória utilizada por uma página Web. Snapshot da Área Dinâmica para Dados da Ferramenta > de Memória Registar instantâneos de área dinâmica para dados com a ferramenta memória (tipo de criação de perfis "Heap snapshot")
Descubra que objetos JavaScript são criados ao longo de um período de tempo para isolar fugas de memória. Alocações da ferramenta > de memória no linha do tempo Utilizar a instrumentação de Alocação no linha do tempo (tipo de criação de perfis "Alocações no linha do tempo")
Descubra que funções JavaScript alocam memória durante um período de tempo. Este tipo de perfil tem uma sobrecarga de desempenho mínima e pode ser utilizado para operações de execução prolongada. Amostragem da Alocação da ferramenta > de memória Acelerar o runtime do JavaScript (tipo de criação de perfis "Amostragem de alocação")
Localize fugas de memória da árvore DOM. Ferramenta de memória>Elementos desanexados Depurar fugas de memória DOM (tipo de criação de perfis "Elementos desanexados")

A ferramenta Memória

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

A ferramenta Memória

Um perfil de Elementos Desanexados na ferramenta Memória :

Um perfil de Elementos Desanexados

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 (o ícone 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

Caso de utilização Ferramenta Artigo
Mostrar apenas elementos desanexados, como nós de árvore DOM. Ferramenta de memória Tipo de criação de >perfis de elementos desanexados Depurar fugas de memória DOM (tipo de criação de perfis "Elementos desanexados")
Mostrar todos os objetos na memória, filtrados para apresentar elementos desanexados, com ligações para o código fonte JavaScript. Ferramenta de memória>Heap snapshot tipo > de criação de perfis Desanexado Localize fugas de memória de árvore do DOM (tipo > de criação de perfis "Heap snapshot" Desanexado) em Instantâneos de área dinâmica para dados de registos com a ferramenta memória (tipo de criação de perfis "Heap snapshot") .
Mostrar apenas elementos desanexados, como nós de árvore DOM, com ligações para o código fonte JavaScript. Ferramenta Elementos Desanexados Depurar fugas de memória DOM com a ferramenta Elementos Desanexados

Consulte também

Externo:

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é da autoria de Kayce Bascos.

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