Resolving Circular Reference Related Memory Leaks in JavaScript
JavaScript developers must understand the root cause of memory leaks and take reasonable measures to deal with them. Circular references are one of the main causes of memory leaks, especially in older browsers.
Join the DZone community and get the full member experience.
Join For FreeJavaScript is a dynamic, garbage collection programming language. It allocates memory for objects when they are first created and releases that memory after any references to them are destroyed. This is one of the biggest factors that differentiates JavaScript from C++ and other C-based programming languages. It is also one of the main reasons JavaScript is widely used for recurring web-based applications, such as online stores and e-commerce platforms like Shopify.
Unfortunately, memory isn't always properly reallocated. If object references are improperly terminated, memory leaks can develop. Over time, they can consume too much memory for the application to continue to run seamlessly.
JavaScript developers must understand the root cause of memory leaks and take reasonable measures to deal with them. Circular references are one of the main causes of memory leaks, especially in older browsers.
The Problem With Browsers
Be wary with circular references for Internet Explorer and Firefox users.
In JavaScript, browsers record references to every object. If all references to an object are broken, the object is destroyed and memory is reallocated back to the heap.
Unfortunately, the memory isn’t always returned to the heap if references with other objects are formed. Microsoft provides a brief overview of the issues that arise if references to DOM aren’t broken.
"As described in detail in Understanding and Solving Internet Explorer Leak Patterns, the JScript garbage collector in previous versions of Windows Internet Explorer manages the lifetime of JScript objects but not of DOM objects. As a result, the JScript garbage collector cannot break circular references between DOM objects and JScript objects, and memory leaks occur. In Microsoft Internet Explorer 6, these circular references are broken when the Windows Internet Explorer process terminates. In Windows Internet Explorer 7, these circular references are broken when users navigate away from the page that contains the leaks."
- Microsoft Documentation
In other words, a circular reference occurs if two separate objects pass references to each other. Google Chrome does not count circular references, so objects are usually destroyed when the object is no longer needed. However, Internet Explorer and Firefox use circular references as part of their reference count.
As a result, objects may continue to exist and consume memory long after they are needed. Newer versions of these browsers are better at discounting circular references, but issues still occur. Developers need to take additional steps to prevent memory leaks.
Before JavaScript developers can resolve memory leaks, they must obviously identify them. They must monitor their code carefully for references between unrelated objects. IBM provides an example in one of their tutorials on the topic:
x
<html>
<body>
<script type="text/javascript">
document.write("Circular references between JavaScript and DOM!");
var obj;
window.onload = function(){
obj=document.getElementById("DivElement");
document.getElementById("DivElement").expandoProperty=obj;
obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
};
</script>
<div id="DivElement">Div Element</div>
</body>
</html>
Fortunately, there are some solutions to circular reference related memory leaks. The most straightforward approach is to assign the null value to the elem property. This breaks the circular link and keeps the handler from referencing the DOM any longer. Without a reference to DOM, the browser is instructed to stop reserving memory for the object.
Ilya Kantor of JavaScript Tutorial states that the following application can be resolved by creating and calling the following function:
xxxxxxxxxx
function setHandler() {
var elem = document.getElementById('id')
elem.onclick = function() { /* ... */ }
}
You can add bigString = null to your code when you want to terminate the object.
Rigorously Monitor Circular References in Your JS Code
While new browsers are more adept at resolving memory leaks caused by circular references, problems often arise with older browsers. These types of memory leaks can still occur with newer versions of Internet Explorer and Firefox as well, so it’s important to monitor code carefully to identify circular references.
Opinions expressed by DZone contributors are their own.
Comments