Javascript IE6 Memory Leak Problem with New Menubar.

Posted on 2007-03-30
Last Modified: 2008-02-01
Hello all,

As I have mentioned in other posts, I have inherited a rather large web application that primarily uses classic ASP and javascript.  It is so big that a lot of the "standard code" that is used on every page is loaded via includes.  Sometimes this is several layers deep and can be ASP, javascript, DHTML or some combination.  I have tried to use good coding practices but a lot of the code I inherited is full of script errors.  One such piece of code is my menubar, which I finally got permission to replace because it was supposed to be a relatively quick process.  It ended up opening a huge can of worms.

I found that when I implemented my new menubar, I lost about 8-9MB of memory with every click and the menubar itself loaded more and more slowly.  In no time at all my browser memory went from 60M to 260M.  So I researched memory leaks.  I found a lot of suggestions of coding practices to use.  Great.  Now I can improve my coding practices to avoid or minimize this problem in the future.  Some of the suggested solutions I found (like event-cache.js) even make this a lot easier.

But I have a problem *NOW*.  I have two menubar scripts.  The first one (menubarAPI4.js) has so many script errors, the other team members can no longer debug their script code without resorting to tedious and inefficient methods which don't work a lot of times because they run into problems with the menubar code.  The new menubar doesn't have the script errors but makes IE leak like a sieve.  I have tried a couple of "quick fixes" like adding code to the unload event of my page to set document.body = null (which didn't work).

Desired Solution:
1.  Plugs the leaks in the new menubar (jsDOMenubar from DynamicDrive).
2.  Easy and quick to implement.

Nice to have:
1. Addressed other leaks too.

I really need a good working solution for our Monday morning team meeting.  Thanks in advance!


PS.  We use IE6.  This won't change.
Question by:gandalf97
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1
LVL 63

Assisted Solution

Zvonko earned 250 total points
ID: 18825243
One word: PageSpy

LVL 15

Accepted Solution

stanscott2 earned 250 total points
ID: 18825276
Here's what could be going on.

Let's say you build up an HTML object and attach a lot of event handlers to it.

What happens when you unload the page?  What SHOULD be happening is that the browser not only clears out the HTML object, but the memory allocated to the events.  However, IE6 doesn't do this, which can be a big memory leak.

The trick is to clear all of your event handlers when the object unloads, which can be done by setting up a window.onunload routine.  I don't have my standard routine with me (not at work right now), but you can read more about this here: (JavaScript Memory Leaks) and here: (DHTML Leaks Like a Sieve).

Author Comment

ID: 18825376
I will look at PageSpy.  Thanks for the pointer Zvonko.

I have done a lot of reading over the last couple of days about IE and memory leaks and what causes them but thanks for the pointers to those two pages.  I did try a couple of things in a window.onunload function but they didn't work.  The other solutions I have seen so far require me to go through and make a lot of code changes.  While I *could* do this, my boss is getting to the point where he wants this RESOLVED and for me to get back to work on the stuff that was due a week ago.  Thus, my desire for a quick answer.  I'd like to see your "standard routine" for this.  It might be what I'm looking for.

On a side note:  (no points for this but I'll appreciate the answer)
This "Proposed Answer" vs. "Expert Comment" has probably been around for a while but can someone point me to or give me a quick explanation as to the difference?  When someone proposes a solution, can there be subsequent proposed solutions?  Why have this distinction?

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 63

Expert Comment

ID: 18825476
That feature is still not released in spite that it is already visible.
Simply ignore it.


Expert Comment

ID: 18825484
Sometimes the only way to fix a problem will require major code changes, there may not be a way around it.  When it comes to IE and memory leaks, you need to be on the look out for circular references, and clean up your even handlers.

To fix it, you may have to take more time than you're boss understands.  It's your job as the programmer to make him/her understand this.  After all, if I was the client and I received an application that leaks like a sieve  in IE I'd be getting my money back, even if I had to call a lawyer.

Expert Comment

ID: 18825491
Also, we won't be able to solve any problems without seeing the code...

Author Comment

ID: 18826018
Quick followup on PageSpy...

I have the trial version and am trying to figure out how to find the leaks with it.  Suggestions?

LVL 63

Expert Comment

ID: 18826216
The most important view is the first tab of PageSpy. Ther you see all html elements that are created by script and that you normaly do not see in any sources when the menu is created dynamicaly.
You see also there all style attributes and event handler settings as text.

Beside that you can look in the tabs labeld Objects and DOM all elemenst in a tree taht are at that moment still accessible.
My assumption is that your elements are created and created and created, and not deleted or reused. That looks to you as memeory leak.

The best tab is the last tab: Run
You can at any time call statements that are immediately evaluated and executed for that winow page that is observed. That mean, you start PageSpy for some of your browser windows. Execute in the Run tab some functions by typing its function call and click Execute. Or you create new Elements, or you delete the elements by the delete statement.

Is that helping you?

LVL 63

Expert Comment

ID: 18826234
One more note: just two questions ago I was able to look inside a page and change its behaviour even when that page cannot be stored localy on my disk because it used AJAX calls for its content. But with the Run tab I was able to redefine one of the event handler called functions and trace the execution of that function to the failing statement even when that page never was stored on my disk. Isn't that fantastic!

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question