Memory Leaks in AJAX application (in Opera)

[wonderu]

Hi! 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?

thank you

function EventsCallback(response, args){
var result = response.text.split("^");
var elemobj = document.eframe.document.getElementById("div1");

while (elemobj.childNodes.length > 40) {
elem = elemobj.firstChild;
elemobj.removeChild(elem);
}

var newElem = document.eframe.document.createElement("div");

newElem.innerHTML = result[1] + " " + result[2];
newElem.setAttribute("class", "divevent" + result[0]);
newElem.setAttribute("id", "mes"+result[4]);
elemobj.appendChild(newElem);

var newElem1 = document.eframe.document.createElement("div");
newElem1.setAttribute("class", "confirm");
newElem1.setAttribute("onmousedown",
"parent.btnConfirm_click(\'"+result[4]+"\')");
newElem1.innerHTML = "V";
newElem.appendChild(newElem1);
}

 

[Thomas 'PointedEars' Lahn]

(e-mail address removed) wrote:
^^^^^^^^^^^^^^^^^
Do you have a name?

Hi! I have the AJAX-script.

"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.
OK.

If mesages more than 40 last message delete.
Pardon?

Can you check the script and say about my mistakes?
Sure.

function EventsCallback(response, args){
var result = response.text.split("^");
var elemobj = document.eframe.document.getElementById("div1");

The only object I can think of to be referenced with
document.eframe.document is the HTMLDocument object of an iframe.
However, iframes are not universally available as properties of
`document', only of the `window' object or the Global Object. And
have you tested that this object even supports a getElementById()
method?

<URL:http://pointedears.de/scripts/test/whatami#inference>

while (elemobj.childNodes.length > 40) {

You should at least test if `elementobj' refers to an element
object before you continue working with that reference.

if (elemobj)
{
while (elemobj...)
// ...
}

elem = elemobj.firstChild;
elemobj.removeChild(elem);

This can be compacted without problems to

elemobj.removeChild(elemobj.firstChild);

No need for a new property of the Global Object, or of the object that comes
before it in the scope chain (since `elem' was not declared with `var').
However, the feature tests for the `firstChild' property, and removeChild()
are missing in either case.

}

var newElem = document.eframe.document.createElement("div");

You are creating a new element object here. An object requires memory to
be stored. Why are you astonished that more memory is allocated with this?

newElem.innerHTML = result[1] + " " + result[2];

If you create the element using W3C DOM methods, you should stick to them
and not switch to the usually less efficient proprietary methods if it can
be avoided:

newElem.appendChild(document.createTextNode(result[1] + " " + result[2]));

newElem.setAttribute("class", "divevent" + result[0]);
newElem.setAttribute("id", "mes"+result[4]);

Do not use setAttribute() if you can avoid it, its implementations are
buggy. Use attribute properties instead.

newElem.className = "divevent" + result[0];
newElem.id = "mes" + result[4];

elemobj.appendChild(newElem);

var newElem1 = document.eframe.document.createElement("div");

See above. Just more memory that is allocated here.

newElem1.setAttribute("class", "confirm");

See above.

if (newElem1)
{
newElem1.className = "confirm";
// ...
}

newElem1.setAttribute("onmousedown",
"parent.btnConfirm_click(\'"+result[4]+"\')");

This is likely not to work. Event listeners must be assigned to
event handlers, the proprietary or the standards compliant way.

Proprietary:

newElem1.onmousedown = function()
{
parent.btnConfirm_click(result[4]);
};

(Almost) standards compliant:

newElem1.addEventListener(
'mousedown',
function()
{
parent.btnConfirm_click(result[4]);
},
false);

newElem1.innerHTML = "V";

See above.

newElem.appendChild(newElem1);
}

(Please read <URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>
and <URL:http://safalra.com/special/googlegroupsreply/> before you reply.)


HTH

PointedEars

 

[Igor Podsekin]

Sorry, I'm newbie in the groups.
I change my function according your advices. Thank You!!! Now my script
begins to work in FireFox browser

var doc = document.getElementById("eframe").contentDocument;
var elemobj = doc.getElementById("div1");

it's solution for iframe tag document object

But I have the question:

while (elemobj.childNodes.length > 40) {
elemobj.removeChild(elemobj.firstChild);
}
when I remove Childs, must I remove "SubChilds"?

 

[Martin Honnen]

But I have the question:

while (elemobj.childNodes.length > 40) {
elemobj.removeChild(elemobj.firstChild);
}
when I remove Childs, must I remove "SubChilds"?

No, it does not matter if elemobj.firstChild is an element with its own
children, the element with its complete subtree is removed from its
parent elemobj if you call removeChild.