"Garbage Collection" probably sounds like a strange term if you've never heard of it before. So what is it? Well, you've all probably heard of a "memory leak" before. Garbage Collection, or GC, is essentially an attempt to prevent memory leaks. Back in the old days, developers had to be very diligent about cleaning up after themselves. If an object was allocated repeatedly but never "destroyed" or cleaned up the system would gradually use more and more memory until there was no more available memory and the application would crash.
Today, platforms like Java, .Net, Javascript, Perl, Ruby, and PHP have GC built-in. In platforms with GC, objects that are no longer referenced (because the reference has gone out of scope or because the variable was set to null) become eligible to be automatically destroyed and the memory used made available for new allocations. Notice that i said they become eligible; the objects are not immediately cleaned up when they go out of scope. The garbage collector only performs the collection when it is necessary, such as when the system is running low on memory.
Javascript has the ability to be garbage collected or to use explicit memory management when necessary or desired with the delete keyword. The two graphs below show the difference.
The first graph shows memory consumption over time while the garbage collector is allowed to manage the memory.
The second graph shows the same thing while the program manages it's own memory by explicitly deleting the objects when it is done with them.
1: <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="ItsJustJavascript._Default" %>
2: 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head id="Head1" runat="server">
6: <title>Untitled Page</title>
7: </head>
8: <body>
9: <form id="form1" runat="server">
10: <div>
11: <button onclick="cancel = false; useMemory(false);">
12: start (normal)</button>
13: <button onclick="cancel = false; useMemory(true);">
14: start (self cleanup)</button>
15: <button onclick="cancel = true;">
16: stop</button>
17: <br />
18: <input type="text" id="output" />
19: </div>
20: </form>
21: <script type="text/javascript">1:2: var cancel = false;3: var output = document.getElementById("output");4:5: function useMemory(selfCleanUp)6: {7: if (cancel) return;8:9: output.value = (new Date()).toString();10: for (var i = 0; i<100000; i++)11: {12: var foo = new Object(); //just consume a small amount of memory13: foo.bar = new Object(); // and a bit more memory, plus an expando!14: if (selfCleanUp)15: {16: foo.bar = null;17: delete foo.bar;18: foo = null;19: delete foo;20: }21: }22:23: window.setTimeout("useMemory(" + selfCleanUp + ")", 1);24: }25:</script>
22: </body>
23: </html>
Additional Info:
