This is a short(ish) story of an epic battle between a team of web application developers and IE 7. We were developing a pretty large IE-only application that used a few Flex-based components to provide data visualization capabilities. We were making good progress until well into the testing cycle, when one of the testers came back with a report of IE crashing on a regular basis while using the Flex components. Uh-oh.
I took a closer look at the issue and initially was not able to replicate the issue. The tester sent me some screenshots showing more details of the crash, including a screenshot showing memory usage. System memory was high, but not outrageous. Still, I suspected a memory leak.
A quick bit of background as to how this application works. There are a number of screens which open up an overlay containing our Flex charting application. Those overlays basically consist of a DIV element set up so that it can display some custom content, and also block any clicks to the surrounding page (a modal layer using Yahoo’s UI library). Every time this modal window is opened, it writes a bunch of markup and script into the DIV to set up the Flex app, every time it is closed, it clears out the DIV contents and destroys the app.
Eventually I stumbled on the fact that if I opened and closed this panel 10-15 times (even between visiting other pages), IE would crash. Now at least I had a simple test case to do testing. I did quite a few tests to see if perhaps the Flex application itself was leaking, but the Flash player’s garbage collection seemed to work fine. I used Microsoft’s DebugDiag tool and a tool called sIEve to take a look at what was going on. With sIEve, I saw that there were a whole schwackload of variable handles pointing to each Flex application (22-24, depending on the situation). I would have expected only one or two. I also saw by just monitoring the Windows task manager that each time I opened/closed the modal panel, IE’s memory profile would increase by anywhere from 30-50MB.
I tried many techniques to try to clear these handles (use removeElement on parent and/or child, set handles to null, transfer element to another DIV and delete, set expandoProperty to null), but none worked. I also tried to see what scenarios resulted in a proper cleanup. When I used a popup window, no memory leak occurred. When I used an iframe, no memory leak occurred. Only when I put the Flash application in a DIV element would the leak occur.
for (var prop in flashHnd)
if (typeof(flashHnd[prop]) === "function")
flashHnd[prop] = null;
You can better see how to implement it by taking a look at the source to the SWFUpload project. Take a look at the cleanUp method.