Javascript IE6 Memory Leak Problem with New Menubar.

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.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
One word: PageSpy

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).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gandalf97Author Commented:
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?

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

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.
Also, we won't be able to solve any problems without seeing the code...
gandalf97Author Commented:
Quick followup on PageSpy...

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

ZvonkoSystems architectCommented:
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?

ZvonkoSystems architectCommented:
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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.