Commits

Jonathan Fine  committed cfb78ee

counters-memory.rst: Major revisions. Now good enough,

  • Participants
  • Parent commits 3a7abcc

Comments (0)

Files changed (1)

File source/counters-memory.rst

 Correct use of a suitable framework is the simplest way to avoid
 memory leaks.
 
-The code in the above example indicates how to construct and use such
+The code in the counters example indicates how to construct and use such
 a framework.
 
+IE memory leaks
+---------------
+
+Internet Explorer, prior to IE8 (check) had **two memory heaps**, one
+for JavaScript and the other for the DOM.  Each heap had its own
+independent garbage collector.
+
+This means that if a DOM node *d* held a reference to a JavaScript
+object *j* and also that *j* held a reference to *d* then neither
+garbage collector could collect *j* or *d*.  What's worse, even when
+the page was unloaded IE did not reclaim this memory.
+
+Thus, prior to IE8, JavaScript could cause Internet Explorer to leak
+memory.  This lost memory could be reclaimed only by closing the
+browser!  Closing the page was not enough.
+
 Garbage collection
 ------------------
 The JavaScript garbage collection deletes objects provide it can
 by the array literal) can no longer be accessed, and so it can be
 garbage collected.
 
-After the namespace anonyomous function has executed there are no
-global objects holding even indirect references to the function.
-Therefore is can and will be garbage collected. However, as we shall
-see, the execution context of the function continues.
+After the counters namespace anonyomous function has executed there
+are no global objects holding even indirect references to the
+function.  Therefore it can and will be garbage collected. However, as
+we shall see, the execution context of the function continues.
 
-IE memory leaks
----------------
+The whole of the discussion here reduces to two things
 
-Internet Explorer, prior to IE8 (check) had **two memory heaps**, one
-for JavaScript and the other for the DOM.  Each heap had its own
-garbage collector.  
+* The execution of the context of the namespace anonymous function
+  continues to exist after the function has completed execution.
 
-This means that if a DOM node *d* held a reference to a JavaScript
-object *j* and also that *j* held a reference to *d* then neither
-garbage could collect *j* or *d*.  What's worse, even when the page
-was unloaded IE did not reclaim this memory.
+* If the line
 
-Thus, prior to IE8, JavaScript could cause Internet Explorer to leak
-memory.  This lost memory could be reclaimed only by closing the
-browser!
+  .. code-block: javascript
+     element.onclick = onclick_factory(models);
+  
+  were replaced by
+
+  .. code-block: javascript
+     element.onclick = onclick_factory(models);
+
+  then after the execution of the namespace anonymous function all the
+  JavaScript objects it created would be garbage collected.
+
+The trick is to allow garbage collection to take place by releasing,
+when the time comes, all DOM reference to JavaScript objects.
 
 Residue
 -------
 
-The *example* DOM node continues to exist, as it can be reached from
+The *element* DOM node continues to exist, as it can be reached from
 the *document* node.  It has an *onclick* attribute, which is the
 function created by the *onclick_factory*, with *models* as the
-argument.  So that function is not garbage collected.
+argument.  So that function is not garbage collected and neither is
+*models*.
 
-The function *example.onclick* retains a reference to *models* just as
+This is just as it should be.  Anything that can be reached from the
+rendered web page is not garbage collected.  It has to be there so
+that click has the desired effect.
+
+The function *element.onclick* retains a reference to *models* just as
 surely as executing
 
    .. code-block:: javascript
 
    .. code-block:: javascript
 
-      example = undefined;    // Release reference to DOM node.
+      element = undefined;    // Release reference to DOM node.
 
-means that the JavaScript does not hold a reference to *example*.
+means that the JavaScript no longer holds a reference to *element*.
 
 The DOM node *example* holds a reference, via its *onclick* function,
 to the JavaScript on the page, and in particular to the *Counter*
 However, the converse is not true.  We can write the JavaScript code
 so that it has but one reference to a DOM object, namely the
 *document* node held for example as a property of the *global* object.
+
+Summary
+-------
+
+To avoid the IE memory leaks the trick is to ensure that, when the
+page unloads, there is nothing that is keeping the garbage is alive.
+If we execute
+
+.. code-block:: javascript
+
+   element.onclick = undefined
+
+then there is nothing on the page that is keeping our JavaScript code
+alive.  And once all the JavaScript is garbage collected then there's
+nothing to prevent all the DOM notde being garbage collected.
+
+The key principle in this strategy is that the page unload event
+should unbind all JavaScript event handlers and other data attached to
+the page.  This will ensure that the JavaScript is garbage collected,
+and hence there is nothing to obstruct garbage collection of the DOM
+nodes.
+
+Clearly, this strategy requires us to keep track of what we add to the
+DOM.  Delegation makes this much easier to do.