Script Artists

Kleine Tipps #2: AJAX – JavaScript Garbage Collector

Feb 07 24

Wenn jemand seine Seite mit AJAX überlädt, steigen unserem guten kleinen Fuchs ganz gerne mal die Objekte zu Kopfe … man sollte dann auch ab und zu dran denken, dem GC ne Chance zu geben:

.close()

Oder anders … labelt die Dinger als tot, dann werden sie auch gelöscht und der FF stirbt Euch nicht mit 300MB im Speicher ab …

Beispiel:

function foo() {
    [...]
    new Ajax.Updater(target, tUrl, {method: 'get',onComplete:doSomeThing.bind(this)});
}
function doSomeThing(response) {
    [...]
    response.close();
}

(auch bei großen w.z.B. prototype,scriptaculous wurde nicht in Betracht gezogen, dass Objekte im Speicher hängen bleiben können, wenn sie nicht zum sterben gelabelt wurden – hey, nicht jeder stirbt von alleine …)

GreetZ tucci

« Ein toller Begleiter – Das MacBookGoogle Docs & Spreadsheets »

14 Kommentare

Kommentieren | Diskussion verfolgen | Trackback URI

1. 1. am 16.01.08 um 9:51 von Christian |

   Ich habe Deinen Vorschlag angewandt…

   Ich habe sogar extra Deinen Quellcode vom o.g. Beispiel kopiert. Leider bläht sich mein Browser weiterhin auf.
2. 2. am 20.01.08 um 12:41 von toocan |

   mootools hat eine schicke Garbageklasse mitgeliefert, die eben selbiges wunderbar macht.

   Beispiel für mootools 1.2b2:

   
   var test = new Class
   ({
       ajax: Class.empty,
       initialize: function()
       {
           this.test.periodical(1000,this);
       },
       test: function(){
   
           this.ajax = new Request({
               url : '/test.html',
               method: 'get',
               onSuccess: (function(){
                   new Element('p').setHTML('blubb').injectInside($E('body'));
                   this.doSomething();
               }).bind(this)
           }).send();
       },
       doSomething: function()
       {
           Garbage.kill(this.ajax);
       }
   });
   
   window.addEvent('domready',function(){new test()});
   
   
3. 3. am 21.01.08 um 10:37 von Christian |

   Danke erstmal für die Antwort!

   Ich habe das Script-Schnipsel mal kopiert und versucht, auf mein Beispiel anzuwenden.

   Sowohl im IE (hier leider nur Version 6) als auch im aktuellsten Firefox Portable bläht sich der Browser weiterhin auf.

   Ich habe den Code mal verfügbar gemacht unter:

   http://blankandjonespage.de/dev/

   Dabei lädt der Browser eine 60k-Byte Datei alle 5 Sekunden…

   Es wäre schön, wenn ich das Problem irgendwie in den Griff bekommen könnte.

   Grüße,
   Christian
4. 4. am 21.01.08 um 13:25 von toocan |

   ok – found something.

   Zitat 1:

   “Es verhält sich hier also offenbar wie mit Hardlinks im Dateisystem: so lange es noch mindestens einen Zeiger auf das Objekt gibt, ist es über diesen Zeiger erreichbar. Das heißt, auch wenn form.myfield aus dem Dokumentenbaum entfernt wird, ist es über eine Referenz noch immer erreichbar.”

   means: nach dem garbage.kill dürfte das this.ajax eigentlich kein object mehr sein, isses aber … sollte null oder undefined
   sein. Ich check das heute abend mal (immo@work)

   gruß tucci
5. 5. am 23.01.08 um 16:49 von Christian |

   Und? .. Ich will jetzt nicht drängeln.

   Soll nur noch mal eine Erinnerung sein
   Wäre coll wenn Du das hinbekommst.
6. 6. am 24.01.08 um 14:53 von Nadja |

   Sieht wirklich so aus als ob der toocan es nicht geschafft hat. Kann dir aber auch sagen, dass der Donnerstag generell ein schlechter Tag fürs “Arbeit-mit-nach-Hause-Nehmen” ist, denn da isser gar nicht zuhause

   Musst also noch etwas warten.
7. 7. am 30.01.08 um 15:36 von Christian |

   Eine Woche vorbei *sehnsüchtigwart*
8. 8. am 30.01.08 um 18:25 von toocan |

   Ja, ähm .. sorry – bin dran … gleich heute abend wieder (nochmal) – ich versprech ich versuchs einzurichten … ehrlich
9. 9. am 30.01.08 um 21:54 von toocan |

   manno – ich tauf die seite gleich um in “Club der Ahnungslosen” …
10. 10. am 30.01.08 um 21:59 von toocan |

    [...]
    because element storage is linked in with mootools garbage you have to make sure you destroy() every element you reference in your scripts but boy does memory stay low in all the browsers.
11. 11. am 30.01.08 um 22:02 von toocan |

    http://dev.mootools.net/ticket/771
12. 12. am 30.01.08 um 23:26 von toocan |

    try this …
    da komm ich langsam dahin, wo wir hin wollen …

    bitte mal vorher nacher speicherverbauch posten, danke

    
    
    		var i = 0;
    		var testclass = new Class
    		({
    			ajax: null,
    			timer: null,
    			initialize: function()
    			{
    				this.timer = this.call_function.periodical(10, this); //aggressive!
    			},
    			call_function: function()
    			{
    				if (!(this.ajax && this.ajax.running)) //n'bissl gucken muss schon sein
    				{
    					this.ajax = new Request({ url: 'test.out', method: 'get',
    						onSuccess:  function()
    						{
    							this.doSomething();
    						}.bind(this)
    					}).send();
    				}
    			},
    			doSomething: function()
    			{
    				if (i++>=10000) { //mal ein bisschen spielen
    					$('content').setHTML('fertsch');
    					$clear(this.timer);
    				}
    
    				Garbage.kill(this.ajax);
    				this.ajax = null; //weil nach dem kill immernoch  Object ist ...
    
    			}
    		});
     
13. 13. am 12.03.09 um 15:49 von Tarquinio |

    Hi Ihrs,
    bin gestern auf den Beitrag gestoßen als ich nach JavaScript und dem GarbageCollector gegoogelt habe.

    Da ich ebenfalls Prototype als Framework nutze testete ich das Problem mit sowohl mit selbstgeschriebenen als auch mit dem, von Christian verlinkten, Code und stellte fest: Ist die Firefoxextension Firebug aktiviert steigt die physikalische Speichernutzung vom Firefox stetig an; mit deaktiviertem Firebug nicht. Macht im Grunde auch Sinn, da man mit Firebug alle Requests mitloggt und somit zur Laufzeit immer mehr Speicherplatz benötigt.

    Kann es sein, dass ihr Firebug aktiviert habt?
14. 14. am 16.03.09 um 9:00 von toocan |

    Nein, leider nicht … bin 100%ig sicher, dass ich selbigen nicht mal installiert hatte.

    gruß