Menu
Adding nodes, while removing the old ones from the DOM, doesn't discard the old nodes from memory. (not all of them at least, without apparent reason).
(you already know this but anyway..)
right click the output area and inspect using Chrome developer tools.
Click on the Timeline tab and then at the circle (dot) on the upper left side to start recording.
now click on the body element, and it will start adding and removing items every 300ms
(the removed nodes should be garbage collected).
Stop the recording, extend the data-sampling zone to maximum, and you will see on the bottom half of the screen, in green, the nodes. the expected graph would be going up and down (where down means nodes have been discarded properly by the GC).
These 2 test pages are very primitive. of course in real life developers use templates which generates huge amount of text which should be converted into DOM and injected into the page, therefor the number of live DOM nodes in memory should be kept low, and removed ones must be discarded.
with jQuery - http://jsbin.com/lamigucuqogi/2/edit - After about 40 seconds the GC is getting crazy and stops collecting removed nodes, which causes inflation.
Naive way - http://jsbin.com/riref/2/edit - Also it seems nodes aren't being removed in a satisfying rate, and the number keeps growing and growing...
Why is this happening, and how should one properly remove NODES so inflation won't occur?
380
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node". See Document Object Model (DOM). More specifically, "Node" is an interface that is implemented by multiple other objects, including "document" and "element".
Use reference objects to avoid memory leaks Using the java. lang. ref package, you can work with the garbage collector in your program. This allows you to avoid directly referencing objects and use special reference objects that the garbage collector easily clears.
console. log() causes memory leaks but only when the console is opened. Normally users do not open the console. So it is totally safe to print any huge objects to the console.
You are mistaken. If you leave the example running for a significant period of time, then use the garbage can icon in the Dev Tools timeline to force a garbage collection you will observe that the nodes are freed.
Like any other JavaScript object, DOM nodes become eligible for GC when they become unreachable from GC Roots. Provided you do not retain any other references to removed nodes (in an array, for example), they become unreachable once removed from the main document.
However, they are not garbage collected immediately - a GC run can take time, during which the main browser thread is blocked, so it only runs periodically. What you are seeing is a period during which the JavaScript engine has decided not to run the garbage collector. You shouldn't be concerned by this - your code does allow the garbage collector to free memory when it eventually runs.
Highly recommended viewing - Addy Osmani's memory management masterclass.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
