Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / kreuz-und-quer / tutorials-info-neuigkeiten-javascript / performancegewinn-durch-virtuelles-javascript-file.php

Performancegewinn durch virtuelles JavaScript-File

Dies ist ein Gastbeitrag von Tobias Undeutsch. Es wird beschrieben, wie durch den Einsatz von PHP die Konkurrenzsituation paralleler Downloads bei mehreren eingebundenen JavaScript-Dateien vermieden und somit beschleunigt werden kann.

Da ich zur Zeit an einem größeren, stark JavaScript- und AJAX-basierten Webprojekt arbeite, an welchem vor allem in der Entwicklungs- und Testphase viel geändert werden soll / muss, musste ich mir etwas einfallen lassen, wie ich den Seitenaufbau auf dem Client performanter gestallten kann.

Da alleine die Startseite über 20 verschiedene JS-Files lädt (davon bekanntlich immer nur zwei gleichzeitig), begann ich dort zu schauen was sich machen lässt. Eine Verringerung der Anzahl JS-Files kommt deshalb nicht in Frage, weil mehrere Entwickler mit den Files arbeiten und um das Projekt übersichtlicher zu halten. Die Komplexität für die Programmierer sollte sich demzufolge nicht ändern.

Nach einer kurzen Suche im Internet kam ich auf ein Vorgehen, mit welchem sich die JS-Files auf dem Server zusammenfügen lassen und als eine Datei an den Server gesendet werden: ein virtuelles JavaScript-File!

Dazu hier ein Beispiel:
Im HTML sind zwei JS-Files eingebunden:

<script language="javascript" type="text/javascript" src="script/script1.js"></script> <script language="javascript" type="text/javascript" src="script/script2.js"></script>

Diese werden nun durch diese Zeile ersetzt:

<script language="javascript" type="text/javascript" src="vscript.php"></script>

Die Datei vscript.php auf dem Server:

<?php // Set application type header('Content-type: application/javascript');   // Get content of real javascript files require_once('script/script1.js'); require_once('script/script2.js'); ?>

Das wars dann auch schon, die JS Files werden auf dem Server zusammengefasst und als ein File gesendet!

Ich bin noch einen kleinen Schritt weiter gegangen und lasse mit zwei einfachen preg_replace „single line comments“, Zeilenumbrüche und Einzüge aus den Scripts entfernen, um wirklich nur den benötigen Source an den Client zu senden.
Anmerkung von Jan: Dies hatte ich bereits in diesem Beitrag vor einiger Zeit beschrieben. Dort wird noch ein wenig mehr gefiltert.

So haben die Programmierer alle Vorzüge, welche gut gegliederte Sourcecodes auf mehrere Files verteilt haben und die Client Performance wird verbessert. Als kleines extra wird der JS-Source beim Client schwerer lesbar 😉

Mein fertiges Script:

<?php // Set application type header('Content-type: application/javascript');   // Set variables $str_ouptput;   // Get content of real javascript files $str_output = file_get_contents('script/script1.js'); $str_output .= file_get_contents('script/script2.js');   // Remove single line comments $str_output = preg_replace('#//.*#', '', $str_output);   // Remove line breaks and indents $str_output = preg_replace('#\n|\n\r|\r|\t#', '', $str_output);   // Send fake js echo $str_output; ?>

Beim Schreiben der JS-Files muss nun nur noch penibel darauf geachtet werden, dass alle Semikolon richtig gesetzt werden!

Noch einige Anmerkungen von Jan:
In dem Zustand, wie Tobias es hier geschrieben hat, werden die virtuellen JS-Dateien allerdings nicht im Browser-Cache des Besuchers zwischengespeichert. Die Datei müsste demzufolge bei jedem Seitenaufruf erneut heruntergeladen werden, was einerseits für den Client Zeit kostet und andererseits Last auf dem Server verursacht. Deshalb schlage ich als sinnvolle Ergänzung einige Header-Anweisungen vor. Außerdem kann man das fertige Dokument noch gzippen und verringert dadurch die zu übertragende Datenmenge.

header('Content-type: text/javascript'); header ("cache-control: must-revalidate; max-age: 2592000"); header ("expires: " . gmdate ("D, d M Y H:i:s", time() + 2592000) . " GMT"); ob_start("ob_gzhandler");

Des Weiteren bin ich mir nicht ganz sicher, ob der MIME-Type für JavaScript nicht doch text/javascript ist. Der Firefox ist da manchmal recht penibel. Vielleicht ist es aber auch egal. Kann ja vielleicht durch die Kommentare zu diesem Beitrag noch verifiziert werden.

Und nicht verschweigen möchte ich noch, dass die Generierung der virtuellen Datei natürlich den Server mehr belastet als es die bloße Auslieferung der JS-Dateien täte. In meinen Augen ist dies aber zu vernachlässigen.

Ich danke Tobias vielmals für diesen Beitrag. Falls auch andere Leser mal Lust haben hier etwas zu veröffentlichen, freue ich mich (und bestimmt auch die Leser) über jeden Beitrag.