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.
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 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?
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?
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 RelatedI 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
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 RelatedI'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]....
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]...
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.
I need help with this code. its a counter.
var count= 0
function onm() {
atextbox.value=ffee
count++
setTimeout(onm(),100)
}
And in the body:
<body onload="onm()">
<input type="text" value="0" name="atextbox">
</body>
I get always an error: Out of memory
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.
I am using javascript to load and parse a big xml file (around 1 mb) save some values to an array and draw a picture using google Flot. Unfortunately, this causes the browser to crash! Is there a way to clear the memory of the browser?
View 2 Replies View RelatedI 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.
I'm trying to make a calculator in HTML/Javascript but I'm having trouble with the memory buttons. Here is the code:
<html>
<head>
<title>Env X Software | Env X Online Calc</title>
[code]....
I'm writing a very complex javascript application and I'd like memory usage to be as low as possible, so I've got a question about objects.
I'm using jQuery and my code is a bunch of jQuery plugins that interact with eachother. Will there be a difference in memory usage if I declare functions like this:
I haven't written anything in javascript as complex as I'm about to write, so I never worked with objects. As far as I understand, $.fn.whatever will add function to prototype, while $.whatever will add function only to one entry of jQuery object.
So question comes down to this: when jQuery object is being created, are functions in it being copied (meaning increase in memory usage) or does javascript only make references (meaning no significant increase in memory usage) to one main entry of that function in prototype?
what is DOM maximum memory size? is Diff from browser to Browser?
View 1 Replies View Relatedtake a look at the below code. The below code is small representation of a bigger system.
HTML Code:
<html>
<head>
<style type="text/css">
</style>
[Code]...
However the problem is that once the tabs/iframes are removed the browser does not release the memory. This happens both in IE8 and FireFox. So over a period of time the memory consumed by the browsers are huge because of the creation and deletion of new tabs/iframes and the application slows down. Is there a way to make the browser release memory when an iframe is removed.
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.
View 1 Replies View RelatedI am a little confused how the memory for objects is allocated in
JavaScript. David Flanagan, in "javascript: The Definitive Guide,"
states that each property of a class takes up memory space when
instantiated. So space is created for aMethod three times in this
example: Code:
I want to get the physical memory status, say, the total amount of
physical memory, the free memory, and so on, from the javascript, is it
a mission impossible?
Below is my code which refreshes every 10 seconds
[Code]...
What happens there is a memory leak of the divs with idsliveAuthen-target-1000 andliveAuthen-content-1000
It is possible to remove a function from the memory? I have a custom function that I call usingmodul.StepGuide.init() - but how do I remove that function with all its vars and events, from the memory.
View 1 Replies View Relatedis there a "javascript" way to enable cookie memory to whatever a user does. for example, if the user wants to edit something and then save it and the cookie will memorize it even if they clear cookies??
View 1 Replies View Related