473,400 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,400 software developers and data experts.

IE memory leak when removing elements from page? Inline

Hi,

Douglas Crockford mentioned in a video on Yahoo! that before removing
an element it is a good idea to purge it's event handlers. I think he
was only refering to the event handlers defined inline in the HTML
element attributes. This purging is because the event handlers create
the circular memory leak in IE.

I am trying to create and observe this memory leak with with IE6 and
the example below. I can't see any memory leaking.

Is my test faulty or am I missing something else?

Thank you,
Peter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Leak</title>

<script type="text/javascript">
function doLoad() {
for (var i=1000000;i--;) {
var p = document.createElement("p");
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=(function(){return function(){alert("hi");};})();
document.body.appendChild(p);
document.body.removeChild(p);
}
}
</script>

</head>
<body onload="doLoad();">

</body>
</html>

Nov 1 '06 #1
6 2532

Peter Michaux wrote:
Hi,

Douglas Crockford mentioned in a video on Yahoo! that before removing
an element it is a good idea to purge it's event handlers. I think he
was only refering to the event handlers defined inline in the HTML
element attributes. This purging is because the event handlers create
the circular memory leak in IE.

I am trying to create and observe this memory leak with with IE6 and
the example below. I can't see any memory leaking.
I changed my test to the following to try to force the circular leak.
More memory definitely is used but during the test IE does seem to
garbage collect at times.

function doLoad() {
for (var i=1000000;i--;) {
var p = document.createElement("p");
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=(function(p){
return function(){alert("hi");};
})(p);
document.body.appendChild(p);
document.body.removeChild(p);
}
}

Peter

Nov 1 '06 #2

Peter Michaux wrote:
Peter Michaux wrote:
Hi,

Douglas Crockford mentioned in a video on Yahoo! that before removing
an element it is a good idea to purge it's event handlers. I think he
was only refering to the event handlers defined inline in the HTML
element attributes. This purging is because the event handlers create
the circular memory leak in IE.

I am trying to create and observe this memory leak with with IE6 and
the example below. I can't see any memory leaking.

I changed my test to the following to try to force the circular leak.
More memory definitely is used but during the test IE does seem to
garbage collect at times.

function doLoad() {
for (var i=1000000;i--;) {
var p = document.createElement("p");
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=(function(p){
return function(){alert("hi");};
})(p);
document.body.appendChild(p);
document.body.removeChild(p);
}
}

It looks like I was not interpreting the task manager output correctly.
The virtual memory usage was going crazy with this example. Looks like
Crockford was right as I expected.

Peter

Nov 1 '06 #3
ASM
Peter Michaux a écrit :
>I am trying to create and observe this memory leak with with IE6 and
the example below. I can't see any memory leaking.
Because 'p' is a variable owning to the function, there will be any
memory leak. It could be to happen only if 'p' is a global variable.
When the function has finish its job used memory is automatically killed
(no more use of p in rest of code)

(if I've understood what I've heard - I haven't IE Win on my Mac)

Perhaps could you test with p as global ?
I changed my test to the following to try to force the circular leak.
More memory definitely is used but during the test IE does seem to
garbage collect at times.

function doLoad() {
for (var i=1000000;i--;) {
var p = document.createElement("p");
p = document.createElement("p");
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=(function(p){
return function(){alert("hi");};
})(p);
document.body.appendChild(p);
document.body.removeChild(p);
}
}
Nov 1 '06 #4

Peter Michaux wrote:
Peter Michaux wrote:
[...]
I changed my test to the following to try to force the circular leak.
More memory definitely is used but during the test IE does seem to
garbage collect at times.

function doLoad() {
for (var i=1000000;i--;) {
var p = document.createElement("p");
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=(function(p){
return function(){alert("hi");};
})(p);
document.body.appendChild(p);
document.body.removeChild(p);
}
}


It looks like I was not interpreting the task manager output correctly.
The virtual memory usage was going crazy with this example. Looks like
Crockford was right as I expected.
Yes, I think it's the inclusion of the element reference in the closure
that causes the leak.

If you want an even better demonstration (inspired by a Richard
Cornford post) head over to <URL:http://www.lipsum.com/and generate
say 50 paragraphs of Ipsum lorem (should be about 30k of text). Paste
that into a div called 'xx' and modify your script to be:

function doLoad() {
for (var i=10000;i--;) {
var p = document.createElement("p");
var x = document.getElementById('xx').innerHTML;
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=
(function(p, x){return function(){alert("hi");};})(p, x);
document.body.appendChild(p);
document.body.removeChild(p);
}
}

For me it caused IE to swallow about 500MB of RAM each time the page
was loaded (after 2 you lose 1GB of RAM). It stays lost until IE is
closed. Note that I reduced the number of loops to 10,000.

--
Rob

Nov 2 '06 #5
Hi Rob,

RobG wrote:

<snip>
If you want an even better demonstration (inspired by a Richard
Cornford post) head over to <URL:http://www.lipsum.com/and generate
say 50 paragraphs of Ipsum lorem (should be about 30k of text). Paste
that into a div called 'xx' and modify your script to be:

function doLoad() {
for (var i=10000;i--;) {
var p = document.createElement("p");
var x = document.getElementById('xx').innerHTML;
p.appendChild(document.createTextNode("clickme"));
p["onclick"]=
(function(p, x){return function(){alert("hi");};})(p, x);
document.body.appendChild(p);
document.body.removeChild(p);
}
}

For me it caused IE to swallow about 500MB of RAM each time the page
was loaded (after 2 you lose 1GB of RAM). It stays lost until IE is
closed. Note that I reduced the number of loops to 10,000.
Thanks for the example and info. This closure and IE leak stuff is
starting to make more sense now.

I like the way that the Yahoo! UI event utility wraps this problem up
in the library. Just call YAHOO.util.Event.purgeElement() and the
element and all it's descendents are cleaned of their handlers.

Peter

Nov 2 '06 #6
VK
Peter Michaux wrote:
Thanks for the example and info. This closure and IE leak stuff is
starting to make more sense now.
It may also help reading the explanation (and a formal excuse) of the
JScript engine creator:
<http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx>

In the article Eric Lippert also says (about cancelling garbage
collection in such cases): "the application compatibility lab
discovered that there were actually web pages that broke when those
semantics were implemented. (No, I don't know the details.)"

I can provide these details. It was caused by unexperienced programmers
addressing DOM elements right after location.href=something or
document.write(something) on a loaded page.

Theoretically anything like that eliminates current page and script.
Practically script engine retains compiled code in the memory (with all
DOM references it had before) for some time. This creates the problem
of "orphan scripts" - thus of scripts still being excuted but having
lost the page which created them. If some of orphan scripts tried to
address a "virtual" (because already gone) DOM element using an old
reference, IE crashed rather miserably. By googling c.l.j. 3-4 years
ago you'll find a number of post on the subject. I even remember one
guy wanted to program a "orphan script emulator" to predict IE's
behavior.
The linked article is dated September 17, 2003. I presume the orphan
script "fix" was made somewhere earlier at that year; respectively 2003
is the year when the circular reference of this kind was born on IE.

Nov 2 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Jeremy Lemaire | last post by:
Hello, I am working on cross platform code that is displaying a huge memory leak when compiled on 11.00 HPUX using the aCC -AA flag. It is not leaking on NT, LINUX, Solaris, or HPUX without the...
1
by: yaktipper | last post by:
VS.NET 2002, framework 1.0 I wrote a very simple program to display the RGB value and x,y mouse position at the cursor on a 50ms timer. I noticed a memory leak of 8K per timer event. The leak...
3
by: Giovanni Boschi | last post by:
We have found a memory leak when using a COM library with a C# application. The leak appears only if the C# application is compiled with the /optimize flag. It goes away when the C# application is...
14
by: Piotrek | last post by:
Hi all. I have a web app, in which I use frames. My main frameset consists of three inner frames. When some button is pressed in frame A, then content of frame B is reloaded. I am using such...
17
by: Mike | last post by:
Hello, I have following existing code. And there is memory leak. Anyone know how to get ride of it? function foo has been used in thousands places, the signature is not allowed to change. ...
3
by: Godzilla | last post by:
Hello, I have a program that create and pop an object off a queue, but it is experiencing some memory leakage. I have been unable to detect where the memory leakage occur. The strange thing is...
4
by: Sergei Shelukhin | last post by:
Hi. I have a <tdelement, with <ain it and <spaninside <a>, all created statically (e.g. poresent in HTML when the page loads). Later I execute the code that adds reference to td in question to a...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.