Circular references to DOM objects on an HTML page cause a memory leak (830555)



The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 6.0
  • Microsoft Internet Explorer (Programming) 5.5
  • Microsoft Internet Explorer (Programming) 5.01

SYMPTOMS

A memory leak occurs when you refresh an HTML page that uses Microsoft JScript code that contains circular references to objects in the Microsoft Internet Explorer Document Object Model (DOM).

CAUSE

This memory leak occurs because DOM objects are non-JScript objects. DOM objects are not in the mark-and-sweep garbage collection scheme of JScript. Therefore, the circular reference between the DOM objects and the JScript handlers will not be broken until the browser completely tears down the page. This memory leak will end when the browser opens a new Web page or when the browser window is closed.

RESOLUTION

To resolve this problem, avoid circular references to Internet Explorer DOM objects in your Jscript code. To work around this problem in the sample code that is included in the "More information" section of this article, make the following change:
function hookup(element)
{
    element.attachEvent( "onmouseover", mouse);
}
function mouse () 
{
}
With this change, the mouse function is not a closure object that leads to a circular reference.

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed in the "Applies to" section.

MORE INFORMATION

Steps to reproduce the behavior

  1. Paste the following code in Notepad, and then save the file as Test.htm:
    <HTML>
    <HEAD>
    <script language="javascript">
    function initpage()
    {
    window.setTimeout("window.location.reload()", 500, "javascript");
    }
    </script>
    </HEAD>
    <body onload="initpage()" >
    <div class='menu' id='menu'></div>
    <script language='javascript'>
    hookup(document.getElementById('menu'));
    function hookup(element)
    {
    element.attachEvent( "onmouseover", mouse);
    	function mouse () 
    	{
    	}
    }
    </script>
    </body>
    </HTML>
    In this code, the handler (the mouse function) is nested inside the attacher (the hookup function). This arrangement means that the handler is closed over the scope of the caller (this arrangement is named a "closure"). The handler maintains a reference to the variable element. In this case, the variable element is the div HTML element with the ID parameter that is set to menu. But the div element refers to the handler. This reference is a circular reference.
  2. Open Test.htm in Internet Explorer.

    Notice that the memory usage in Windows Task Manager continues to increase every time the page refreshes itself.

REFERENCES

For more information, visit the following Web site:For more information about Internet Explorer leak patterns, visit the following Microsoft Developer Network (MSDN) Web site:

Modification Type:MajorLast Reviewed:5/12/2006
Keywords:kbfix kbbug KB830555 kbAudDeveloper