HomeKontaktImpressum
Sie sind hier: Home

Einbetten von JavaScript-Code

Gerade bei modernen Internetseiten, die – nach Vorbild des Web 2.0 – vermehrt auf Funktionalität und Interaktion mit dem Benutzer setzen, spielt JavaScript seine Stärken aus. Doch der Umfang dieser Frameworks wächst stetig an und führt zu immer mehr externen Script-Dateien, die zudem an Größe gewinnen.

Wie bereits in den vorherigen Ausführungen dargelegt wurde, hängt die Entscheidung für oder wider der Integration von Scripten in eine Internetseite davon ab, wie Umfangreich diese Bibliotheken, die auf dem Client des Seitenbesuchers (Webbrowser) ausgeführt werden, sind. Eine einfache und weit verbreitete Scriptsprache zur Umsetzung von Browseranwendungen stellt JavaScript dar. Im Zuge der Einführung von Anwendungen aus dem Lager des Web 2.0, wo JavaScript eingesetzt wird, um eine flüssigere Bedienbarkeit von Webanwendungen oder eine bessere Interaktion mit dem Benutzer zu gewährleisten, kommen derartige Scripte immer häufiger zum Einsatz.

Hinzu kommen Anwendungen, die – unter Verwendung von Ajax (Akronym aus „Asynchronous JavaScript and XML”) – sich ihre Daten über eine XML-Schnittstelle von einem Webserver holen, ohne dabei einen neuen Seitenaufruf zu generieren. Dabei werden nur die zu einem Bearbeitungszeitpunkt benötigten Informationen abgerufen. Zwar werden derartige Bibliotheken zunehmend mächtiger, allerdings auch immer umfangreicher. Das gilt natürlich auch im Hinblick auf den benötigten Speicherbedarf – besonders dann, wenn auch die enthaltenen Kommentare im Quelltext verbleiben und auf das Produktivsystem übernommen werden.

Gerade bei umfangreichen Frameworks sollten einzelne Javascript-Dateien, auf die der Code während der Entwicklung verteilt wurde, stets zu einer Datei zusammengefasst und in einer externen JS-Datei abgelegt werden. Hierdurch wird zum Herunterladen sämtlicher Script-Komponenten nur noch ein HTTP-Request benötigt. Auf diese Art werden einzelne Klassen, Funktionen oder andere Definitionen, die – aufgrund eventuell gegebener Abhängigkeiten – einen bestimmten Ablauf im Code voraussetzen, auch in korrekter Reihenfolge definiert. Zwar kostet die externe Speicherung des Codes beim Laden der Internetseite einen Aufruf, allerdings würde man das Einbetten des Scripts in die HTML-Datei mit deutlich höherem Traffic und einer relativ langen Ladezeit erkaufen.

Insbesondere bei mächtigen Frameworks ist das Ausfiltern von Script-Kommentaren und überflüssigen Leerzeichen von Vorteil. Diese Aufgabe kann beispielsweise von einem speziellen Tool zum Komprimieren von JavaScript-Code erledigt werden. Derartige Tools entfernen nicht nur unnötige Zeichen und Kommentare, sondern verkleinern das Script darüber hinaus noch, indem beispielswiese die Namen von Variablen im Script durch kürzere Bezeichner ersetzt werden. Allein mit dieser Methode kann der Quelltext leicht um die Hälfte des ursprünglichen Umfangs reduziert werden.

Sollen die Scripte lediglich in Form statischer JS-Dateien angeboten werden, so lohnt – gerade bei großen Frameworks – die Auslieferung als ZIP-Datei. Hier sollten auf dem Webserver zwei Dateien gleichen Inhalts abgelegt sein, von denen die Eine das unkomprimierte Script enthält und die Andere eine mit einem Packprogramm komprimierte Dateiversion. Per Eintrag in der .htaccess-Datei wird dann entschieden, welche der beiden Dateien ausgeliefert werden kann. In jedem HTTP-Request-Header teilt nämlich der Webbrowser dem Webserver mit, ob dieser komprimierte Dateien verarbeiten kann oder nicht. Anhand der hierüber gewonnenen Informationen liefert der Webserver die entsprechende Dateiversion an den Browser aus.

Am effektivsten ist es, wenn man beide Verfahren – JavaScript-Komprimierung und nachgeschaltetes Packen – miteinander kombiniert. Mit deser Vorgehensweise kann die Größe der durch den Webserver auszuliefernden JavaScript-Datei auf unter 30% der ursprünglichen Dateigröße gebracht werden – wodurch deutlich weniger Traffic erzeugt wird.

Wird JavaScript-Code dagegen direkt in eine Internetseite eigebettet, so ist es – insbesondere bei Zugriffen auf HTML-Elementobjekte – unter Umständen von großer Bedeutung, an welcher Stelle im Quellcode innerhalb einer Website diese Einbettung vorgenommen wird. Näheres erfahren Sie unter JavaScript/DOM und Zugriffe per getElementById, wo auf die Bedeutung der Position von JavaScript-Code innerhalb einer Internetseite eingegangen wird.

  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website