tablas - ¿Cómo creo una pérdida de memoria en JavaScript?
obtener datos de una tabla html javascript (1)
No mantendrá el elemento creado y referenciado en ninguna parte; es por eso que no ve aumentar el uso de la memoria. Intente asociar el elemento al DOM, o guárdelo en un objeto, o configure onclick para que sea un elemento diferente que se quede. Entonces verás que el uso de la memoria se dispara. El recolector de basura vendrá y limpiará todo lo que ya no se pueda referenciar.
Básicamente un recorrido de tu código:
- crear elemento (el)
- crear una nueva función que haga referencia a ese elemento
- establecer la función para ser el clic de ese elemento
- sobrescribe el elemento con un nuevo elemento
Todo está centrado en el elemento existente. Una vez que no hay una forma de acceder al elemento, ya no se puede acceder al onclick. Entonces, como no se puede acceder al onclick, la función que se creó se destruye ... y la función tenía la única referencia al elemento ... por lo que el elemento se limpia también.
Alguien podría tener un ejemplo más técnico, pero esa es la base de mi comprensión del recolector de basura de JavaScript.
Editar: Esta es una de las muchas posibilidades para una versión filtrada de tu script:
<html>
<body>
</body>
<script>
var i, el;
var createdElements = {};
var events = [];
function attachAlert(element) {
element.onclick = function() { alert(element.innerHTML); };
}
function reallyBadAttachAlert(element) {
return function() { alert(element.innerHTML); };
}
for (i = 0; i < 1000000; i++) {
el = document.createElement(''div'');
el.innerHTML = i;
/** posibility one: you''re storing the element somewhere **/
attachAlert(el);
createdElements[''div'' + i] = el;
/** posibility two: you''re storing the callbacks somewhere **/
event = reallyBadAttachAlert(el);
events.push(event);
el.onclick = event;
}
</script>
</html>
Entonces, para el # 1, simplemente estás almacenando una referencia a ese elemento en alguna parte. No importa que nunca lo use, porque esa referencia se hace en el objeto, el elemento y sus devoluciones de llamada nunca desaparecerán (o al menos hasta que elimine el elemento del objeto). Para la posibilidad n. ° 2, podría almacenar los eventos en alguna parte. Debido a que se puede acceder al evento (es decir, al hacer events[10](); ) aunque el elemento no se encuentre por ningún lado, el evento sigue haciendo referencia a él ... por lo que el elemento permanecerá en la memoria y en el evento, hasta se elimina de la matriz.
Me gustaría saber qué tipo de código provoca fugas de memoria en JavaScript y creó el script a continuación. Sin embargo, cuando ejecuto el script en Safari 6.0.4 en OS X, el consumo de memoria que se muestra en el Monitor de actividad realmente no aumenta.
¿Algo está mal en mi script o esto ya no es un problema con los navegadores modernos?
<html>
<body>
</body>
<script>
var i, el;
function attachAlert(element) {
element.onclick = function() { alert(element.innerHTML); };
}
for (i = 0; i < 1000000; i++) {
el = document.createElement(''div'');
el.innerHTML = i;
attachAlert(el);
}
</script>
</html>
La secuencia de comandos se basa en la sección Cierre de la guía de estilo de JavaScript de Google: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Closures#Closures
EDITAR: aparentemente se ha corregido el error que causaba la fuga del código anterior: http://jibbering.com/faq/notes/closures/#clMem
Pero mi pregunta sigue siendo: ¿alguien podría proporcionar un ejemplo realista de código JavaScript que pierda memoria en los navegadores modernos?
Hay muchos artículos en Internet que sugieren que las pérdidas de memoria pueden ser un problema para las aplicaciones complejas de una sola página, pero me cuesta encontrar ejemplos que pueda ejecutar en mi navegador.