JQuery :: Memory Leak With 1.6.1 Ajax And Firefox 4.0.1?
May 28, 2011
Attached is a sample html file (named jqmleak.html - rename it to remove the txt extension and drop it into your web server to test for yourself) that I've put together to demonstrate a memory leak with the $.ajax function in jQuery 1.6.1 when run in Firefox 4.0.1. The file loads jQuery 1.6.1 from the Google API CDN. Next, a simple function is defined that runs $.ajax to request the html file itself. This function is then set to run once every second using setInterval.
In Firefox 4.0.1, on both Win XP and Linux (ubuntu 10.10, 64-bit), I can watch the amount of memory consumed by Firefox gradually rise. It takes a few minutes for the problem to be observed, because initially the memory will decrease with no other activity in the browser. Then after about 5 minutes or so, I can watch the memory used by Firefox slowly but steadily increase. I can use the handy 'about:memory' tool in Chrome to monitor this alongside other browsers. Chrome, Opera, and IE do not exhibit the same problem with this test. Their memory usage will vary within a range of about 2 or 3 mb, but over a long period of time they do not increase their total amount of memory used. This problem is only happening in Firefox 4.0.1 as far as I can tell (I also used safe mode in Firefox to make sure no plugins were interfering with the test). I have tried both GET and POST methods with the $.ajax call, and with the cache setting both enabled and disabled. The result is the same.
Is this a jQuery problem, or maybe instead a bug with Firefox? I see similar bugs reporting memory leaks in other situations, but usually specific to IE. I was about to report a bug for this, but I thought I'd check here first to see if anyone can duplicate this problem, and/or point out what I should do to prevent the memory leak in Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function TextScroll(scrollname, div_name, up_name, down_name, top_name){ [Code]...
When I use mouse wheel in Firefox to scroll contents of the DIV, memory usage in Firefox goes through the roof. Code above is a fully working page, if anyone would like to see what's up, just load it up, and start moving your mouse wheel in the area with text. You don't actually have to scroll the text, just moving the wheel back and forth in that DIV will do. Memory usage will start going up quite fast, and after you stop moving the wheel, it will finally come down a bit after a short while. I've highlighted in red the line where mousewheel event is registered for Firefox. I'm not sure if it's really a problem, but since Opera and IE don't have any strange memory usage, and Firefox does, maybe I did something wrong. In everyday use it shouldn't matter [don't expect to have kilometers of content to scroll], but anyway, it is a bit unsettling.
I have started using jQuery recently and I am having a problem with IE leaking memory when performing a $.getJSON() request at intervals. To test the problem I set up the code to run every second. The only code I currently have running is the ajax request as below:
If I leave the above running the Memory Usage climbs by about 5mb a minute in IE but is ok in Firefox. I am using jquery-1.4.2. Has anyone come across this before?
I've been putting together a small pet project. Once it was finished i realised it had a gigantic memory leak inside of it. I tried to read up on the subject, but couldn't find the source of the problem via the articals.
This site is very simple, so I'd think idenifying (and hopefully fixing) the problem would be easy. Here is the relavent portions of JS (followed by links to the full page incase you need to see that): Code:
I was wondering how good is JavaScript with memory management. I have an object called MANAGER that has a list of other objects, each one managing a single DOM nodes, etc. In my implementation of MANAGER.reset(), I simply recreate my MANAGER.object_list = new object(); and do a single MANAGER.domnode.innerHTML = '' as apposed to getting my hands dirty. Is my app leaking memory?
Internet Explorer leaks memory when I update a div container using innerHTML, this does not occur in firefox. This would not be a problem except the webpage is required to be left on for weeks on end without being restarted. I presume the issue with innerHTML is that Internet Explorer apparently parses what you give it and then decides on how to construct the dom elements itself, so never truely creates what you give it.
I know that the innerHTML is the problem as I have successfully narrowed down the leak to that line. It only leaks memory when I assign content to the innerHTML of my containing DIV. Appending a text node, for example, with the exact same information to the same div does not leak. Note I have also tried using such existing AJAX packages like Prototype etc. but to no avail.
I need to do it this way as my XML documents are styled using an XSL stylesheet and then transformed using transformNode [I will omit details regarding firefox as there is no problem there]. I have looked into transformNodeToObject as a way to get a dom object that I originally assumed could be appended [as a child] to my containing element. This did not work and gave me compatibility errors.
I suppose I am either looking for someone who has solved this problem, or who has an acceptable work around. Or someone to say that it cannot be solved.
Do the latest browsers still need this? I could find an article about IE8 which states that its garbage collection has improved so circular references shouldn't be a big problem any more.Reason for asking is that I maintain an JavaScript / AJAX framework and we are currently optimizing our code which contains a lot of code to remove references from and to the DOM and to remove event listeners.
I am working with Netscape 7.0 and need to bind a <divwith the innerHTML property. More specifically, I need to bind a GridView in the div in question. I am binding the div with some hardcoded data (a table, which is the HTML equivalent of a GridView). Is there a way with javascript to dump the memory used by a DOM object (the div that I am binding with innerHTML)? When i just receive the variable in javascript, it doesnt seem to leak. I have tried removing and adding the div each time I bind to it, but it still leaks.
I have a page that dynamically loads and unloads whole sections and creates complex links between various objects and have never been sure exactly what happens when an object that is being observed is deleted from the DOM. Since there is no longer any link to deleted objects, the listener objects obviously won't receive any updates, but do the underlying "listener" connections get purged as well? I guess it would depend on whether the listening mechanism is part of the listened-to object or is maintained in a separate area of the browser.
I have a jquery based system with ajax calls instead of page refreshes. Every time I return some ajax content, it replaces the content on the main div.
function execcmdcallback(data, textStatus, XMLHttpRequest) { $("#divmain").html(data); data = null; }
Each time this executes, the browser memory increases by about 600-900kb. Can anyone suggest a way of doing this where the old memory is freed so there is no significant increase in browser memory on each ajax call ?
I've studied this a bit, [URL]..., but I have to admit I don't quite understand it I see the same issue on IE8, FF and Chrome. FF comsumes less memory per ajax call and frees some memory seconds later, but still the total working set is increasing on each call by 300k in FF and 600 to 900 in chrome and IE
My AJAX script runs fine on IE and Opera, but in firefox memory usage raises exponently (sript processes text, more text I use, more memory needed... when I use up to 1000 words, it takes 2 GB RAM on Firefox, while few mb on IE and Opera only).
I have the AJAX-script. It eats memory about 4Kb per one callback. Script reflects messages from server application in real-time. I form messages, and put them into the iframe. If mesages more than 40 last message delete. Can you check the script and say about my mistakes? Code:
I've been searching the web for a while now, and I haven't come across a conclusive solution for memory leaks due to replacing nodes with frequent AJAX updates. I wrote a class that pulls an RSS feed frequently (e.g. every 5 seconds) and updates an HTML element with new information. In the process, it removes the old nodes and replaces them with new ones. It works fine visually. The only problem is that it has terrible memory leak complications; when I put the script on to run, it increases the memory usage by about 1MB every few seconds at an accelerated 1000-ms delay between updates!
(That's 100MB every few minutes!) I discovered this when I let the script run for a few hours straight, not thinking anything of it, and when I returned to my computer, it was frozen up Opera seems to be the worst at its memory management on this script, Safari and Chrome are in the middle, and Firefox seems to handle it the best, but nonetheless there are memory leaks in all four. (I haven't tested IE yet, but based on what I read, I would expect that it might even be worse than Opera!)
I've been building a site that will rely very heavily on ajax calls to save server load and to spice things up a bit. So, so far I've successfully made several different ajax calls in Firefox. I'm mainly using the following code
I have a jQuery code to allow users to login using a lightbox (URL...) and immediately start downloading files, without being redirected or having the page reloaded. It's perfectly working in Firefox but Internet Explorer keeps showing the login box until I reload the page [code]
I am using jquery ajax to retrieve data from an asp.net web service. It works ok in IE8; but when I tried it on Firefox (3.6 or so), it generated an error: parsererror
The post always comes back a success in both IE and Firefox. The html response comes back as expected when using IE. However, the html response when using Firefox brings back an error from the server instead of what is expected. I'm not sure why there is a difference when using Firefox. My guess is that the content-type that the server is expecting is not correct when using Firefox.
I'm using Drip 0.5 to test for a memory leak in some code. After reducing the page down bit by bit to find the leak, I ended up with an empty page that still leaked!
It doesn't leak the same amount each page load - sometimes it's 8192, sometimes it's 16384, sometimes even reducing the memory load. But the overall trend is an upward movement. I let it run for 10 minutes and it leaked almost 10MB, so it's about 1MB/min.
This is not a serious leak, but it's making it harder to know if a leak is caused by the js code or this other thing going on.
Has anyone else run into this? Any ideas what the problem is? I've shut down all processes, removed all IE add-ons, etc, but no change.
I have an Ajax script which works fine in IE, Opera, etc, but not in FF 3.6. It appears the data sent is not recognized. My debug alert to display a simple variable sent is blank. In other browsers it displays fine. I'm developing on my PC so shouldn't have the cross domain issue, I don't think?
Here is the code function ajaxRequest() { $.ajax({ type: "POST", url: 'WTE_HTTP_Submit.cfm',
I have found a problem with Firefox 3 and AJAX, and give code to replicate it below.
The problem is when you have a resource, e.g. /docs/1234, which is fetched both directly as a web page and as AJAX (XMLHttpRequest). The server detects these cases based on the X-Requested-With: XMLHttpRequest header, and sends back different content, e.g. just a raw div or wrapped in a full HTML page.
The problem is when you use a jQuery AJAX request to fetch the page again. If Firefox has /docs/1234 in its cache, then load('/docs/1234') wrongly gets the non-XHR version of the page, and this is the version it will insert into the DOM. This screws up the page, since you get a second copy of the layout wrapper HTML inside the original layout.
The code below replicates this:
- The home page (/) fetches /docs/1234 into the lower pane using XHR - click on the link to fetch /docs/1234 as a full HTML page - click back, and the main page ends up inserting the full /docs/1234
HTML into the lower pane
You can see that I've set a Cache-Control: header, which ought to prevent /docs/1234 from being cached at all, but that doesn't seem to make a difference. You can confirm it's present using curl -v [url]
This problem doesn't occur with Opera. Looking at the server logs, when you hit Back you see that $.load fetches a new copy of the page, so the AJAX request isn't using a local cached copy. (This is true even without setting the Cache-Control header) So arguably this is a Firefox problem. However, since part of the purpose of jQuery is to abstract away and compensate for browser differences, I thought I'd raise it here first.
The only workaround I can think of is to use a different URL for XHR requests, e.g. add '?xhr=true' to the end.
To run this code, you'll need ruby and 'gem install sinatra'
I built jQuery UI tabs with jQuery UI Accordion embedded into each tab. It works fine on my local machine, it also works fine on all browsers in the development server except using Mozilla Firefox.
