Referenzieren von externem Javascript im Vergleich zum Hosten meiner eigenen Kopie


42

Angenommen, ich habe eine Web-App, die jQuery verwendet. Ist es besser, die erforderlichen Javascript-Dateien zusammen mit den Dateien meiner Website auf meinen eigenen Servern zu hosten oder auf die CDN von jQuery zu verweisen (Beispiel: http://code.jquery.com/jquery-1.7.1.min.js ) ? ?

Ich kann Profis für beide Seiten sehen:

  • Wenn es auf meinen Servern ist, ist das eine externe Abhängigkeit weniger; Wenn jQuery ausfällt oder die Hosting-Struktur ändert, bricht meine App. Aber ich habe das Gefühl, dass das nicht oft vorkommt. Dazu müssen viele kleine Websites vorhanden sein, und das jQuery-Team möchte vermeiden, dass sie beschädigt werden.
  • Wenn es sich auf meinen Servern befindet, ist dies eine externe Referenz, die jemand als Sicherheitsproblem bezeichnen könnte
  • Wenn es extern referenziert wird, muss ich mir keine Gedanken über die Bandbreite machen, um die Dateien bereitzustellen (obwohl ich weiß, dass es nicht so viel ist).
  • Wenn es extern referenziert wird und ich diese Website auf vielen Servern bereitstelle, die ihre eigenen Kopien aller Dateien benötigen, muss ich mich daran erinnern, eine Datei weniger zu kopieren / aktualisieren.

Die ersten beiden Punkte gelten nur, wenn Sie befürchten, dass Google ausfällt oder gehackt wird.
user16764

1
@ user16764 - oder sie nehmen ihre Kopie von jQuery aus irgendeinem Grund herunter (Politik, wer weiß).
Mr. Jefferson

2
Ein weiterer Grund, dies nicht zu tun, ist die Privatsphäre. Durch die Verwendung von gehosteten Inhalten von Drittanbietern kann dieser Drittanbieter Benutzer verfolgen, bei denen er sich nicht ohne Weiteres abmelden kann.
Ian Newson

auch neigen einige CDNs speziell Google-Hosts manchmal dazu, die Dateien aus bestimmten Ländern
einzuschränken

Antworten:


58

Sie sollten beides tun:

Beginnen Sie mit dem Hosting von einem CDN wie dem von Google, da dieser wahrscheinlich eine höhere Verfügbarkeit aufweist als Ihre eigene Website und für die schnellste Antwortzeit konfiguriert ist. Darüber hinaus verwendet jeder, der eine Seite besucht hat, die mit dem CDN verlinkt, seine zwischengespeicherte Kopie der Datei, sodass er nicht einmal eine Kopie erneut herunterladen muss, wodurch das erstmalige Laden noch schneller wird.

Fügen Sie dann einen Fallback-Verweis auf Ihren eigenen Server hinzu, falls der CDN ausfällt (unwahrscheinlich, aber sicher ist sicher). Fallbacks sind relativ einfach zu verstehen, müssen jedoch an das verwendete Skript angepasst werden:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

Stellen Sie sicher, dass Sie nicht </script>irgendwo innerhalb eines <script>Elements schreiben , da dies das HTML-Element schließt und ein Fehlschlagen des Skripts verursacht. Die einfache Lösung ist es, einen umgekehrten Schrägstrich als Escape zu verwenden: <\/script>.


Ein Grund mehr, beides zu tun:

Wenn Sie eine beliebte CDN Pick ist es sehr unwahrscheinlich , dass es jemals eine Ausfallzeit haben werden, aber in der weit weit Zukunft (~ 18 Monate ab jetzt gegeben Moores Gesetz ) , wenn die Hosting - Formatänderungen oder die Adresse eingestellt wird , oder die Wenn sich das Netzwerk hinter einer Paywall befindet oder etwas anderes, funktioniert Ihr Link möglicherweise nicht mehr wie besehen. Wenn Sie ein Fallback verwenden, haben Sie ein wenig Zeit, sich auf ein neues Format für das Hosting einzustellen, bevor Sie jede Website, die Sie jemals erstellt haben, erneut durchgehen und die CDN-Links ändern müssen.


Ein weiterer Grund, beides zu tun:

Kürzlich wurde ich von einer Reihe von Internetausfällen heimgesucht. Ich konnte weiterhin lokal an Projekten arbeiten, in denen ich lokale Kopien von Skriptressourcen verknüpft hatte, und stellte schnell fest, dass es eine Reihe von Projekten gab, für die lokale Kopien verknüpft werden mussten.


+1 Gibt Ihnen die Vorteile des CDN und deckt auch die möglichen Fallstricke ab.
Quentin-Starin

5
Welche Relevanz hat die Verfügbarkeit? Wenn seine Seite nicht online ist, ist es kaum von Vorteil, die js online zu haben :)
Boris Yankov

3
@BorisYankov, Wenn der CDN nicht verfügbar und Ihre Site aktiv ist und Sie keinen lokalen Fallback verwendet haben, funktioniert Ihre Site nicht. Das ist die Relevanz der Betriebszeit. Wenn Ihre Site nicht erreichbar ist, ist Ihre Site nicht erreichbar und die lokale Kopie spielt keine Rolle.
zzzzBov

Das CDN wird außerdem überall Server haben, sodass Sie die Ressource vom nächstgelegenen Knoten erhalten.
Hanzolo

35

Ich hatte die gleiche Frage, las diesen Artikel und kam auf die Idee, Google meine jQuery-Bibliothek hosten zu lassen.

In dem Artikel werden die Hauptvorteile der Bereitstellung Ihrer Bibliotheken durch das Content Delivery Network (CDN) von Google aufgeführt:

  • Verringerte Latenz - Benutzer, die sich nicht in der Nähe Ihres Servers befinden, können jQuery schneller von Google herunterladen, als wenn Sie sie zwingen, es von Ihrem Server mit beliebiger Position herunterzuladen.
  • Erhöhte Parallelität - Browser begrenzen die Anzahl der Verbindungen, die gleichzeitig hergestellt werden können. Je nach Browser kann diese Beschränkung nur zwei Verbindungen pro Hostname betragen. Durch die Verwendung des CDN für Google AJAX-Bibliotheken wird eine Anforderung an Ihre Website beseitigt, sodass mehr lokale Inhalte gleichzeitig heruntergeladen werden können.
  • Besseres Zwischenspeichern - Mithilfe der Google AJAX-Bibliotheken müssen Ihre Benutzer möglicherweise jQuery überhaupt nicht herunterladen. Wenn Sie jedoch jQuery lokal hosten, müssen Ihre Benutzer es mindestens einmal herunterladen. Jeder Ihrer Benutzer hat wahrscheinlich bereits Dutzende identischer Kopien von jQuery im Cache seines Browsers, aber diese Kopien von jQuery werden ignoriert, wenn sie Ihre Site besuchen.

Denken Sie daran, dass die beiden Punkte, die Sie als Profis für das Hosten Ihrer eigenen Bibliothek aufgeführt haben, Google als Host für die Cloud-Version fungieren. Google weiß, was sie tun, und ist in Bezug auf Verfügbarkeit und Sicherheit vertrauenswürdig. Bei der Beantwortung dieser Frage macht @zzzzBov jedoch eine sehr gute Figur. Er empfiehlt, auch eine lokale Kopie der Bibliothek zu speichern und diese in dem unwahrscheinlichen Fall standardmäßig zu verwenden, dass auf die CDN-Version aus irgendeinem Grund nicht zugegriffen werden kann.


4
Ah, ich bin sicher, dass ich statische Assets besser hosten kann als Google. ;)
Xeoncross

Nicht beide zu verwenden (CDN + lokaler Fallback) ist einfach schlampig. Schade, das ist die beste Antwort, imho.
Quentin-Starin

@qes Fairerweise habe ich am Ende meiner Antwort einen neuen Satz hinzugefügt.
CFL_Jeff

17

Persönlich nehme ich einen Hinweis von http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

Dadurch wird die jQuery-Hauptdatei von Google abgerufen. Wenn sie jedoch aus irgendeinem Grund nicht geladen wird, wird sie in der nächsten Zeile von Ihrem eigenen Server geladen.


5
Dies hat den zusätzlichen Vorteil, dass Sie sich offline entwickeln können.
RSG

Die Verwendung einer protokollbezogenen URL ist nicht mehr so ​​nützlich wie früher (siehe paulirish.com/2010/the-protocol-relative-url ). Es ist hier vernünftig, nur zu tippen https://.
GKFX

5

Es ist besser, ein CDN zu verwenden, und wenn dieses CDN zufällig Google ist, umso besser - wie sowohl @CFL_Jeff als auch @Morons festgestellt haben.

Ich füge diese Antwort hinzu, um auf etwas hinzuweisen, das oft übersehen wird, wenn auf etwas anderes verwiesen wird, wodurch die Warnung vor gemischten Inhalten vermieden wird . Erwägen Sie die Verwendung protokollloser URLs, z.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

Es gibt immer noch einige Support-Probleme bei der Verwendung protokollloser URLs. Sehen Sie sich daher auch die Antworten unter an. Kann ich alle meine http: // -Links auf nur // ändern? auf SO, aber versuchen Sie zumindest, auf irgendeine Weise mit möglichen Warnungen zu gemischtem Inhalt umzugehen .


4

Sie sollten auf die API-Bibliothek von Google verweisen .

Der Hauptgrund dafür ist, das Laden Ihrer Seite zu beschleunigen . Wenn Ihr Benutzer bereits eine andere Site besucht hat, die auf dieselbe Bibliothek verweist, wird sie bereits im Browser-Cache gespeichert und muss überhaupt nicht heruntergeladen werden .


0

Ich könnte mich irren, aber das Implementieren von document.write überschreibt alles, was das DOM hat. Da es eine gute Praxis ist, JavaScript-Dateien am Ende des Körpers zu platzieren,

Ich schlage die folgende Methode vor, die auf vorherigen Antworten basiert:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

0

Ich möchte hinzufügen, dass das Hosten einer lokalen Kopie eine bewährte Methode ist, da keiner der oben genannten Punkte irgendetwas im Zusammenhang mit einer sicheren Haltung angibt, bei der die geografische Position und die strikte White-Listing-Methode unerlässlich sind. Wenn diese Datei nicht lokal gehostet wird, wird möglicherweise die Sicherheit Ihrer Kunden beeinträchtigt.


Eine Sicherheitsrichtlinie, die das CDN von Google oder jQuery auf andere Weise auf eine schwarze Liste setzt oder einschränkt, wird viele Websites beschädigen, nicht nur die des Fragestellers. Mit anderen Worten, es gibt größere Probleme, über die man sich Sorgen machen muss.

2
@Snowman ... wie die Great Firewall in China (die regelmäßig Stack Exchange-Sites unterbricht, für deren Skripte ein CDN verwendet wird)?
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.