Como encontrar fugas de memória JS?

Nas Ferramentas de desenvolvimento do Google Chrome, existe uma página Timeline-Memory:

Podemos ver a memória ocupada por ela. Também há perfis-memória, onde podemos tirar uma foto e ver o que está lá dentro. Instantâneos podem ser comparados uns com os outros:

A maior parte do tempo, não te diz nada. Mas pelo menos você pode ver quais objetos estão se acumulando, e provavelmente a estrutura do vazamento.

Outra forma é usando 'Task Manager' aqui está um artigo sobre este assunto:

Http://www.javascriptkit.com/javatutors/closuresleak/

O Chrome agora oferece ferramentas muito melhores para encontrar vazamentos de memória, do que no momento da maioria das respostas.

Aqui está para encontrar fugas de memória em javascript com um navegador Chrome recente:

1. Carregue em F12 para abrir as ferramentas de desenvolvimento e ir para a Página de memória .

1. Escolha um recurso ou uma parte do seu aplicativo que você quer inspecionar para vazamentos. Por exemplo, quando uma janela é aberta e fechada novamente, a memória usada por ela deve ser libertado.

2. Faça a acção (por exemplo, abrir uma janela) que deseja verificar se há fugas de memória uma vez, para que os potenciais serviços globais possam ser carregados. Isso impede que esses objetos, que são intencionalmente preservados de aparecer como vazamentos.

3. Agora seleccione a linha temporal da atribuição de Registos e carregue em Iniciar . Repita a ação que você quer verificar para vazamentos algumas vezes. Então, por exemplo, abra uma janela, feche-a e repita. Enquanto fazes este desenho cromado a linha temporal com barras parcialmente cinzentas ou azuis. Normalmente você vê uma barra para cada vez que você realizou a ação em sua página. Quando a barra de várias iterações anteriores da acção permanece parcialmente azul, normalmente significa que há uma fuga de memória. A parte azul da barra representa a memória que foi alocada neste momento e ainda não foi liberada novamente. pare a gravação pressionando o ponto vermelho no canto superior esquerdo do programador ferramenta.

Quando você vê potenciais vazamentos, você tem que inspecionar esta parte da linha do tempo para encontrar a fonte. Selecione uma parte da linha do tempo que é algumas iterações de suas ações no passado. E o Chrome irá mostrar uma lista de tipos de objetos que ainda estão presentes na memória. A coluna do tamanho retido dá-lhe uma impressão da quantidade de memória ainda utilizada. Navegue em um dos tipos de objetos e selecione um objeto. Se fizer isso, o a lista de servidores aparecerá abaixo.

1. A lista de retentores mostra os objetos "pai" que referenciam o objeto selecionado. Agora você precisa olhar para os servidores e seu código para entender por que a memória não foi liberada. Por exemplo, na imagem você vê o objeto do tipo escopo. A segunda linha diz que o escopo é " context initformat ()". O problema era que o initFormat era um ouvinte de eventos que não estava livre após uma janela foi deixado.

2. Depois de você corrigir o seu código verificar se o problema foi resolvido. Refresque a página e repita os passos 3 a 6 novamente. Se você nunca verificou para vazamentos de memória antes não é improvável que você encontrar vários problemas.

Dicas adicionais:

Às vezes, há esconderijos que retêm uma parte da memória. Normalmente podes ignorá-los.
• Quando você vê o HTMLDivElement ou outros elementos DOM na lista de tipos de objectos têm um olhar. Se os objetos desta lista são realçados vermelho, isso significa que eles não estão mais presentes em sua página. Isto significa que devem ser referências algures no código. Pode ter-se esquecido de separar um ouvinte de eventos.
• Leia sobre fugas de memória em geral, para que possa identificá-las mais rapidamente no seu código.

Achei este artigo muito perspicaz:

Http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

Ele cobre as ferramentas de desenvolvimento chrome extensivamente e explica muito bem como ir sobre quando sua aplicação parece ter problemas de memória.

Aqui está um post muito bom sobre como encontrar vazamentos de memória usando as ferramentas de desenvolvimento do Google: http://gent.ilcore.com/2011/08/finding-memory-leaks.html

Aqui está outra boa página da web sobre isso: http://javascript.crockford.com/memory/leak.html

Se estiver a desenvolver objectos de scripting reutilizáveis do lado do cliente, mais cedo ou mais tarde irá ver-se a detectar fugas de memória. As Chances são de que o seu navegador vai sugar a memória como uma esponja e você dificilmente será capaz de encontrar uma razão pela qual a sua adorável capacidade de resposta DHTML diminui severamente após visitar um par de páginas dentro do seu site.

Um desenvolvedor da Microsoft Justing Rogers descreveu padrões de vazamento em seu excelente artigo.

Nisto artigo, vamos rever esses padrões de uma perspectiva ligeiramente diferente e apoiá-lo com diagramas e gráficos de Utilização da memória. Vamos também introduzir vários cenários de fuga mais subtis. Antes de começarmos, eu recomendo vivamente que você leia esse artigo se você ainda não leu.

Porque é que a memória vaza?

O problema da fuga de memória não se limita apenas ao Internet Explorer. Quase qualquer navegador (incluindo mas não limitado a Mozilla, Netscape e Opera) irá vazar memória se você fornecer condições adequadas (e não é assim tão difícil de fazer, como veremos em breve). Mas (na minha humilde opinião, MMMV etc.) Internet Explorer é o rei dos leakers. Não me interpretes mal. Eu não pertenço à multidão gritando "Hey IE tem vazamentos de memória, confira esta nova ferramenta [link-to-to-tool] e veja por si mesmo". Vamos discutir como o Internet Explorer é ruim e encobrir todas as falhas em outros navegadores".

Cada navegador tem os seus próprios pontos fortes e fracos. Por exemplo, o Mozilla consome demasiada memória no arranque inicial, não é bom nas operações de string e array; o Opera pode falhar se escrever um programa DHTML ridiculamente complexo que confunde o seu motor de renderização.

Apesar de nos concentrarmos nas situações de fuga de memória no Internet Explorer, esta discussão é igualmente aplicável a outros navegadores. Aqui está uma descrição completa do conceito de fuga de memória...

A partir daqui.