Optimierung - JavaScripts zusammenfassen, HTTP-Request sparen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie kann man mehrere JavaScripts zusammenfassen?

03Feb2014

JavaScripts zusammenfassen, HTTP-Request sparen


Die Skriptsprache JavaScript (objektorientierte Programmiersprache) wird manchmal für die Dynamisierung der Inhalte einer Website eingesetzt. Der JavaScript (objektorientierte Programmiersprache)-Quellcode wird entweder im HTML (HyperText Markup Language) zwischen den script-Tags eingebunden oder mittels Attribut aus einer externen Datei geladen, zum Beispiel:
<script type="text/javascript" src="/js/slideshow.js"></script>.

Es ist aber für die Optimierung einer Website sinnvoll, daß so wenige Dateien wie möglich geladen werden müssen. Es werden ja auch Bilder, CSS (Cascading Style Sheet)-Dateien, eingebundene JavaScripte (objektorientierte Programmiersprache) und weitere Elemente der Seite geladen.

Die Ziele der Optimierung in diesem Artikel sind also folgende:
Skriptdateien zusammenfassen um HTTP-Request sparen
Quellcode minimieren

Der Quellcode enthält viele unwichtige Zeichen wie Kommentare, Tabs, Leerzeichen und Zeilenumbrüche. Diese Zeichen dienen nur dem Verständnis und der Lesbarkeit des Quellcode und können daher restlos entfernt werden. Durch diese Optimierung lässt sich die Größe der Skript-Datei um ein Vielfaches verkleinern und damit die Ladezeit der Datei verringern.

Auch hierbei nutze ich ein kleines "php-Script (Skriptsprache: Hypertext Preprocessor)" das ähnlich aufgebaut ist wie das Script im vorherigen Artikel. Ich habe das Script auch wieder dahingehend geändert, dass in der Datei noch zusätzlich der Last-Modified-Header ausgegeben wird, um das aktuelle Änderungsdatum bei einer Analyse anzuzeigen.
Und man findet es ebenfalls auf der Webseite von Webdesign tepelmann.

Beim Test ist mir allerdings ein Fehler beim Entfernen des Zeilenvorschub aufgefallen, so dass ich anfangs die Zeile:

<?php
  ...
  $content = str_replace(array("\r\n","\r","\n","\t"),"", $content);
  ...
?>

geändert hatte in:

<?php
  ...
  $content = str_replace(array("\r\n","\r","\t"),"", $content);
  ...
?>

Aber dann habe ich den tatsächlichen Fehler im Script für die Suchfunktion gefunden, wo ganz am Ende kein Semikolon geschrieben wurde und damit das nächste Script für das "Langsame Scrollen" nicht funktionieren konnte. Nachdem ich den Fehler behoben habe, erhalte ich das folgende Script:

<?php
  header('Content-type:text/javascript');
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  function get_remote_file($url) {
    if (ini_get('allow_url_fopen')) {
      return file_get_contents($url);
    }
    elseif (function_exists('curl_init')) {
      $c = curl_init($url);
      curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($c, CURLOPT_HEADER, 0);
      $file = curl_exec($c);
      curl_close($c);
      return $file;
    }
    else {
    die('Error');
    }
  }

  // JavaScripts zusammenfassen
  $content = get_remote_file('.../js/prefixfree.js');
  $content .= get_remote_file('.../js/index.js');
  $content .= get_remote_file('.../js/smoothscroll.js');

  // Kommentare entfernen
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);

  // Tabs, Leerzeichen und Zeilenumbrüche entfernen
  $content = str_replace(array("\r\n","\r","\n","\t"),"", $content);

  // Ausgabe der zusammengefassten JavaScripts
  echo $content;

?>

Damit werden nun nicht mehr alle JavaScripts (objektorientierte Programmiersprache) einzeln in der Webseite eingebunden, sondern es wird nur noch das php-Script (Skriptsprache: Hypertext Preprocessor), welches die JavaScripts (objektorientierte Programmiersprache) zusammenführt, am Ende der Webseite eingebunden.

<script type="text/javascript" src="globales/alle_js.php"></script>

Für diese Seite wird aus 3 HTTP-Request (Hypertext Transfer Protocol Anforderung) für die einzelnen JavaScripts nur noch 1 HTTP-Request (Hypertext Transfer Protocol Anforderung) für den Aufruf der Datei "alle_js.php" und damit ist die Optimierung bestmöglich umgesetzt.

Zum Seitenanfang springen Λ