Publicado en Google WebPerf (London Webperf Group), 26 de agosto de 2014.
Las aplicaciones web de JavaScript eficientes deben ser suaves y rápidas. Cualquier aplicación que interactúe con los usuarios debe considerar cómo garantizar que la memoria se use de manera eficiente, porque si se consume demasiado, la página se bloqueará, lo que obliga al usuario a recargar. Y solo puedes esconderte en la esquina y llorar.
La recolección de basura automática no sustituye a la gestión efectiva de la memoria, especialmente en aplicaciones web grandes y de larga duración. En esta conferencia, demostraremos cómo gestionar de manera efectiva la memoria a través de DevTools de Chrome.
Y aprenda a resolver problemas de rendimiento, como fugas de memoria, pausas de recolección de basura frecuentes y hinchazón de memoria general, cosas que realmente le costan la energía.
Addy Osmani muestra muchos ejemplos en su PPT que causarán fugas de memoria en Chrome V8:
1) Elimine una propiedad de objeto para ralentizar este objeto (consumiendo 15 veces más memoria)
La copia del código es la siguiente:
var o = {x: 'y'};
eliminar buey; // en este momento o se convertirá en un objeto lento
buey; //
var o = {x: 'y'};
o = nulo; // debería ser así
2) Cierre
Al introducir variables fuera del cierre en el cierre, este objeto no puede ser recolectado de basura (GC) cuando termina el cierre.
La copia del código es la siguiente:
var a = function () {
var más grande = nueva matriz (1000000) .Join ('x');
Función de retorno () {
regreso más grande;
}
} ();
3) Fuga de DOM
Cuando se elimina el COM original, la referencia del sub-nodo no se puede reciclar si no se elimina.
La copia del código es la siguiente:
var select = document.Queryselector;
var treeref = select ('#árbol');
// En el árbol com, Leafref es un nodo infantil de TreeFre
var LeafRef = select ('#hoja');
var cuerpo = select ('cuerpo');
Body.removechild (Treeref);
//#El árbol no se puede pagar porque Treeref todavía está allí
//Solución:
treeref = nulo;
// El árbol no se puede reciclar todavía, porque las hojas de la hoja de la hoja todavía están ahí
Leafref = nulo;
// ahora se puede lanzar #tree.
4) Fuga del temporizador de conteo de temporizadores (determinación)
Los temporizadores también son lugares comunes donde se producen fugas de memoria:
La copia del código es la siguiente:
para (var i = 0; i <90000; i ++) {
var buggyObject = {
Callagain: function () {
var ref = this;
var val = setTimeout (function () {
ref.callagain ();
}, 90000);
}
}
buggyObject.callagain ();
// Aunque quieres reciclar, el temporizador todavía está ahí
buggyObject = null;
}
5) Memoria de depuración
La propia herramienta de depuración de memoria de Chrome puede ver fácilmente el uso de la memoria y las filtraciones de memoria:
Haga clic en Registro en la línea de tiempo -> Memoria:
Para obtener más contenido, consulte el PPT original.