tags:

views:

48

answers:

2

i was wondering if the following code would cause some problems like memory leak

<html>
<head>
    <script type='text/javascript' src='jquery-1.4.2.js'> </script>
    <script type="text/javascript">
        function a(){
            for(var i = 0; i < 50000; i++){
                $("#d").html("<span>" + i + "</span>");
            }
        }

    </script>
</head>
<body onload='a();'>
    <div id="d"></div>
</body>

+1  A: 

It will use memory (possibly on the order of a megabyte or 2) but it will not leak it.

When the page is closed the memory should be restored.

My results on a Dirty instance of Firefox:

                        Memory used (allow several seconds to settle)
                       -----------------------------------------------
Before opening page:        163,332K
Open and page finished:     164,932K  (temporarily spiked to about 210M)
After page closed:          163,668K

Note that the slight difference could be one of the many other tabs open, or it could be memory leaks that Firefox is famous for, but it is probably not that JS code.

Brock Adams
+1  A: 

A simple span is being created here in each iteration. The html() function in jQuery runs an internal cleanData function that removes associated data and events from all contained nodes which isn't the case here anyways.

Then jQuery sets the innerHTML property to the passed in string which frees the existing elements. It's up to the browser's garbage collector to reclaim that memory whenever it can. There are no leaks in this code at all. Chrome is actually very fast in releasing that memory. I see a drop off from 2.421MB to 748KB mainly from the span elements being released in under 3 seconds.

It does not wait for the page to unload to release this memory. These three snapshots were spaced apart by less than a second in which time almost 26000 HTMLElement objects were released from memory.

Before opening the page

alt text

After opening page (23000 HTMLElement objects had already been released immediately, around 27000 were remaining)

alt text

Less than a second later (all 27000 objects except 1 were released)

alt text

Anurag
You are confusing the dynamic memory used while the script is running with the overall memory used by the page. Chrome does not release all of the page's memory until the page is closed. In fact, Chrome performed no better, memory wise, than Firefox did.
Brock Adams
@Brock - That makes no sense at all. I think you are referring to the peak usage which at one point of time did have 50000 objects allocated. However that was very short lived. V8 immediately started releasing those unused objects. Oh, and the gc does not wait for the page to unload to reclaim that memory.
Anurag
@Anurag: (1) Measure the memory used. Now (2) open a tab to the code. Memory will spike up and will, after many seconds, decrease to a new value several megabytes higher than step 1. This new memory usage will absolutely **not** be reclaimed until the page is unloaded.
Brock Adams
@Brock - That will give a very raw statistic. Chrome creates a new process per tab, and its Developer Tools provide a snapshot per open tab which lists the amount of memory right down to the object level. Let me update the stats in my answer.
Anurag