AJAX :: Memory Leaks - Replacing Nodes With Frequent Updates
Aug 7, 2010
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!)
[Code]....
View 4 Replies
ADVERTISEMENT
Dec 1, 2010
I'm building a JavaScript-based calendar for a client that will require me to replace the page's HTML based on the user's input. For example, if the user clicks on a particular date, then the month/week calendar will be replaced with the day calendar. Needless to say, there are several event listeners involved. However, if I suddenly swap out the month calendar for a day calendar, does that mean that there are several event listeners in memory for elements that no longer exist? Or are those listeners destroyed when the elements are destroyed? Basically my question is, every time I swap out the HTML, do I have to detach all of the old events too?
View 3 Replies
View Related
Mar 1, 2006
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:
View 3 Replies
View Related
Oct 27, 2010
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
View 15 Replies
View Related
Apr 26, 2011
What is the best way to prevent memory leaks in IE6 and IE7?
I'm working on an internal web app that just gets slower and slower, using more and more CPU load and memory, unless and until you close the browser and start, again.
View 1 Replies
View Related
Oct 18, 2006
I have a question regarding how to prevent memory leaks in Internet
Explorer when using closures. I already knew about the circular
reference problem, and until now was able to prevent memory leak
problems. But I needed to store DOM elements and can't solve it
anymore. So I search the group archive to see if I missed any
valuable information. I found some interesting articles, but somehow
could not apply it to my problem or I did not understand it fully.
In particular the articles that talked about setting variables to
NULL seemed as an easy solution, but I think I didn't understand it,
because it didn't seem to work.
So, let me explain my problem in more detail. I am working on some
very dynamic and complex page. It uses AJAX (XMLHttpRequest) to alter
different parts of the page. This already disqualifies the finalize
method solution to cleanup memory leak problems. I use several
"component classes" to do the work of creating DOM elements in some
container element and provide an easy to use interface for
manipulation the content. For example I can call
component.setBackgroundColor("red")
and the component takes care of changing the style on the correct
DOM element that is encapsulated in the component. In reality the
component uses more complex interface method, but I hope you
get the picture of why I do this.
Let me show you some example code:
function MyComponent()
{
var div;
var handler = null;
this.generate = function generate()
{
div = document.createElement("div");
div.onclick = MyComponent.createClickHandler(this);
// normally more elements are created here
return div;
}
this.setBackgroundColor = function setBackgroundColor(value)
{
div.style.backgroundColor = value;
}
this.getHandler = function getHandler()
{
return handler;
}
this.setHandler = function setHandler(value)
{
handler = value;
}
}
MyComponent.createClickHandler = function createClickHandler(component)
{
return function(event)
{
var handler = component.getHandler();
if (handler != null)
handler(event);
}
}
This "component class" can be used like this:
var container = document.getElementById("container");
var component = new MyComponent();
container.appendChild(component.generate());
....
component.setBackgroundColor("red");
component.setHandler(function(event) {alert("Stop touching me!")});
The problem, of course, is that this code will create a memory leak
in Internet Explorer. I need the component in the event handler to
get the handler dynamically, but the div is stored there too,
creating a circular reference.
One of the things I tried doing is making a DOMStorage "class" like
this:
function DOMStorage()
{
var map = new Object();
this.get = function get(id)
{
return map[id];
}
this.put = function put(id, obj)
{
map[id] = obj;
}
}
var storage = new DOMStorage(); //global
Instead of storing the div element directly in the component, I store
it under an id in the DOMStorage and use it to retrieve it later.
This actually prevented the memory leak. I don't really understand
why, because I still see a circular reference. Maybe Internet
Explorer does not count references in the global scope as a circular
reference? When I move the global storage to inside the container
object I get the memory leak again.
Unfortunately I am unable to use a global DOMStorage, because the
"component class" in instantiated many times, and they must all have
their seperate DOM elements.
Perhaps I have to generate unique ID's when I put a DOM element into
the global storage? It seems so over-the-top for something that works
perfectly fine in Firefox.
What are my alternatives?
View 2 Replies
View Related
Mar 9, 2007
I'm working on an Ajax library that I plan to use on several upcoming
projects. Everything seems to work just great...
Now I want to get into the finer aspects of checking things... How
much memory am I using, are my objects making themselves available for
garbage collection adequately, etc.
Are there tools you can recommend (especially for IE and Firefox) that
I can use to get this information?
View 1 Replies
View Related
Jun 15, 2009
I have a table, 10 cols, 200 rows. Using tablesorter causes a memory leak on every page refresh of almost 2mB. A smaller table causes a proportionately smaller memory leak. Is there way to clear this memory? I've tried setting inner html of the table to '', but it makes no difference. Is there even a universal method i can call to remove any trace of any jquery plugin I have on the page?
View 3 Replies
View Related
Dec 4, 2010
The problem is, the extension tend to crash when there is no internet connection, and sometimes, the http requests fail to communicate with gmail server, they got built up over time and end up flooding the memory.
[Code]...
View 4 Replies
View Related
Sep 12, 2009
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.
View 1 Replies
View Related
May 27, 2010
I am developing a simple image editor in an HTA (for a special use-case). Because it is an HTA, it runs in IE only (IE7 to be precise).
Everything is working great so far, however, because I am loading the same img src file over after every edit, I had to attach " + Math.random();" to the image src so that the updated image is displayed.
This has lead to some pretty severe memory issues, as each time I make an edit, it caches another image. Under normal operation, my app uses under 20MB with a single image loaded, however after every edit it adds about 3MB. After a few minutes of testing I have had it consuming over 200MB!
Is there another way to use the same file name, same image src, etc, but have the browser re-read the file before displaying it again rather than using a cached copy.
Alternately, is there a way to make the browser forget about the other copies it has in memory to keep memory usage under control.
View 2 Replies
View Related
Oct 20, 2010
I have the following HTML:
<
ul
>
[code]....
View 1 Replies
View Related
Apr 13, 2011
I want to have a textarea update a database column and then pull down the info from that column and display it, without refreshing. I'm using JQuery and AJAX and PHP and SQL to do this. So far I've been able to update the database row using my $.post() call. The strange thing is, my variables don't seem to be passing to the page - when I try to echo them or look at them they don't show up. Here is my simple index page and call (page names aren't indicative of what I'm trying to do, just placeholders):
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("#updatefield").click(function(){
$.post(
'crud.php',
{
[Code]...
View 1 Replies
View Related
Jul 12, 2011
This jquery code pulls in an XML file, then passes the contents down to the nested POST call to add all of the records from the XML into a database table (which is handled by the saveSenatorRecord.asp file). This all works fine.. except that when the POST is called for "EACH" of the member nodes I expected the success: function to be called once after each of the records are added to the table. But what appears to be happening is that when function is called in the EACH property... it adds all of the records to the database table at one time, THEN it calls the success function once for each individual record.. but AFTER they have all been added.
View 1 Replies
View Related
Dec 15, 2010
I'm currently working on a pretty straight-forward AJAX application. In this application, I get some XML, and then parse it. An example of what I'm working with is as such:
<?xml version="1.0"?>
<postRoot xml:lang="EN">
<post type="comment" date="January 1, 1970">
<user>athlon32</user>
<content>Hello World</content>
</post>
</postRoot>
Now, I've been able to read the XML with XMLHttpRequest , my trouble is with parsing the results. I've tried tons of things, but I just can't seem to get the different child nodes. Now, let's say we have something like this:
var xml = xhr.responseXML;
var allPosts = xml.getElementsByTagName('post');
Could I use childNode to access user & content? And if so, how? I've tried many things, but nothing is working :/ Is there a better way to parse the results I get back from the server?
View 1 Replies
View Related
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.
View 2 Replies
View Related
Mar 26, 2009
First the code:
<!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.
View 2 Replies
View Related
Apr 6, 2010
What's the best way to wrap all the nodes between two nodes in DIV tags? Is it possible with the DOM? I have code similar to the following:
HTML Code:
<h3>First header</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
[code].....
How can I achieve this with the DOM, without resorting to doing something like a string replace?
View 2 Replies
View Related
Sep 24, 2006
We have the following situation - when Ajax request is sent what's
being returned by the server is usually an XML (which is used for DOM
updates) but sometimes it's HTML which is a whole new page that should
replace an existing one. I.e when we issue an Ajax request we don't
know what will be returned and analyze the response to act accordingly.
Now, the way to replace the current document with a new one used to be
easy and portable for both browsers (we're only supporting IE6 and
Firefox 1.5):
document.open();
document.write( head );
document.write( body );
document.close();
where "head" and "body" are two parts of the result HTML. We had to cut
it to two (rather than going simply with document.write( NewHTML ))
because of IE - our head section contains references to external
JavaScript files (<script type="text/javascript"
src="sth.js"></script>) and IE only loads them when document.write()
call ends. So if body contains any script block (<script
type="text/javascript".. </script>) using any of JS referenced by
head - IE would fail with something like "Resource undefined" if we
push the whole new HTMl in one go by using document.write( NewHTML ).
But it worked perfectly fine in Firefox, meaning
document.open();
document.write( NewHTML );
document.close();
did the job just fine. What's even more important - it also evaluated
all JavaScripts correctly - both in external files referenced by the
head and in the JS blocks embedded in the body.
Until Firefox 1.5.0.6/7 where things stopped working completely - our
lovely and used-to-be portable code
document.open();
document.write( head );
document.write( body );
document.close();
caused Firefox to loose all CSS/JS and display an HTML only page (as if
CSS/JS were disabled). Removing document.close(); improved the
situation a bit by displaying the page with CSS this time but still -
*no* JavaScript was evaluated (meaning, JavaScript blocks embedded in
the document's body were not evaluated).
I took a different path from this point by pushing the new content to
document's head and body "innerHTML". It worked but not for JS
evaluation - I had to do that manually. To evaluate the JS referenced
in the head section of the document - I've traversed the head's DOM
tree while looking for the "script" nodes, then downloaded all of them
one by one using a synchronous Ajax calls (don't laugh!) and eval()-ed
the response. To evaluate JS blocks embedded in the body of the
document - I've traversed the body's DOM tree while looking for the
"script" nodes and eval()-ed them.
The problem is following: eval()-ing external JS files after
downloading them with Ajax doesn't work in 100% of cases - some
statements using Prototype functions fail to execute ("prototype.js" is
one of external JS files referenced in the head). Anyway, I'm almost
sure that what I'm doing is plain wrong, i.e it's sounds silly to
download all JS files referenced in the head and eval() them !
So how do I fix it ? Simply put - how do I replce the content of the
document to the completely new one received as a response to
asynchronous Ajax call ? The new content conatins doctype, head, body -
it's a completely new page. And all JS referenced in the head and
embedded in the body should be evaluated as well.
I really wish
document.open();
document.write( head );
document.write( body );
document.close();
was working in Firefox as before. Is it simply a Firefox bug, should I
submit it ? Btw, document.open.write.write.close() works just fine in IE6.
View 4 Replies
View Related
Jul 29, 2011
Given input form elements on the display during page load, what is the proper way to replace the input elements when an Ajax call replaces the html? Here is a simple list of radio buttons:
[Code]...
I highlighted line 19 as that was the line I needed to add in order for the "shop" object to get the new input elements. Otherwise it was accumulating them. Can anybody explain the details of what was happening here and also confirm that the resolution is ? Is there a better way?
View 4 Replies
View Related
Aug 6, 2010
Consider following html code
<p id="oliver">
<a id="oliver1" href="/oliver1/">Oliver Twist 1</a>
<a id="oliver2" href="/oliver2/">Oliver Twist 2</a>
<a id="oliver3" href="/oliver3/">Oliver Twist 3</a>
<a id="oliver4" href="/oliver4/">Oliver Twist 4</a>
</p>
Applying JavaScript to above html as following:
[Code]...
Why are anchor nodes pointing to href and text nodes pointing to [object]? As anchor and text both are objects therefore all outputs from indices 0 to 7 should be [object].
View 5 Replies
View Related
Oct 6, 2003
I've got a site that I want to update frequently and change leader sentences around when I want through different subpages without going and changing the HTML on every page. I'm thinking I could use JS and define variables as my "blurbs" and links and then they'd set up across all the pages as defined. Or I could dive into more of an understanding of PHP & mySQL (i know some basics). Any advice/suggestions?
View 2 Replies
View Related
Feb 22, 2006
i would like to add a feature to my website where by i can just enter in say 30 different lets say quotes or sayings or something into a database and for the computer to either cycle throught them one by one ... so each day wil hav a new saying or
for it to randomly pick a saying from database every time page is loaded...
View 2 Replies
View Related
Sep 24, 2006
I think it's okay to ask this question in this group, but if not please
point me to the correct one!
How does one go about doing asynchronous updates between two web
clients? Take Google Chat for example... how does Google Chat update a
chatter's chat window with text entered by the other chatter?
View 3 Replies
View Related
Oct 15, 2009
I have a select box with information about people in it. When you click on their name in the select box, I'm trying to display information (Name, Address, Height, Weight) about them inside of a <div>.Now, what I am thinking is that I need to use selected.val() to pull the value (we'll call it id)of each person and have that id correspond with a row in an array. That row contains all of the information that I need.Does this make sense?I just realized that I posted this in the wrong java forum.
View 2 Replies
View Related
Feb 20, 2009
I am trying to add a page to my website which will display my latest twitter updates.
Twitter offers a widget that will do this and I am trying to use it. Here is the code snippet that I have added.<
div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/ourvalley" id="twitter-link" style="display:block;
[Code].....
I am thinking possibly another script
Here is the link to the page [URL]
View 2 Replies
View Related
