Como corrigiria um vazamento de memória no seu código?

Identificaria a fonte de fuga usando as ferramentas de desenvolvedor do navegador (Timeline / Performance, Memory)?

Causas comuns de fugas de memória:

• Referências penduradas a objetos:
  • Temporizadores esquecidos (setInterval, setTimeout) que fazem referência a objetos.
  • Manipuladores de eventos confusos que não foram desconectados (removeEventListener).
  • Fechos que mantêm variáveis externas por mais tempo do que o necessário.
  • Elementos DOM removidos do documento mas com referências em JavaScript.

// Exemplo de fuga devido a temporizador esquecido
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject não pode ser coletado pelo coletor de lixo
}, 1000);

• Estruturas de dados grandes:
  • Criação e armazenamento de arrays ou objetos excessivamente grandes quando se podem usar iteradores ou streaming.
• Uso incorreto de caches:
  • Caches que crescem indefinidamente sem estratégia de expulsão (LRU, LFU, etc.).
• Fugas de bibliotecas externas:
  • Verificar a documentação ou o código fonte das bibliotecas em busca de problemas potenciais.

Solução:

1. Cancelar eventos e temporizadores: Garantir que todos os manipuladores de eventos estejam desconectados e os temporizadores limpos ao destruir o componente ou objeto.

// Limpeza correta do temporizador
const leakyObject = {
  data: 'some data'
};
let timerId;

function startTimer() {
  timerId = setInterval(() => {
    console.log(leakyObject.data);
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId); // Limpar temporizador
}

2. Nullificar referências: Nullificar explicitamente referências a objetos grandes ou não utilizados para que o coletor de lixo possa coletá-los.
3. Usar WeakMap e WeakSet: Para armazenar referências a objetos que podem ser removidos pelo coletor de lixo quando não tiverem outras referências fortes.
4. Otimizar estruturas de dados: Usar estruturas de dados ou abordagens mais eficientes (por exemplo, carregamento preguiçoso).
5. Limitar o tamanho de caches: Implementar estratégias de expulsão para o cache.
6. Atualizar ou substituir bibliotecas: Se o problema estiver em uma biblioteca externa, atualizá-la ou encontrar uma alternativa.

Após a correção, usar novamente as ferramentas de desenvolvedor para confirmar a ausência de fuga.