Nachträgliches JavaScript

Das erfolgreiche Webseiten heutzutage aus 100% tabellenfreie Layouts bestehen, die absolut keine Styling informationen beinhalten ist kein Geheimnis mehr. Die Trennung von Inhalt und Design ist zum Standard geworden und die alten Tabellen Layouts sind schon fast in Vergessenheit geraten. Wir gehen aber noch einen Schritt weiter und trennen auch das JavaScript vom HTML Kode (unobstrusive JavaScript). 

Die Entkopplung, bzw. späte Verbindung von JavaScript an den HTML Kode (unobstrusive JavaScript) hat mehere Vorteile. Zum einen erhöht sich die Kompatibilität zu Browsern auf PDAs und SmartPhones, da diese zumeist ohne JavaScript Unterstützung kommen. Zum anderen kann auch der JavaScript Kode nachträglich gepflegt werden ohne das HTML Kode (PHP Kode) abgeändert werden müsste. 

Es existiert aber noch ein weitaus wichtigerer Grund JavaScript nicht direkt an den HTML Kode zu binden und das ist Geschwindigkeit. Hierzu schauen Sie sich bitte die unten abgebildete Auswertung einer Web2.0 Seite an.

Abb: Zugriffszeiten, gemessen aus HaiKou, China gegen einen Server in Deutschland 

Als erstes wird der HTML Kode geladen (index.php, blau markiert). Wie Sie erkennen können werden dann die organgen JavaScript Dateien (.js) hintereinander geladen. Die Webseite ist erst zu sehen, wenn auch die grünen Stylesheets (.css) geladen wurden. Bis dies geschehen ist bleibt der Bildschirm weis. Ab dem Zeitpunk an dem das CSS da ist, wird die Seite vom Browser dargestellt. Die lila gefärbten Dateien sind Bilder, die stets im Hintergrund von den Browsern geladen werden. Hierbei ist zu beachten, dass die Bilder stets mit der Bildgrösse (Width, Height) im HTML eingebunden werden müssen(!). Wenn dies nicht geschieht, wartet der Browser solange mit der Darstellung der Seite, bis er zumindest alle Größenangaben der Bilder vom Server erhalten hat. Und je nachdem wie gut oder schlecht Ihr Server konfiguriert ist, kann das seine Zeit in Anspruch nehmen.

Bei dem nachträglichem Einbinden des Javascripts passiert nun folgendes. Der komplette Bereich mit dem JavaScript enfällt zunächst einmal. D.h. die Seite wird rasent schnell dargestellt. In dem Moment, wo der Browser mit der Darstellung beginnt, wird ein sogenannter OnLoad Event ausgelößt. In diesem wird von einem drei zeiligem JavaScript Programm, dass sich im HTML Kopf befindet, die benötigten JavaScript Dateien im Hintergrund, also so das der Benutzer nichts merkt, geladen. Wenn dies geschehen ist werden die HTML Elemente nachträglich mit JavaScript Funktionen versorgt. Wenn der Browser kein JavaScript kann, werden die Dateien auch gar nicht erst geladen.

Der Unterschied ist dann, dass obige Seite vom Benutzer bereits nach ca. 11sek. gelesen werden kann und nicht erst nach 38 Sekunden. Wer jetzt feststellt "Bei 11 Sekunden ist schon der Wurm drinn!", der hat völlig Recht. Bitte bedenken Sie, dass die hier dargestellten Zugriffzeiten von China aus auf eine Seite in Deutschland ermittelt wurden. 

Der Nachteil dieses Verfahrens sei hier auch erwähnt. Die JavaScript Funktionen können natürlich auch dann erst genutzt werden, wenn das JavaScript geladen ist. Dies kann ggf. zu Wartezeiten führen. Also Seiten, die mehr auf JavaScript Funktionalitäten getrimmt sind, denn auf lesbaren Inhalt sollten von dieser Methode Abstand nehmen. Bei durchschnittlichen Seiten, die JavaScript sparsam einsetzten kann unobstrusive JavaScript ein echter Gewinn sein. Mischformen sind natürlich auch denkbar. Dies ist sogar ein Muss für viele IE Hacks, da sich sonst die Seite auf dem Internet Explorer komplett unerwünscht verhält.