Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

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 src="script/script1.js"></script> 
<script src="script/script2.js"></script>

Diese werden nun durch diese Zeile ersetzt:

<script 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.