Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does IE leak memory when wrapping an HTML response in a jQuery object?

I'm trying to figure out why IE is leaking memory when wrapping an AJAX-ly requested HTML page in a jQuery object for processing. The user may visit the page and let it sit for many minutes or hours, so the page uses jQuery's ajax method a few times a minute to get new data, and then I replace important parts of the page with the new pre-rendered data.

At this point, I've narrowed it down to a single call - when $(data) is invoked to wrap the HTML string, memory spikes a little, and doesn't ever seem to be garbage collected. Over time many hundreds of MB are used and I'm forced to reload the page or restart IE.

This fiddle is able to reproduce the issue. It uses AJAX to request a page, and then calls $(data) in a tight loop in order to exaggerate the leak. Chrome and Firefox both seem to react as I'd expect (memory is reclaimed), but IE is behaving badly. Surprise.

Using Process Explorer, I see memory consumption spike dramatically after running the above fiddle just two times.

enter image description here

I'm currently using IE9 in standards mode.

Why is this happening? Is there a workaround?

Update

Here's a fiddle that demonstrates the issue without using AJAX.

like image 299
Mark Carpenter Avatar asked Mar 14 '13 18:03

Mark Carpenter


1 Answers

I've found a workaround the the problem I described above.

In troubleshooting this, I tried a variety of things to prevent the leak from happening. The solution that I came up with was to ditch using $.ajax to retrieve the data and $() to wrap the results. Instead I used $('#destination').load('sourceUrl #selector') (see documentation) to shove the data into a hidden div and then manipulate the result that way.

Turns out $.load uses $.parseHTML under the covers to manipulate the results and shove them in the specified location (and $() apparently doesn't). See here for source line.

  • $(htmlText) leaks
  • $(bodyText) doesn't leak
  • $.parseHtml(htmlText) slowly leaks(?)
  • $.parseHtml(bodyText) doesn't leak

Here's a fiddle to demonstrate.

I don't know why it behaves the way it does, but the short of it seems to be: avoid parsing full HTML documents whenever possible.

like image 66
Mark Carpenter Avatar answered Nov 17 '22 13:11

Mark Carpenter