Scripts importados que no se limpian de la memoria cuando se destruye la aplicación Angular.
Tengo una aplicación Angular, y he notado que cuando se cierra la página (y se destruye la aplicación) algunos scripts de importación persisten en la memoria. Esto es lo que me muestra el perfilador de memoria de Chrome después de abrir y cerrar mi aplicación dos veces desde la última instantánea de memoria:
Como se puede ver, hay un par de elementos de “vendor.js” en el “código compilado” que no son accesibles para el GC (la distancia es “-“).
Algo que descubrí es que, si elimino manualmente la etiqueta de script de “vendor.js” (es decir, abro la pestaña de Elementos en las herramientas de desarrollador, luego presiono Del para eliminar la etiqueta de script), y luego cierro la aplicación, ya no hay fuga de memoria.
Sin embargo, si intento eliminar la etiqueta de script desde la consola (usando, por ejemplo, document.body.getElementsByTagName(‘script’)[1].remove() que apunta al script correcto), obtengo una diferencia de instantánea de memoria que se parece a lo siguiente:
Entonces supongo que mis preguntas son:
1. ¿Qué está sucediendo aquí? ¿Por qué los scripts no se eliminan correctamente al cerrar la ventana?
2. ¿Por qué hay una diferencia entre eliminar manualmente el nodo de script del DOM en las herramientas de desarrollador vs hacerlo mediante javascript?
3. ¿Hay alguna solución?
No encontré mucho en la web. Me encontré con estos:
* https://github.com/angular/angular/issues/17637#issuecomment-387801113, pero la solución propuesta no hizo nada
* así como las cosas sugeridas allí: https://github.com/angular/angular/issues/17637#issuecomment-351094525
davy.ai
Respuesta
Explicación del problema
A partir de las capturas de pantalla proporcionadas, parece que hay un problema con la recolección de basura de Angular cuando se trata de los archivos de script
vendor.js. Estos scripts no se eliminan correctamente al cerrar la ventana, y parece que todavía están en memoria incluso si ya no son accesibles para el GC (como se ve por la distancia-en el perfilador de memoria).Diferencia entre eliminación manual y programática
La diferencia entre eliminar manualmente el nodo de script DOM en las herramientas de desarrollo versus hacerlo a través de JavaScript es que las herramientas de desarrollo utilizan un mecanismo diferente para eliminar el nodo que la eliminación programática. Las herramientas de desarrollo parecen estar utilizando algún tipo de mecanismo interno que elimina correctamente los archivos
vendor.js, mientras que la eliminación programática no lo hace correctamente.Solución
Parece que actualmente no hay una solución conocida para este problema. Se han sugerido algunos trabajos alternativos en los enlaces proporcionados, pero no parecen funcionar para todos. Es posible que este sea un error en Angular, o quizás una limitación del sistema de recolección de basura del navegador cuando se trata de scripts grandes. Si es posible, puede valer la pena considerar un enfoque diferente para cargar y administrar scripts en la aplicación para evitar este problema.