Memory leaks in JavaScript can easily happen. Let me explain.
Take a look at the following example script. It scans through the document body and makes all images clickable.
function makeImagesClickable() {
// finds all images in the document and
// puts them in the images array;
var images = $( 'img' );
// iterates through the images
images.each(function(){
// adds the click function to each image
$(this).click(function(){
// display's alert when image is clicked
alert( 'you have clicked on a image' )
})
})
};
// runs the function when the document is ready.
$(makeImagesClickable);
At first glance there seems to be nothing wrong with this script. However, if you inspected it closer, you would find that it contains a serious memory leak.
In JavaScript we don’t delocate ( destroy ) variables when we are done using them. Instead we rely on the Garbage Collector to destroy the variables when we no longer need them.
The Garbage Collector knows to do this when the variales are no longer part of any accessible scope.
In the next example script, the function foo creates the variable ‘c’, does some calculation and then returns the new value.
function foo ( a, b ) {
var c = a + b;
return c * 100;
};
After foo has finnished executing, the c variable is no longer accessible from anywhere in the scope, so the Garbage Collector can safely destroy it.
Lets return to the first script. Notice that the variable images is created and is accesible to the entire makeImagesClickable function’s scope.
Also notice that the "$(this).click(function ….. ) " attaches a function that shares the scope to the image object.
// adds the click function to each image
$(this).click(function(){
// display's alert when image is clicked
alert( 'you have clicked on a image' )
})
This means that even thought the images variable is not being used anywhere, it is still accessible in the scope of a function that we can access. The Garbage Collector won’t delocate the memory for the images variable.
If the images variable was very big or the leak happened a few times, it would adversely affect the browser’s performance.
So, to fix this issue. We will remove the function that leaks memory from the scope of makeImagesClickable.
function alertOnClick () {
// display's alert when image is clicked
alert( 'you have clicked on a image' )
};
function makeImagesClickable() {
// finds all images in the document and
// puts them in the images array;
var images = $( 'img' );
// iterates through the images
images.each(function(){
// adds the click function to each image
$(this).click(alertOnClick)
})
};
// runs the function when the document is ready.
$(makeImagesClickable);
Reference links
Garbage Collection
Atom Feed