Thursday, 2 December 2021

Imported scripts not cleaned up from memory when Angular application is destroyed

I have an Angular application, and have noticed that when the page is closed (and application is destroyed) some script imports linger in memory. This is for instance what the Chrome's memory profiler tells me after I opened and closed my application twice since the last memory snapshot:

memory snapshot

As you can see, there are a couple of vendor.js elements in (compiled code) that are not accessible to the GC (distance is -).

Something that I found is that, if I manually remove the vendor.js script tag (i.e. I open the Elements tab in the dev tools, then hit Del to remove the script tag), then close the app, there is no memory leak anymore.
However, if I try to remove the script tag from the console (using for instance document.body.getElementsByTagName('script')[1].remove() which targets the correct script), I get a memory snapshot diff looking like the following:

enter image description here

enter image description here

So I guess my questions are:

  1. What is happening here? Why are the scripts not properly cleaned up when closing the window?
  2. Why is there a difference between manually removing the DOM script node in the dev tools vs doing it via javascript?
  3. Is there a solution?

I didn't find much on the web. I came across these:



from Imported scripts not cleaned up from memory when Angular application is destroyed

No comments:

Post a Comment