Garbage collection is the process in which many high-level languages (like JavaScript) clear the memory from unused objects. It is based on the fact that JavaScript has some reference tree from some global variable (e.g. the window or document in the browser).
A simple JavaScript garbage collection example
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[0] = 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.
Preventing GC from working in Javascript
We now know how the objects tree works in regards to GC. Let’s look at another example:
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.
Now we also know how we can create a memory leak in JavaScript…
Summary
In this short article, we learned about the essence of Garbage Collection in Javascript.
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.
This way, JavaScript keeps the memory clean and makes sure we do not overbloat it.
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:
How to make simple changes to your code to achieve the HIGHEST JavaScript performance possible
An easy, effective way to TEST your code and find places to make improvements
Practical tips on how to improve JavaScript MEMORY performance and reduce garbage collection
An expert advice on JavaScript from the leading programmers in the field
JavaScript Performance hacks and shortcuts to save you time and boost efficiency
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.
JavaScript Performance Optimization Tips
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.
Here’s how to find and fix memory leaks in JavaScript
JavaScript memory leaks can be easily found and fixed when you know what and where to look for. To spot a memory leak you need to follow those easy steps.
Practical steps to help you find and eliminate JS performance problems. A step-by-step guide to fixing common JavaScript performance bottlenecks in Web Apps.
How does Garbage Collection work in JavaScript?
Garbage collection is the process in which many high-level languages (like JavaScript) clear the memory from unused objects. It is based on the fact that JavaScript has some reference tree from some global variable (e.g. the window or document in the browser).
A simple JavaScript garbage collection example
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:
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…
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.
Preventing GC from working in Javascript
We now know how the objects tree works in regards to GC. Let’s look at another example:
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.
Now we also know how we can create a memory leak in JavaScript…
Summary
In this short article, we learned about the essence of Garbage Collection in Javascript.
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.
This way, JavaScript keeps the memory clean and makes sure we do not overbloat it.
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:
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.
JavaScript Performance Optimization Tips
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.
Here’s how to find and fix memory leaks in JavaScript
JavaScript memory leaks can be easily found and fixed when you know what and where to look for. To spot a memory leak you need to follow those easy steps.
How to optimize JavaScript garbage collection
Find out how garbage collection works in JavaScript and what exactly you need to fix in order to achieve the highest performance of your application.
Test and optimize JavaScript performance
Practical steps to help you find and eliminate JS performance problems. A step-by-step guide to fixing common JavaScript performance bottlenecks in Web Apps.
Archives
Categories