Woher nehmen Sie die jQuery-Bibliothek auf? Google JSAPI? CDN?

Es gibt einige Möglichkeiten, jQuery und die jQuery-Benutzeroberfläche einzuschließen, und ich frage mich, was die Benutzer verwenden.

• Google JSAPI
• jQuerys Website
• Ihre eigene Site / Server
• ein anderes CDN

Ich habe kürzlich Google JSAPI verwendet, aber festgestellt, dass das Einrichten einer SSL-Verbindung oder sogar das Auflösen von google.com sehr lange dauert. Ich habe Folgendes für Google verwendet:

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>

Ich mag die Idee, Google zu verwenden, damit es beim Besuch anderer Websites zwischengespeichert wird und Bandbreite von unserem Server gespart wird. Wenn es jedoch weiterhin der langsame Teil der Website ist, kann ich das Include ändern.

Was benutzt du? Hattest du irgendwelche Probleme?

Bearbeiten: Ich habe gerade die Website von jQuery besucht und sie verwenden die folgende Methode:

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

Edit2: So habe ich jQuery im letzten Jahr ohne Probleme aufgenommen:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Der Unterschied ist die Entfernung von http:. Wenn Sie dies entfernen, müssen Sie sich keine Gedanken über den Wechsel zwischen http und https machen.

Ohne Zweifel möchte ich JQuery von Google API-Servern bereitstellen lassen. Ich habe mich nicht für die jsapi-Methode entschieden, da ich keine anderen Google-APIs nutze. Sollte sich dies jedoch jemals ändern, würde ich dies in Betracht ziehen ...

Erstens: Die Google API-Server sind auf der ganzen Welt verteilt, anstatt auf meinem einzelnen Serverstandort: Engere Server bedeuten normalerweise schnellere Antwortzeiten für den Besucher.

Zweitens: Viele Leute entscheiden sich dafür, JQuery bei Google zu hosten. Wenn ein Besucher auf meine Website kommt, hat er möglicherweise bereits das JQuery-Skript in seinem lokalen Cache. Vorgespeicherte Inhalte bedeuten normalerweise schnellere Ladezeiten für den Besucher.

Drittens: Mein Webhosting-Unternehmen berechnet mir die verwendete Bandbreite. Es macht keinen Sinn, 18.000 pro Benutzersitzung zu verbrauchen, wenn der Besucher dieselbe Datei an anderer Stelle erhalten kann.

Ich verstehe, dass ich Google einen Teil des Vertrauens entgegenbringe, um die richtige Skriptdatei bereitzustellen und online und verfügbar zu sein. Bis zu diesem Punkt war ich von der Verwendung von Google nicht enttäuscht und werde diese Konfiguration fortsetzen, bis es sinnvoll ist, dies nicht zu tun.

Eine Sache, auf die Sie hinweisen sollten ... Wenn Ihre Website eine Mischung aus sicheren und unsicheren Seiten enthält, möchten Sie möglicherweise die Google-Quelle dynamisch ändern, um die übliche Warnung zu vermeiden, die beim Laden unsicherer Inhalte auf eine sichere Seite angezeigt wird:

Folgendes habe ich mir ausgedacht:

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

UPDATE 08.09.2010 - Es wurden einige Vorschläge gemacht, um die Komplexität des Codes durch Entfernen von HTTP und HTTPS zu verringern und einfach die folgende Syntax zu verwenden:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

Außerdem können Sie die URL ändern, um die Hauptnummer von jQuery wiederzugeben, wenn Sie sicherstellen möchten, dass die neueste Hauptversion der jQuery-Bibliotheken geladen wurde:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

Wenn Sie Google nicht verwenden möchten und jQuery bevorzugen, können Sie den folgenden Quellpfad verwenden (beachten Sie, dass jQuery keine SSL-Verbindungen unterstützt):

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

Ein Grund, warum Sie möglicherweise auf einem externen Server hosten möchten, besteht darin, die Browserbeschränkungen für gleichzeitige Verbindungen zu einem bestimmten Server zu umgehen.

Da sich die von Ihnen verwendete jQuery-Datei jedoch wahrscheinlich nicht sehr oft ändert, wird der Browser-Cache aktiviert und dieser Punkt wird größtenteils zum Thema.

Der zweite Grund, es auf einem externen Server zu hosten, besteht darin, den Datenverkehr auf Ihren eigenen Server zu verringern.

Angesichts der Größe von jQuery ist es jedoch wahrscheinlich, dass dies nur ein kleiner Teil Ihres Datenverkehrs ist. Sie sollten wahrscheinlich versuchen, Ihren tatsächlichen Inhalt zu optimieren.

jQuery 1.3.1 min ist nur 18k groß. Ich denke nicht, dass das ein zu großer Erfolg ist, um beim ersten Laden der Seite nachzufragen. Danach wird es zwischengespeichert. Infolgedessen hoste ich es selbst.

Wenn Sie Google verwenden möchten, reagiert der direkte Link möglicherweise schneller. In jeder Bibliothek ist der Pfad für die direkte Datei aufgeführt. Dies ist der jQuery-Pfad

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Lesen Sie einfach Ihre Frage noch einmal. Gibt es einen Grund, warum Sie https verwenden? Dies ist das Skript-Tag, das Google in seinem Beispiel auflistet

<script src="http://www.google.com/jsapi"></script>

Ich möchte nicht, dass eine öffentliche Site, die ich entwickelt habe, von einer externen Site abhängt, und daher würde ich jQuery selbst hosten.

Sind Sie bereit, einen Ausfall auf Ihrer Website zu haben, wenn die andere (Google, jquery.com usw.) ausfällt? Weniger Abhängigkeiten ist der Schlüssel.

Vorteile: Host bei Google hat Vorteile

• Wahrscheinlich schneller (ihre Server sind optimierter)
• Sie behandeln das Caching korrekt - 1 Jahr (wir haben Schwierigkeiten, die Änderungen vornehmen zu dürfen, um die Header direkt auf unseren Servern zu platzieren)
• Benutzer, die bereits einen Link zu der von Google gehosteten Version auf einer anderen Domain hatten, haben die Datei bereits in ihrem Cache

Nachteile:

• Einige Browser sehen es möglicherweise als domänenübergreifendes XSS an und lassen die Datei nicht zu.
• Insbesondere Benutzer, die das NoScript-Plugin für Firefox ausführen

Ich frage mich, ob Sie von Google EINSCHLIESSEN und dann das Vorhandensein einer globalen Variablen oder dergleichen überprüfen können und ob die Abwesenheit von Ihrem Server geladen wird.

Hier gibt es einige Probleme. Zunächst die von Ihnen angegebene asynchrone Lademethode:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

hat ein paar Probleme. Skript-Tags unterbrechen das Laden der Seite, während sie abgerufen werden (falls erforderlich). Wenn sie langsam geladen werden, ist dies schlecht, aber jQuery ist klein. Das eigentliche Problem bei der oben beschriebenen Methode besteht darin, dass das Laden von jquery.js für viele Seiten unabhängig erfolgt und das Laden und Rendern beendet wird, bevor jquery geladen wurde, sodass jedes von Ihnen vorgenommene jquery-Styling eine sichtbare Änderung für den Benutzer darstellt .

Der andere Weg ist:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Probieren Sie einige einfache Beispiele aus, z. B. eine einfache Tabelle, und ändern Sie den Hintergrund der Zellen mit der Methode setOnLoadCallback () gegen $ (document) .ready () mit einer statischen Last von jquery.min.js in gelb. Bei der zweiten Methode tritt kein Flimmern auf. Der erste Wille. Persönlich denke ich, dass dies keine gute Benutzererfahrung ist.

Führen Sie als Beispiel Folgendes aus:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

Sie sollten die Tabelle sehen und dann werden die Zeilen gelb.

Das zweite Problem mit der Methode google.load () besteht darin, dass nur ein begrenzter Bereich von Dateien gehostet wird. Dies ist ein Problem für jquery, da es extrem Plug-In-abhängig ist. Wenn Sie versuchen, ein jquery-Plugin mit einem <script src="...">Tag einzuschließen, schlägt google.load()das Plug-in wahrscheinlich mit den Meldungen "jQuery ist nicht definiert" fehl, da es noch nicht geladen wurde. Ich sehe keinen Weg daran vorbei.

Das dritte Problem (bei beiden Methoden) ist, dass es sich um eine externe Last handelt. Angenommen, Sie haben einige Plugins und Ihren eigenen Javascript-Code, müssen Sie mindestens zwei externe Anforderungen zum Laden Ihres Javascript erfüllen. Sie sind wahrscheinlich besser dran, jquery, alle relevanten Plug-Ins und Ihren eigenen Code zu erhalten und ihn in einer minimierten Datei abzulegen.

Von Sollten Sie die Ajax Libraries API von Google für das Hosting verwenden? ::

In Bezug auf die Ladezeiten laden Sie tatsächlich zwei Skripte - das jsapi-Skript und das mootools-Skript (die komprimierte Version von oben). Das sind also eher zwei als eine Verbindung. Nach meiner Erfahrung war die Ladezeit tatsächlich 2-3 Mal langsamer als das Laden von meinem persönlichen freigegebenen Server, obwohl sie von Google stammte, und meine Version der komprimierten Datei war einige K größer als die von Google. Dies auch, nachdem die Datei geladen und (vermutlich) zwischengespeichert wurde. Also für mich, da die Bandbreite nicht viel ausmacht, wird es keine Rolle spielen.

Schließlich haben Sie das potenzielle Problem, dass ein paranoider Browser die Anforderung als eine Art XSS-Versuch kennzeichnet. Dies ist normalerweise kein Problem mit Standardeinstellungen, aber in Unternehmensnetzwerken, in denen der Benutzer möglicherweise nicht die Kontrolle darüber hat, welchen Browser er verwendet, geschweige denn über die Sicherheitseinstellungen, bei denen Sie möglicherweise ein Problem haben.

Am Ende kann ich also nicht wirklich sehen, wie ich die Google AJAX-API für jQuery verwende (die "vollständigeren" APIs sind in gewisser Hinsicht eine andere Geschichte), außer um hier Beispiele zu veröffentlichen.

Zusätzlich zu Leuten, die empfehlen, es auf einem eigenen Server zu hosten, hatte ich vorgeschlagen, es in einer separaten Domain (z. B. static.website.com) zu belassen, damit Browser es getrennt von anderen Content-Threads laden können. Dieser Tipp funktioniert auch für alle statischen Dinge, z. B. Bilder und CSS.

Ich muss -1 für die auf Google gehosteten Bibliotheken stimmen. Sie sammeln Daten im Google Analytics-Stil mit ihren Wrappern um diese Bibliotheken. Zumindest möchte ich nicht, dass ein Client-Browser mehr tut, als ich von ihm verlange, geschweige denn alles andere auf der Seite. Schlimmer noch, dies ist Googles "neue Version", nicht böse zu sein - mit unauffälligem Javascript, um mehr Nutzungsdaten zu sammeln.

Hinweis: Wenn sie diese Praxis geändert haben, super. Als ich das letzte Mal überlegte, die gehosteten Bibliotheken zu verwenden, überwachte ich den ausgehenden http-Verkehr auf meiner Website, und die regelmäßigen Anrufe an Google-Server waren nicht zu erwarten.

Ich mag diesbezüglich altmodisch sein, aber ich runzele immer noch die Stirn beim Hotlinking. Vielleicht ist Google die Ausnahme, aber im Allgemeinen ist es wirklich nur eine gute Art, die Dateien auf Ihrem eigenen Server zu hosten.

Ich werde dies als Grund hinzufügen, diese Dateien lokal zu hosten.

Kürzlich konnte ein Knoten in Südkalifornien auf TWC die Domäne ajax.googleapis.com (nur für Benutzer mit IPv4) nicht auflösen, sodass wir keine externen Dateien erhalten. Dies war bis gestern zeitweise (jetzt ist es dauerhaft). Da es zeitweise auftrat, hatte ich unzählige Probleme bei der Behebung von SaaS-Benutzerproblemen. Wir haben unzählige Stunden damit verbracht, herauszufinden, warum einige Benutzer keine Probleme mit der Software hatten und andere tankten. In meinem üblichen Debugging-Prozess habe ich nicht die Angewohnheit, einen Benutzer zu fragen, ob IPv6 deaktiviert ist.

Ich bin über das Problem gestolpert, weil ich selbst diese bestimmte "Route" zur Datei verwendet habe und auch nur IPV4 verwende. Ich entdeckte das Problem mit Entwicklertools, die mir sagten, dass jquery nicht geladen wurde, und begann dann, Traceroutes usw. durchzuführen, um das eigentliche Problem zu finden.

Danach werde ich höchstwahrscheinlich nie mehr zu extern gehosteten Dateien zurückkehren, weil: Google nicht ausfallen muss, damit dies zu einem Problem wird, und ... jeder dieser Knoten kann durch DNS-Hijacking kompromittiert werden und böswillige JS liefern anstelle der eigentlichen Datei. Ich dachte immer, ich wäre sicher, dass eine Google-Domain niemals ausfallen würde. Jetzt weiß ich, dass jeder Knoten zwischen einem Benutzer und dem Host ein Fehlerpunkt sein kann.

Ich füge nur die neueste Version von der jQuery-Site hinzu: http://code.jquery.com/jquery-latest.pack.js Sie entspricht meinen Anforderungen und ich muss mich nie um Aktualisierungen kümmern.

BEARBEITEN: Kontrollieren Sie eine wichtige Web-App auf jeden Fall. Laden Sie es herunter und servieren Sie es selbst. Aber für meine persönliche Seite könnte es mich nicht weniger interessieren. Dinge verschwinden nicht auf magische Weise, sie werden normalerweise zuerst veraltet. Ich halte mich auf dem Laufenden, um zu wissen, was ich für zukünftige Versionen ändern muss.

Hier einige nützliche Ressourcen, die Ihnen hoffentlich bei der Auswahl Ihres CDN helfen können. MS hat kürzlich eine neue Domain für Zustellbibliotheken über ihr CDN hinzugefügt.

Altes Format: http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js Neues Format: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

Dies sollte nicht alle Cookies für microsoft.com senden. http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

Hier einige Statistiken zu den beliebtesten Technologien, die im Internet für alle Technologien verwendet werden. http://trends.builtwith.com/

Hoffnung kann Ihnen bei der Auswahl helfen.

Wenn ich für die ‚live‘ Website verantwortlich bin besser, ich von allem , was sich bewusst , dass auf und geht in meine Seite. Aus diesem Grund hoste ich die jquery-min-Version entweder selbst auf demselben Server oder auf einem statischen / externen Server, aber so oder so an einem Ort, an dem nur ich (oder mein Programm / Proxy) die Bibliothek aktualisieren kann, nachdem ich jede Änderung überprüft / getestet habe

Im Kopf:

  (function() {
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  })();

Ende des Körpers:

<script type="text/javascript">
google.load("jquery", "version");
</script>

Ich hoste es mit meinen anderen js-Dateien auf meinem eigenen Server und kombiniere und minimiere sie (hier mit django-compresser, aber das ist nicht der Punkt), um als nur eine js-Datei mit allem auf der Site bereitgestellt zu werden muss hineingesteckt werden. Sie müssen ohnehin Ihre eigenen js-Dateien bereitstellen, daher sehe ich keinen Grund, die zusätzlichen jquery-Bytes auch dort nicht hinzuzufügen - einige kbs sind viel billiger zu übertragen als mehr Anfragen. Sie sind von niemandem abhängig, und sobald Ihr minimiertes js zwischengespeichert ist, sind Sie auch superschnell.

Beim ersten Laden kann eine CDN-basierte Lösung gewinnen, da Sie die zusätzlichen JQuery-Kilobyte von Ihrem eigenen Server laden müssen (jedoch ohne zusätzliche Anforderung). Ich bezweifle jedoch, dass der Unterschied spürbar ist. Und dann wird Ihre eigene gehostete Lösung beim ersten Laden mit geleertem Cache wahrscheinlich immer viel schneller sein, da mehr Anforderungen (und DNS-Lookups) erforderlich sind, um die CDN-Abfrage abzurufen.

Ich frage mich, wie dieser Punkt fast nie erwähnt wird und wie CDNs die Welt zu erobern scheinen :)