Skip to main content
Junte-se a nós na TDX em São Francisco ou no Salesforce+ nos dias 5 e 6 de maio e assista à Developer Conference for the AI Agent Era. Registre-se agora.

Investigar problemas de memória

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Usar o painel Memory (Memória) para rastrear o uso da memória.
  • Acessar o Monitor de desempenho para monitorar o tamanho de heap do JS e os ouvintes de eventos do JS.

Travar o navegador

O próximo exemplo pode travar seu navegador. Vazamentos de memória no navegador do cliente podem retardar a experiência do navegador a ponto de travá-lo.

Corrigir bloqueios ou falhas do navegador Chrome

Os exemplos de componentes Web do Lightning neste módulo podem bloquear seu navegador, mas há uma ferramenta interessante que pode ser usada para fechar uma aba que não responde.

  1. Na seção de abas do navegador Chrome, clique com o botão direito do mouse na área em branco e selecione Gerenciador de tarefas.
    Menu do botão direito do mouse com opções para Nova guia, Reabrir guia fechada, Marcar todas as guias como favorito, Nomear a janela e Gerenciador de tarefas.
  2. Clique em um item no Gerenciador de tarefas. O botão End Process (Finalizar processo) fica ativo.
    Gerenciador de tarefas com um item selecionado e o botão Finalizar processo ativo.
  3. Feche o Gerenciador de tarefas.

Agora temos uma solução para sair de um processo bloqueado.

Vamos dar uma olhada em outro mau exemplo e como solucioná-lo.

Excesso de ouvintes de eventos

  1. Com o aplicativo Bad Network aberto, selecione Example 2: Count Clicks (Exemplo 2: Contar cliques).
  2. Clique em Click Me repetidamente até que a resposta da contagem fique mais lenta. A contagem é errática e não corresponde ao número de cliques. A cor também muda. Vamos usar o Monitor de desempenho para investigar isso.
  3. Atualize a página.
  4. No DevTools, clique no ícone de Customize and control DevTools (Personalizar e controlar o DevTools) () para expandir o menu e, em seguida, clique em More tools > Performance monitor (Mais ferramentas | Monitor de desempenho).

    O Monitor de desempenho rastreia o desempenho ao longo do tempo. Podemos monitorar as alterações conforme interagimos com a página.

  5. Selecione as opções JS heap size (Tamanho de heap do JS) e JS event listeners (Ouvintes de eventos do JS) para exibir os resultados.

    Observe o número de ouvintes de evento do JS. Os gráficos podem demorar um pouco para exibir as alterações feitas na página. Fique atento ao uso da CPU, tamanho de heap do JS, nós do DOM e ouvintes de eventos do JS enquanto continuamos.

  6. Clique diversas vezes em Click Me e observe que o uso da CPU permanece estável. Os nós do DOM também permanecem estáveis. Porém, o tamanho de heap do JS e os ouvintes de eventos do JS estão crescendo consideravelmente.

Vamos explorar as informações que o DevTools fornece para ajudar a rastrear o tamanho de heap do JS.

Usar o painel Memory (Memória)

  1. Fechar o Monitor de desempenho.
  2. No menu do DevTools, selecione a guia Memory (Memória).
  3. Atualize a página para começar com um novo exemplo.
    Isso permite capturar uma linha de base de comparação em um instantâneo.
  4. No painel Memory (Memória), clique em Take snapshot (Tirar um instantâneo).
  5. Espere até que o instantâneo seja criado e exibido. (Isso pode levar alguns minutos, dependendo da velocidade do seu navegador.)
  6. Clique em Click Me até que fique mais lento como antes.
  7. Selecione o cabeçalho Profiles (Perfis) e clique em Take snapshot (Tirar um instantâneo) para criar um novo snapshot.
  8. Espere até que o instantâneo seja criado. Ele é exibido na parte inferior do primeiro instantâneo. O tamanho aumentou em 20,5 MB do Instantâneo 1 (95,5 MB) para o Instantâneo 2 (116 MB). Os tamanhos dos instantâneos podem ser diferentes destes.

Vamos comparar os dois instantâneos

  1. No menu Memory (Memória), na lista Perspective (Perspectiva) (atualmente definida como Resumo), selecione Comparison (Comparação).

    Por padrão, o Chrome compara com o instantâneo anterior, mas você pode selecionar um instantâneo diferente para comparar. Para isso, selecione outro instantâneo no menu suspenso acima dos dados. Cada linha mostra a diferença por item entre os dois instantâneos.


    Painel Memory (Memória) do DevTools mostrando uma Comparação dos Instantâneos 2 e 1.
  2. Selecione o cabeçalho da coluna Size Delta (Delta de tamanho) para classificar por delta de tamanho. Com um clique no cabeçalho, você alterna entre as opções de classificação.
  3. Classifique do maior para o menor.
    Painel Memory (Memória) do DevTools mostrando uma Comparação dos Instantâneos 2 e 1 com os resultados classificados por delta de tamanho.

    Role pela coluna Constructor (Construtor) e observe que existem principalmente itens do sistema antes do construtor SomeObj. Neste caso, 6.142 SomeObjs foram criados. Isso é muito!

    Nota

    Você pode usar o filtro Class (Classe) para procurar SomeObj.

  4. Expanda SomeObj para abri-lo e ver todas as instâncias de SomeObj.

    O construtor JavaScript de SomeObj na memória é listado para cada instância de SomeObj. Neste caso, é o arquivo example2_CountClicks.js na linha 63.

  5. Selecione um SomeObj para visualizar os detalhes no painel Object (Objeto). (O painel Object [Objeto] está abaixo do painel Constructor [Construtor] e do painel Retainers [Retentores].)

    Nos detalhes do painel Object (Objeto), na segunda linha, o primeiro contexto mostra o arquivo e o local da chamada para gerar o Objeto: example2_CountClicks.js na linha 81.

  6. Clique no link example2_CountClicks.js para abrir o arquivo painel Sources (Origens).
    Painel Sources (Origens) no DevTools com example2_CountClicks.js aberto mostrando a linha 81: document.body.addEventListener('click', () => {

    A linha 81 está no método listenForEvent, que cria uma nova instância de SomeObj e usa-a no addEventListener de um evento de cliques. Então, sempre que o corpo recebe um clique, outro EventListener para o evento de cliques é adicionado ao corpo. O problema é que os ouvintes nunca são limpos, criando um vazamento de memória.

    Nota

    O outro problema é que o código adiciona o ouvinte de eventos diretamente a document.body. Isso não é uma melhor prática.

    Você também pode ver EventListeners na guia Elements (Elementos).

  7. Selecione a guia Elements (Elementos).
  8. Selecione a marca body (corpo) e selecione Event Listeners (Ouvintes de eventos).
    Painel Elements (Elementos) com Event Listeners (Ouvintes de eventos) selecionado.
  9. Expanda o evento click.

    Ouvintes de eventos exibidos com o evento click expandido mostrando vários ouvintes no corpo.

    Veja todos os ouvintes (no corpo) que foram adicionados por todos os cliques. Esse é um vazamento de memória clássico. O vazamento pode atrasar o navegador e travá-lo.

Tenha cuidado ao adicionar ouvintes de eventos. A limpeza correta dos ouvintes faz parte da criação de bons componentes Web do Lightning. Verifique a seção Resources (Recursos) para obter mais informações sobre eventos e ouvintes.

Agora você já sabe como usar algumas das ferramentas de desenvolvedor disponíveis em navegadores da web. Use-as para investigar problemas de rede e memória ao solucionar problemas de componentes Web do Lightning.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback