javascript asynchron

Ganz sicher habt Ihr schon mitbekommen, dass HTML5 für das Javascript-Tag 2 neue Attribute vorsieht: async und defer.

Jahrelang haben wir das Javascript an das Ende des HTML-Body verlagert, um die Ladegeschwindigkeit der Seite zum Teil drastisch zu erhöhen – nun könnten die beiden Attribute wieder einen Einbau im Kopf erlauben.
Um die Geschwindigkeit zu messen, habe ich im Head-Bereich der Seite die Zeit genommen und dann im geladenen Javascript aus dem DOM der HTML-Seite das erste und das letzte Element gesucht, wobei ich wiederum die Zeit genommen habe. Die Differenz aus unserer Startzeit und der Zeit, bis ein Element gefunden wurde ist von vielen Faktoren abhängig, wobei ich pro Browser nur einen einzigen variiert habe: den Einbau-Ort des Javascripts bzw. sein Attribut.

ff 3.6 
  Einbau im Fuß 1837 - 1837
  Einbau im Kopf 2358 - 2383 (async)
  Einbau im Kopf 1676 - 1701 (defer)
  
Chrome
  Einbau im Kopf 787 - 851 (defer)
  Einbau im Kopf 994 - 1039 (ASYNC)
  Einbau im Fuß unten 792 - 865
  
FF4
  Einbau im Fuß 1197 - 1207
  Einbau im Kopf (async) 351 - 417
  Einbau im Kopf (defer) 359 - 428
  
Opera
  Einbau im Fuß 125 - 234

IE9
  Einbau im Fuß 491 - 662
  Einbau im Kopf 660 - 671

Die gemessenen Zeiten sind immer Millisekunden. Opera und IE9 laden das Javascript so früh nach, dass das DOM noch gar nicht vorhanden ist. Beide bräuchten einen DocumentReade-Listener, um loslaufen zu können.
Die restlichen Browser ziehen sich das Javascript später und parsen es grundsätzlich bei vohrandenem DOM. Bei modernen Browser sieht man relativ schnell, dass der Einbau im Kopf die deutlich bessere Wahl ist. Witzigerweise scheinen die beiden Attribute sich auch auf die Gescwindigkeiten auszuwirken. Zur Zeit würde ich zum Attribut defer tendieren.

Beim Vergleich der Browser und ihrer Geschwindkeit sieht man übrigens ganz schön, dass Microsoft ganz vorne mitspielt und auch, dass Firefox4 endlich wieder ein schneller Mozilla-Browser zu werden verspricht – und, wie konkurrenzlos der Firefox 3.6 rumschleicht.
Für zukünftige Projekte empfiehlt es sich, das Javascript wieder in den Head-Bereich zu tun und mit dem defer-Attribut zu versehen. Für ältere oder zu schnelle Browser würde ich das Script on DocumentReady starten.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s