JQuery Kochbuch (German Edition)

class="clientX">
    Client Y:
    Page X:
    Page Y:
    Screen X:
    Screen Y:

    und diesen JavaScript-Code:
$('html').mousemove( function( event ) {
    $('.clientX').html( event.clientX );
    $('.clientY').html( event.clientY );
    $('.pageX').html( event.pageX );
    $('.pageY').html( event.pageY );
    $('.screenX').html( event.screenX );
    $('.screenY').html( event.screenY );
});
    Die Seite enthält zudem eine große Zahl (tausende!) anderer DOM-Elemente. Auf einer einfacheren Testseite läuft der Code ausreichend schnell, aber auf der komplexen Seite ist er zu langsam.
    Lösung
    Puffern Sie die von
$(...)
zurückgegebenen jQuery-Objekte, so dass die DOM-Abfragen nur ein Mal ausgeführt werden müssen:
var
    $clientX = $('.clientX'),
    $clientY = $('.clientY'),
    $pageX = $('.pageX'),
    $pageY = $('.pageY'),
    $screenX = $('.screenX'),
    $screenY = $('.screenY');
$('html').mousemove( function( event ) {
    $clientX.html( event.clientX );
    $clientY.html( event.clientY );
    $pageX.html( event.pageX );
    $pageY.html( event.pageY );
    $screenX.html( event.screenX );
    $screenY.html( event.screenY );
});
    Eventuell können Sie auch noch diese Selektoren deutlich beschleunigen – schauen Sie sich dazu das nächste Rezept an. Aber alleine schon das einmalige Aufrufen anstatt wieder und wieder zu selektieren kann schon eine ausreichende Verbesserung bringen.
    Diskussion
    Einer der klassischen Wege, Code zu optimieren, ist das »Herausziehen« von wiederholten Berechnungen aus einer Schleife, so dass sie nur ein Mal durchgeführt werden müssen. Alle Werte, die sich innerhalb der Schleife nicht ändern, sollten auch nur ein Mal vor dem Beginn der Schleife berechnet werden. Wenn es sich dabei um aufwändige Berechnungen handelt, wird die Schleife danach deutlich schneller sein.
    Dies funktioniert auch, wenn es sich bei der »Schleife« um eine Reihe von regelmäßig ausgelösten Events handelt (wie zum Beispiel
mousemove
) und die »Berechnung« ein jQuery-Selektor ist. Durch das Herausziehen der Selektion aus dem Eventhandler wird dieser schneller reagieren.
    Wenn Sie mehrere Selektoren in einer Schleife aufrufen, wird ein Herausziehen aus der Schleife natürlich genauso wirkungsvoll sein.
    ----
    Note
    Warum beginnen
$clientX
und die anderen Variablennamen mit dem Zeichen
$
?
    $
hat in JavaScript keine besondere Bedeutung – es wird wie ein normaler Buchstabe aus dem Alphabet behandelt. In jQuery-Code ist es einfach eine verbreitete Konvention, das Präfix
$
als Kennzeichen dafür zu nehmen, dass die Variable eine Referenz auf ein jQuery-Objekt und nicht auf etwas anderes enthält (zum Beispiel ein DOM-Element), da ein Variablenname wie
$foobar
optisch der JavaScript-Operation
$('#foobar')
ähnelt.
    Das ist insbesondere dann hilfreich, wenn Sie sowohl ein jQuery-Objekt als auch das zugrundeliegende DOM-Element nutzen müssen, zum Beispiel:
var $foo = $('#foo'), foo = $foo[0];
// Jetzt können Sie das jQuery-Objekt nutzen:
$foo.show();
// oder das DOM-Element:
var id = foo.id;
    ----

Schnellere Selektoren schreiben
    Problem
    Ihr Code enthält eine große Zahl von Selektoren der Form
$('.classname')
. Sie puffern sie wie im vorigen Rezept beschrieben, aber die Selektoren haben immer noch einen recht großen Anteil an den Rüstzeiten Ihrer Seite. Sie müssen sie schneller machen.
    Lösung
    Achten Sie zunächst darauf, dass Sie eine aktuelle Version von jQuery nutzen (1.3.2 oder neuer), denn dort sind Selektoren in den meisten Browsern deutlich schneller geworden, insbesondere Klassen-Selektoren.
    Wenn Sie Einfluss auf den Inhalt der HTML-Seite haben, ändern Sie ihn so, dass anstatt
class
-Attributen und Selektoren des Typs
'.xyz'
id
-Attribute und
'#xyz'
-Selektoren genutzt werden:



$('.foo') // Langsamer
$('#bar') // Schneller
    Müssen Sie Klassen-Selektoren nutzen, dann versuchen Sie, eventuell ein übergeordnetes Element mit einem schnelleren ID-Selektor zu finden und dann von dort zu den Kind-Elementen zu gelangen. Nutzen wir zum Beispiel nochmals den HTML-Code aus dem vorigen Beispiel:

    
    ...

Client X:

    Da könnten Sie wie folgt selektieren:
$('.clientX') // Langsamer
$('td.clientX') // Vielleicht schneller
$('#log