Layout-Änderungen und Animationen
Am langsamsten wird der DOM-Zugriff, wenn ein ständiger Wechsel aus Lesen, Berechnen von Attributwerten und Ausgabe im Gange ist. Deshalb sollte Ihr Code idealerweise so strukturiert sein, dass in einer ersten Phase nur Werte gelesen werden. In einer zweiten Phase wird dann das DOM modifiziert. Ersetzen Sie Code wie
function langsameSache() {
var left1 = $('#Objekt1').css('left');
$('#anderesObjekt1').css('left', left);
var left2 =[k] $('#Objekt2').css('left');
$('#anderesObjekt2').css('left', left); }
durch
function schnelleSache () {
var left1 = $('#Objekt1').css('left');
var left2 = $('#Objekt2').css('left');
$('#anderesObjekt1').css('left', left);
$('#anderesObjekt2').css('left', left); }
In der ersten Variante müssen Styles und Layout zweimal neu berechnet werden, in der zweiten nur einmal - für das exakt gleiche Ergebnis. Messen Sie mit einem Profiler nach und überzeugen Sie sich selbst vom Geschwindigkeitsgewinn durch die zweite Version. Eine entsprechende Optimierung lässt sich bestimmt in sehr vielen Fällen anwenden - mit erstaunlichen Ergebnissen. Allerdings müssen Sie bei Layout-Änderungen und Animationen immer bedenken, wie der Browser JavaScript ausführt, und Ihren Code entsprechend gestalten.
Die JavaScript-Ausführung im Browser folgt nämlich einem bestimmten Timing. Normalerweise befindet sich der Browser in einer Art "Stand-by-Modus". Durch ein vom Nutzer ausgelöstes Event, einen Timer-Aufruf oder eine andere Aktion wird der Browser aus diesem Modus aufgeweckt. In der Regel wartet er, bis die Aktion beendet ist, bevor er ein neues Bild der Website zeichnet (es gibt ein paar Ausnahmen, zum Beispiel der Aufruf von Dialog-Boxen). Das hat eine wichtige Konsequenz: Wenn Ihr JavaScript zur Animation eines HTML5-Objekts länger als 1/25 Sekunden braucht, ehe es fertig ausgeführt ist, können Sie keine flüssige Bewegung im Browser darstellen. Denn der Browser wiederholt das Zeichnen des Objekts eben erst nach Ende der Skriptausführung. Damit das menschliche Auge eine Bewegung sicher als fließend sieht, sollte sie aber aus mindestens 25 Bildern pro Sekunde bestehen.