Postado no Google Webperf (London Webperf Group), 26 de agosto de 2014.
Os aplicativos da Web JavaScript eficientes devem ser suaves e rápidos. Qualquer aplicativo que interaja com os usuários precisa considerar como garantir que a memória seja usada com eficiência, porque, se consumido demais, a página falhará, forçando o usuário a recarregar. E você só pode se esconder no canto e chorar.
A coleta automática de lixo não substitui o gerenciamento eficaz da memória, especialmente em aplicativos da Web grandes e de longa duração. Nesta palestra, demonstraremos como gerenciar efetivamente a memória através do Devtools do Chrome.
E aprenda a resolver problemas de desempenho, como vazamentos de memória, pausas de coleta de lixo frequentes e inchaço geral de memória, coisas que realmente custam a energia.
Addy Osmani mostra muitos exemplos em seu ppt que causará vazamentos de memória no Chrome V8:
1) Exclua uma propriedade de objeto para desacelerar esse objeto (consumindo 15 vezes mais memória)
A cópia do código é a seguinte:
var o = {x: 'y'};
excluir boi; // Neste momento O se tornará um objeto lento
boi; //
var o = {x: 'y'};
o = nulo; // deve ser assim
2) Fechamento
Ao introduzir variáveis fora do fechamento no fechamento, esse objeto não pode ser coletado de lixo (GC) quando o fechamento terminar.
A cópia do código é a seguinte:
var a = function () {
var maior = nova matriz (1000000) .Join ('x');
Return function () {
retornar o maior;
}
} ();
3) DOM vazamento
Quando o COM original é removido, a referência do sub-nó não pode ser reciclada se não for removida.
A cópia do código é a seguinte:
var select = document.QuerySelector;
var Treeref = selecione ('#TREE');
// Na árvore Com, Leafref é um nó infantil de Treefre
var leafref = selecione ('#folha');
var corpo = selecione ('corpo');
body.RemoveChild (Treeref);
// A árvore não pode ser paga porque Treeref ainda está lá
//Solução:
treeref = nulo;
// A árvore ainda não pode ser reciclada, porque as folhas resultam que o Leafref ainda está lá
folha = nulo;
// Agora #tree pode ser lançado.
4) Timers Counting (Determination) Vazamento do timer
Os temporizadores também são lugares comuns onde ocorrem vazamentos de memória:
A cópia do código é a seguinte:
for (var i = 0; i <90000; i ++) {
var buggyObject = {
Callagain: function () {
var ref = this;
var val = setTimeout (function () {
ref.Callagain ();
}, 90000);
}
}
buggyobject.callagain ();
// Embora você queira reciclar, o cronômetro ainda está lá
buggyObject = null;
}
5) Memória de depuração
A ferramenta de depuração de memória do Chrome pode facilmente visualizar o uso e os vazamentos de memória:
Clique em gravar na linha do tempo -> Memória:
Para mais conteúdo, verifique o PPT original.