Kleine Tipps #2: AJAX – JavaScript Garbage Collector

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

14 Gedanken zu „Kleine Tipps #2: AJAX – JavaScript Garbage Collector“

  1. 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. 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. 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. 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. Und? .. Ich will jetzt nicht drängeln.

    Soll nur noch mal eine Erinnerung sein 🙂
    Wäre coll wenn Du das hinbekommst.

  6. 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. […]
    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.

  8. 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 ...
    				
    			}
    		});
     
  9. 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?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.