Tech H8rs Internet Explorer memory leaks with jQuery

Posted By

Web developers can understand subtle differences between browsers, but some are just so far out in left field that no one quite knows what the original developers of the engine were thinking when they wrote it. Such as the case many times with the infamous M$ Internet Explorer, aka Internet Exploder, aka Infected Explorer.

Recently, a coworker and I stumbled onto a bit of an issue with this regarding IE's memory usage and javascript. We were using the javascript library called jQuery in an online application, and so we need to keep it updated. After a recent update, we were getting a strange bug; of course only in IE.

Example of javascript code that created the issue.

$('#logoLockerSelection')
        .dialog({
            modal: true,
            autoOpen: false,
            width: 670,
            height: 400
        });
        
        $('.logoSelectButton')
            .css('cursor', 'pointer')
            .click(function(e){
                
                $('#logoLockerSelection').dialog('open');
                return false;
            });



The use of a jQuery Dialog window would be perfectly fine in Firefox and Opera, but when displaying the window in IE, memory usage would spike to nearly 6-times the original footprint of IE, from approx. 50MB to over 300MB with CPU taxed at 100%.

<%image(20090415-screenshot-winxp-ie_css_issue.png|744|539|Screenshot of System Processes)%>

This would continue for up to 40 seconds, then the window would open and usage would drop back down. I spent some time trying to debug the issue, my only resolution was disabling the modal option would prevent this lag. After discovering this, I disabled the modal option and all was fine again.

However, we needed the modal functionality on a different page, which I was not the particular maintainer for; that page was maintained by a coworker. After some time of investigating, I eventually found a post mentioning something about IE and javascript-controlled divs that have an opacity on them. "No way, CSS would be causing 250MB+ of memory to be used on a webpage," was my comment to myself as I walked outside for a bit of fresh air so I wouldn't destroy my monitor.

Sure enough, my coworker installed an updated theme using jQuery's Theme Roller, and the memory inflation issue disappeared. Moral of the story, (besides to immediately install Ubuntu/SuSE on any M$ machine you find), keep your CSS up-to-date along with javascript libraries! Else you'll end up requiring the memory used by World of Warcraft just for the user to open up color selections...

Tags: Internet Explorer JQuery Microsoft Web Development