Let’s assume you have some global variable. In the browser it can be `window`.
`window` holds `document`. `document` in turn holds a reference to `children` (among other properties) – it usually has only `html` as a child. `html` would have `head` and `body` as children. `document.body.children` will hold the direct children of `body`.
The same goes for every DOM element. Eventually, we have a tree that looks like this:
Let’s assume we severe the `header` from the body in the tree by doing something like:
document.body.children = null;
This line of code effectively tells the body’s children array to stop referencing the first (in our case, the `header`) element.
If this was the only reference to the `header` element, GC would have gone ahead and cleared it from memory. That’s because of how GC works – it goes over all the objects in the objects tree (here starts in `window`) and marks the ones that have no references from other objects in the code.
The thing is – body has several more references to the `header` element. For instance `body.firstElementChild` also references `header` in our case. So the GC mechanism will not mark `header` for removal from memory even though we removed it from the array.
We could do something else though…
document.body = document.createElement('body');
The code above will replace the whole body element. This effectively clears the screen… It also removes any reference to `body` and its children from the document. Now GC will find no reference to the old `body` or any of its children – and they will be removed from memory.
We now know how the objects tree works in regards to GC. Let’s look at another example:
const myBody = document.body; document.body = document.createElement('body');
In this case, we kept a reference in our code to `document.body`. As long as `myBody` is kept, `body` still has a reference. In this case, it’s not enough to just replace the `body` in the `document`. We also have to make sure `myBody` is disposed of.
There is a “tree” of objects originating from some root object. In the browser it will be the `window` global object. In Node.js, the Garbage Collector starts from the `global` object.
It utilizes 2 main strategies that solve the problem of clearing unreferenced variables.
The Garbage Collector walks over the objects in memory and finds out which object has no reference in that tree. These “rootless” objects are marked for sweeping and are removed from memory.
You should beware of memory leaks – which are mostly unhandled references to objects we thought we unreferenced. The `myBody` example above, in which we kept a reference to `body` before replacing it in the document, prevented the Garbage Collector from marking the old `body` for sweeping and effectively left it in memory even though we might not need it anymore.
Sign Up for our FREE newsletter and get our best articles delivered to you by e-mail
What you will learn:
- An easy, effective way to TEST your code and find places to make improvements
Enter your name and email to access your FREE membership
*** We take your privacy very seriously. We hate spam as much as you do, so rest assured that your contact details will never be shared with a third party.
Easy ways to test and improve Node.js performance
Here’s how to measure Node.js code efficiency and significantly boost Node’s performance. Simple tips that will improve your Nodejs code CPU and memory consumption.