If you know the cause of the memory leak, it should be fairly easy to prevent it from being appropriate in JavaScript. In this article, the author Kiran Sundar and Abhijeet Bhattacharya will take you through all the basics of circular references in JavaScript, and show you why they can cause problems in some browsers, especially if the closures are combined. After learning about the common memory leak patterns that you should be aware of, you'll also learn a lot about how to deal with these leaks.
JavaScript is a powerful scripting language used to add dynamic content to a Web page. It is especially useful for daily tasks such as validating passwords and creating dynamic menu components. JavaScript is easy to learn and easy to use, but it can easily cause memory leaks in some browsers. In this introductory article, we explain how leaks in JavaScript are caused, show common memory leak patterns, and describe how to deal with them.
Note This article assumes that you are already very familiar with using JavaScript and DOM elements to develop WEB applications. This article is especially suitable for developers who use JavaScript for Web application development, and for customers interested in creating Web applications, as well as for browser support and for people who are responsible for browser troubleshooting.
Memory leaks in JavaScript
JavaScript is a garbage collection language, which means that memory is assigned to an object based on its creation and is retracted by the browser when no reference to the object is made. JavaScript's garbage collection mechanism is not inherently problematic, but browsers are somewhat different in how memory is allocated and restored for DOM objects.
Both Internet Explorer and Mozilla Firefox use reference counting to handle memory for DOM objects. In the reference counting system, each referenced object retains a count to learn how many objects are referencing it. If the count is zero, the object is destroyed and the memory it occupies is returned to the heap. While this solution is generally effective, there are some blind spots in circular references.
What is the problem with circular references?
When two objects are referenced to each other, a circular reference is formed, where each object's reference count value is assigned 1. In a pure garbage collection system, circular references are not a problem: if one of the two objects involved is referenced by any other object, both objects will be garbage collected. In a reference counting system, neither of these objects can be destroyed because the reference count can never be zero. In a hybrid system that uses both garbage collection and reference counting, a leak will occur because the system does not recognize the circular reference correctly. In this case, both the DOM object and the JavaScript object cannot be destroyed. Listing 1 shows a circular reference that exists between a JavaScript object and a DOM object.
Listing 1. A circular reference caused a memory leak
<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>
As shown in the above list, the JavaScript object obj has a reference to the DOM object, expressed as divelement. The DOM object has a reference to this JavaScript object, which is represented by Expandoproperty. Visible, a circular reference is generated between the JavaScript object and the DOM object. Because DOM objects are managed by reference counting, two objects will not be destroyed.