Frage zur Performance bei Event Handlern

[Thomas Schmidt]

Hallo Forum,

da ihr mir vor kurzem bei meiner Anfängerfrage zur OOP so nett geholfen habt, lade ich mal nach. ;-)

Ich hab mir einen Buttonkonstruktor gebastelt, der aus einem div mit Text und Hintergrund einen Button erzeugt.

  
  
VISU.CButtonSend = function(id, bild0, bild1) {  
    var self = this;  
    this.element = document.getElementById(id);  
    this.bildNormal = bild0;  
    this.bildBetaet = bild1;  
    this.sende = VISU.comm.test;  
  
    // Meine ersten Closures!!  
    this.buttonDown = function(){  
        self.status = 1;	  
	self.element.style.backgroundImage = "url(" + self.bildBetaet.src + ")";  
        self.sende(1);  
    };  
    this.buttonUp = function(){  
	self.status = 0;	  
	self.element.style.backgroundImage = "url(" + self.bildNormal.src + ")";  
        self.sende(0);  
    };  
  
    //Handler  
    this.element.onmousedown = this.buttonDown;  
    this.element.onmouseup = this.buttonUp;  
    this.element.onmouseout = this.buttonUp;  
  
};  
  
  
VISU.CButtonSend.erzeugeStdButton = function(id) {  
	return new VISU.CButtonSend(id, VISU.bilder.buttonStd, VISU.bilder.buttonStdPressed)  
};  
  
  
  
VISU.button = {  
	rolloPos0: VISU.CButtonSend.erzeugeStdButton('rollopos0'),  
};  
  

Das funktioniert soweit ganz gut. Nun meine Fragen:

1. Übertreibe ich es mit der OOP?

2. Ich habe gelesen, das bei Verwendung von vielen Event Handlern die Performance in die Knie geht. Ab wann wirds kritisch? Ich werde vielleicht 60-70 Buttons haben. Wäre da ein Konzept mit Event Delegation besser?

3. Wenn sich solche Buttons in einem mit "display:none" ausgeblendeten Container befinden, belasten diese die Engine dann auch?

4. Wie ist das z.B. bei jQuery? Wenn ich da eine Event z.B. allen DIV's zuweise, werden die dann alle einzeln registriert? Oder wird da mit Event Delegation gearbeitet?

Vielen Dank

Thomas

[LX]

(...)

1. Übertreibe ich es mit der OOP?

Nein.

2. Ich habe gelesen, das bei Verwendung von vielen Event Handlern die Performance in die Knie geht. Ab wann wirds kritisch? Ich werde vielleicht 60-70 Buttons haben. Wäre da ein Konzept mit Event Delegation besser?

Das betrifft hauptsächlich den MSIE, der ab ca. 50 Event-Handlern eine Last von bis zu 80% erzeugt und aufgrund des mangelnden Threadings auch anderweitig in die Knie geht. Versuche daher, innerhalb der Events so wenig wie möglich zu tun.

3. Wenn sich solche Buttons in einem mit "display:none" ausgeblendeten Container befinden, belasten diese die Engine dann auch?

Das hängt vom jeweiligen Handler ab. Mouse- und Keypress-Handler sind davon nicht betroffen, alle anderen schon.

4. Wie ist das z.B. bei jQuery? Wenn ich da eine Event z.B. allen DIV's zuweise, werden die dann alle einzeln registriert? Oder wird da mit Event Delegation gearbeitet?

jQuery beherrscht in der Version 1.3 Event Bubbling, d.h. Events werden an die Parents weitergereicht. Des weiteren werden sogenannte live Events unterstützt, d.h. Events, die auch neuen Elementen mitgegeben werden. Das Ergebnis sind trotzdem einzelne Events, die auf die entsprechenden Objekte gesetzt werden (das Bubbling funktioniert jedoch über Sizzle, nicht über Events). Performancemäßig ist das keine Verbesserung, aber auch keine Verschlimmerung gegenüber manuell gesetzter Events.

Gruß, LX

[Thomas Schmidt]

Der IE wird die Seite nie zu Gesicht bekommen, nur aktuelleste FF und Opera Mobile-Versionen, event. in Zukunft Fennec. Ich mache mir vor allem wegen der leistunsarmen Prozessoren in meinenm Handy bzw. Nettop Gedanken. Die Buttons lösen relativ simple Aktionen aus, meist Container Ein-/Ausblenden oder die URL in einem IFRAME ändern. Ich hatte nicht gedacht, dass es darauf ankommt, welche Aktionen der Handler auslöst.

[molily]

1. Übertreibe ich es mit der OOP?

Nö. Wenn die Sache so flexibel sein soll, dann ist das schon okay.

2. Ich habe gelesen, das bei Verwendung von vielen Event Handlern die Performance in die Knie geht. Ab wann wirds kritisch? Ich werde vielleicht 60-70 Buttons haben. Wäre da ein Konzept mit Event Delegation besser?

Allein die bloße Existenz von Buttons im Dokument mit Handlern ist m.W. kein Problem. Schwierig wirds, wenn die irgendwie nebeneinander liegen, man über all schnell mit der Maus fährt und dann viele Handlerfunktionen in der Ausführungsschlange des JavaScript-Interpreters liegen. Dann muss man damit rechnen, dass das Bildwechseln zäh abläuft. Aber so oder so feuert jede Mausbewegung zwischen den Buttons verschiedene Events. Bei Event Delegation müsste also jeder Mouseover-, jeder Mouseout- und jeder Mousedown-Event verarbeitet werden! Dabei muss überprüft werden, ob das Zielelement ein Button ist oder in einem Button liegt. Dann müsstest du vom Zielelement zur zugehörigen CButtonSend-Instanz kommen (das ginge über eien Verweis vom Elementobjekt auf die Instanz).

Dass das auf jeden Fall besser performt, glaube ich nicht - ich würde es vor allem in den Mobile-Browsern ausprobieren (dort gibts ja auch keine »Maus« in dem Sinne).

4. Wie ist das z.B. bei jQuery? Wenn ich da eine Event z.B. allen DIV's zuweise, werden die dann alle einzeln registriert? Oder wird da mit Event Delegation gearbeitet?

jQuery gibt einem da nichts vor, aber standardmäßig vergibt man in jQuery vielen Elementen einzelne Handler. Man kann natürlich auch verstärkt mit Event Delegation arbeiten, wofür einem Version 1.3 eine Helferfunktion bietet.

Mathias