jQuery

Knowledge Base

jQuery

jQuery mit Content Delivery Netzwerk (CDN) einbinden

  • jQuery steht als Download zur Verfügung und kann als Datei auf dem eigenen Server abgelegt werden.

Diese kann anschließend in die HTML-Seite direkt eingebunden werden - z. B. nach der Speicherung der Datei "jquery.js" im Pfad "js":

<script type="text/javascript" src="js/jquery.js"></script>

Es gibt aber auch die Möglichkeit, jQuery über ein Content Delivery Netzwerk (CDN) einzubinden, z. B. über folgende Download-Orte (bitte nur einmal und nur eine der beiden jQuery-Versionen (also entweder 1.x oder 2.x) einsetzen)

  • jQuery.com direkt:
    <script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
  • Google developers:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    
    
        
  • Microsoft ASP.NET:
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>

Die Einbindung über ein CDN ist für den produktiven Einsatz gedacht - während der Entwicklung ist eine lokale Version vermutlich performanter (als der Download über ein CDN). Es gibt für den Einsatz im produktiven Bereich Vor- und Nachteile:

Vorteile der Einbindung über CDN:

  • Die gewünschte Version wurde beim (End-)Benutzer evtl. bereits für eine andere Webseite geladen (weil diese jQuery auch über dasselbe CDN lädt) und muss dann nicht mehr erneut geladen werden (Caching)
  • Viele Browser sind so eingestellt, dass sie eine maximale Anzahl an Anfragen pro Server parallel senden - als Anfragen zählt nicht nur die HTML-Seite selbst, sondern auch das Laden einzelner Bilder, CSS- oder JS-Dateien. Werden diese von unterschiedlichen Servern (z. B. eigener Webserver und CDN) geladen, können mehr Anfragen parallel bearbeitet werden (Lade-Performance)
  • Ein CDN ist u. U. schneller beim Ausliefern der Datei als der eigene Webserver (Lade-Performance)
  • Der eigene Server und der Traffic wird entlastet - denn die Dateien, die über CDN ausgeliefert werden müssen, entfallen (Lade-Performance, Traffic-Kostenreduktion)

Nachteile:

  • Es gibt eine zusätzliche Abhängigkeit zu einem anderen System - fällt das CDN aus, funktioniert auch automatisch die Webseite nicht mehr (selbst, wenn der Server einwandfrei funktioniert). Das ist auch der Fall, wenn eine "alte" Version vom CDN entfernt (das entscheidet der CDN-Betreiber) oder umbenannt wird.
  • Da gerade jQuery eine Bibliothek ist, die als Basis für eigenen JavaScript Code bzw. andere Frameworks dient, muss diese zwingend zuerst geladen werden - d. h. ein asnchrones Laden ist mittels CDN nicht möglich (da dann die Reihenfolge mit anderen Script-Dateien nicht vorhersagbar ist). Deshalb wird jQuery dann oft synchron vor dem abschließenden </body> Tag geladen oder mit dem Attribut "defer", weil hier die Reihenfolge (aller mit defer geladenen Skripte bestimmt werden kann).

CDN-Fallback

Um das Problem der Abhängigkeit zu kompensieren, kann ein Fallback eingesetzt werden - der Trick: jQuery wird prinzipiell über ein CDN geladen, aber schlägt das fehl, wird alternativ die Version von einem anderen CDN oder (evtl. immer als letzter Fallback) direkt vom eigenen Server geladen.