0
210
Vistas¿Por qué se producen pérdidas de memoria al ejecutar un evento en JavaScript?
Tengo en mi html un botón con una identificación llamada "btn".
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Index</title> </head> <body> <button id="btn">Click!!!</button> <script src="./script.js"></script> </body> </html>La finalidad es que cada vez que se presione muestre u oculte una imagen,
Al click , se crea una imagen a partir de una plantilla, su contenido se extrae y se inserta en el DOM después de que el botón y la plantilla se establezcan en null , cuando se presiona el botón nuevamente, verifica si la imagen ya está en el dom, si lo es, lo elimina y la referencia lo establece en null , este es el script.js :
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { let img = document.getElementById('img'); if (!img) { let template = document.createElement('template'); template.innerHTML = '<img id="img" src="./img.jpg" alt="Image"/>'; btn.after(template.content); template = null; } else { img.remove(); img = null; } }); Cuando se dispara el evento, la memoria crece cada vez más, no debe aumentar, debe permanecer más o menos constante, ya que, ¿las referencias se eliminan una vez que finaliza el alcance de la función? ¿O no? 
Después de esperar aproximadamente de 1 a 2 minutos, la memoria disminuye recientemente, pero aún no vuelve al valor inicial (es decir, aproximadamente 16,000 K, aunque la imagen no está en la memoria ni en el DOM):
¿Qué está pasando? ¿Deberían eliminarse automáticamente las variables de un alcance cuando finaliza? ¿o no se eliminan en el momento exacto en que finalizó el alcance? ¿Estoy entendiendo algo mal? Espero que puedas ayudarme a entender :)