Solved

Javascript IE6 Memory Leak Problem with New Menubar.

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

Background:
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.

Problem:
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!

Gandalf


PS.  We use IE6.  This won't change.
0
Comment
Question by:gandalf97
  • 4
  • 2
  • 2
  • +1
11 Comments
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 250 total points
ID: 18825243
One word: PageSpy
http:/M_1344026.html

0
 
LVL 15

Accepted Solution

by:
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:    http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html (JavaScript Memory Leaks) and here:  http://jgwebber.blogspot.com/2005/01/dhtml-leaks-like-sieve.html (DHTML Leaks Like a Sieve).
0
 
LVL 2

Author Comment

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

StanScott:
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.

<tangent>
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?
</tangent>

Regards,
Gandalf
0
 
LVL 63

Expert Comment

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

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Expert Comment

by:NickVd
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.
0
 
LVL 5

Expert Comment

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

Author Comment

by:gandalf97
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?

Gandalf
0
 
LVL 63

Expert Comment

by:Zvonko
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?


0
 
LVL 63

Expert Comment

by:Zvonko
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!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now