Referenzieren von externem Javascript im Vergleich zum Hosten meiner eigenen Kopie

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.

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.

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.

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.

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 .

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 .

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>

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.