Das haben Sie schon einmal gesehen
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Dies ist eine Möglichkeit, eine JavaScript-Bibliothek wie jQuery direkt vom Google CDN (Content Delivery Network) zu laden. Sie können diese von ScriptSrc.net schnell kopieren und einfügen.
Sehen Sie in der obigen URL, wie sie sich speziell auf 1.4.4 bezieht? Dieser kleine Teil der URL kann geändert werden. Vielleicht haben Sie ihn schon einmal so verwendet gesehen.
| /1.4.4/ | Lädt diese ganz bestimmte Version von jQuery, die sich niemals ändern wird. |
|---|---|
| /1.4/ | Heute wird dies 1.4.4 laden. Wenn und wann jQuery zu 1.4.5 wechselt, wird diese URL darauf verweisen. Wenn und wann jQuery zu 1.5 wechselt, wird es auf die letzte Veröffentlichung von 1.4 verlinken. |
| /1/ | Heute wird dies 1.4.4 laden. Wenn und wann jQuery zu 1.5 wechselt, wird diese URL nun darauf verweisen. Wenn und wann jQuery zu 2.0 wechselt, wird es auf die letzte Veröffentlichung von jQuery 1.x verlinken. |
Soweit ich weiß, gibt es keine wirklich zuverlässige Methode, um auf den „absolut neuesten“ Build von jQuery zu verlinken (z. B. der, der immer noch funktionieren würde, wenn jQuery zu 2.0 wechselt und Nachtschicht-Builds einschließt). Lassen Sie uns herausfinden, welche wir verwenden sollten.
Eine kleine Erinnerung, warum wir das überhaupt tun
Die Gründe dafür sind am besten von Dave Ward dargelegt worden
- Reduzierte Latenz – Datei wird von einem buchstäblich-geografisch näheren Server geliefert.
- Erhöhte Parallelität – Browser begrenzen, wie viele Ressourcen gleichzeitig von einer einzelnen Domain heruntergeladen werden können, einige bis zu zwei. Da dies google.com und nicht yoursite.com ist, zählt es nicht zu diesem Limit.
- Bessere Zwischenspeicherung – Es besteht eine ziemlich gute Chance, dass Ihre Besucher bereits eine Kopie dieser Datei im Cache ihres Browsers haben, was die schnellstmögliche Methode zum Laden ist.
Dem würde ich hinzufügen
- Spart Bandbreite – Die minimierte Version von jQuery 1.4.4 ist 82k. Wenn Sie also 1.000.000 Seitenaufrufe ohne lokalen Cache hätten, wären das 78 GB Datenübertragung, was nicht unerheblich ist.
Caching-Header
Nummer 1 und 2 oben helfen unabhängig davon, aber das Caching bedarf einer etwas ausführlicheren Diskussion. Es stellt sich heraus, dass die von Ihnen gewählte Namenskonvention für den Caching-Aspekt sehr wichtig ist. Paul Irish hat einige grundlegende Forschungsergebnisse dazu. Ich habe diese Forschung wiederholt und die Ergebnisse sind unten aufgeführt. Es stellt sich heraus, dass nur die Verlinkung auf eine direkte exakte Version ordnungsgemäße Caching-Header aufweist.
| /1.4.4/ | Ein Jahr | public, max-age=31536000 |
Screenshot |
|---|---|---|---|
| /1.4/ | Eine Stunde, streng | public, must-revalidate, proxy-revalidate, max-age=3600 |
Screenshot |
| /1/ | Eine Stunde, streng | public, must-revalidate, proxy-revalidate, max-age=3600 |
Screenshot |
Eine Stunde ist in diesem Zusammenhang ziemlich nutzlos. Es ergibt aber schon Sinn. Wenn 1.4.5 herauskäme, würden alle, die einen /1.4/-Link verwenden und einen einjährigen Ablauf-Header hatten, immer noch 1.4.4 erhalten, und das ist nicht gut.
Latenz, Parallelität und Bandbreite sind immer noch wichtige Faktoren, aber sie verblassen im Vergleich zum Caching. Wenn Ihnen das Caching also sehr wichtig ist, ist die Verlinkung auf eine direkte Version Ihre einzige Option.
Was wählen?
| /1.4.4/ | Ändert sich nie, also wird er nie etwas kaputt machen. Bestes Caching. Am klarsten zu verstehen. |
|---|---|
| /1.4/ | Möglich, aber unwahrscheinlich, dass er durch zukünftige Updates etwas kaputt macht (Unter-Punkt-Releases sind eher Fehlerbehebungen als API-Änderungen). Ziemlich nutzloses Caching-Level. |
| /1/ | Wahrscheinlicher, dass er durch zukünftige Updates etwas kaputt macht (Punkt-Releases können Dinge ändern). Ziemlich nutzloses Caching-Level. |
Ich würde sagen, am besten verwenden Sie in fast allen Szenarien die direkten Version-Links. Die nur-Punkt-Links sind ziemlich nutzlos. Die nur-Versions-Links könnten für persönliche Demos nützlich sein, bei denen Sie möchten, dass Ihre eigene Demo fehlschlägt, damit Sie wissen, wie Sie sie reparieren können.
Skripte kombinieren
Wenn Sie JavaScript-Dateien zu einer einzigen Datei zusammenfassen und so ausliefern können (wie vielleicht dies oder dies), ist es möglicherweise besser, dies zu tun, auch wenn sie von Ihrem eigenen Server oder CDN stammen. Eine Anfrage ist fast immer besser als mehrere.
Nicht nur jQuery
Diese gleiche Namenskonvention / Struktur wird für alle JavaScript-Bibliotheken auf Googles CDN verwendet. Ich habe MooTools getestet und all die gleichen Dinge gelten.
Andere CDNs
Es gibt auch andere CDNs, die jQuery hosten: Microsoft und jQuery.com selbst. Keine davon hat die gleiche Art von Namenskonvention, daher ist das nicht wirklich wichtig. Beachten Sie jedoch, dass ein direkter Link auf dem CDN von Microsoft den schönen einjährigen Cache bietet.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
Die Version von jQuery.com scheint überhaupt keine Caching-Informationen im Header zu senden.
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
Die Microsoft CDN-Domäne wurde kürzlich von „ajax.microsoft.com“ in „ajax.aspnetcdn.com“ geändert, um sie zu einer vollständig cookie-losen Domäne zu machen. Siehe http://www.asp.net/ajaxlibrary/cdn.ashx
Gute Idee, danke für den Tipp!
Zunächst einmal ein guter Beitrag.
Nur eine Anmerkung zum Abschnitt „Skripte kombinieren“
Während Sie mit dem Nachteil mehrerer Anfragen völlig recht haben, ist es meiner Meinung nach nicht schlecht, das Caching zu nutzen, das Google und andere CDNs für Dinge in der Größe von jQuery (ich glaube, es sind etwa 30k) für Seiten mit hohem Traffic bereitstellen. Ich neige dazu, das CDN von Google zu nutzen, um jQuery herunterzuladen, und dann alle meine websitespezifischen Skripte zu einer Datei zu kombinieren. Ich bin jedoch an den Gedanken aller zu meiner Vorgehensweise interessiert.
Früher habe ich PHP eine benutzerdefinierte JavaScript-Datei pro Seite ausgeben lassen, aber das ist viel zusätzlicher Programmieraufwand für nicht allzu großen Nutzen. Caching ist wichtiger. Manchmal binde ich noch eine lokale Fallback-Lösung für das CDN ein (siehe unten), aber nur, wenn jQuery tatsächlich geschäftskritisch ist.
Viel sauberer ist das
Ich habe mehrmals gehört: „Document.write muss sterben!“
Also vermeide ich es, wann immer möglich. Schauen Sie sich das hier an, um jQuery zu laden, wenn es noch nicht geladen wurde: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/ (ja, es ist ein Bookmarklet, aber der Code kann angepasst werden)
Ich habe einige beleidigende Codes, die ich jetzt beheben werde.
@Xaver: Ist es schneller/zuverlässiger? Es sieht auf jeden Fall sauberer aus.
@Chris: Ich weiß, aber es scheint in einigen Situationen gut zu funktionieren. Ich habe nie etwas gelesen, das mich davon überzeugt hätte, dass es unter allen Umständen völlig falsch und böse ist.
Ich bin sowieso noch kein JavaScript-Experte – ich bin PHP-Entwickler – aber ich lerne. Ich habe das so ziemlich aus einem Forenkommentar von John Resig kopiert.
Ich habe den Snippet gerade verbessert
Das wird auf den Beispielen auf dieser Website verwendet. Die Funktion „Fancy Source anzeigen“ ist jQuery-gesteuert, aber nicht alle Beispiele verwenden jQuery. Daher verarbeite ich im Footer-Include (unsichtbar, nur Analyse im Grunde) auch die Anzeige des Quellcodes und verwende dies, um zu entscheiden, ob jQuery geladen werden muss oder nicht.
Die document.write-Lösung wird im HTML5Boilerplate verwendet: https://github.com/paulirish/html5-boilerplate/blob/master/index.html#L64
Ich denke, das ist in diesem Fall eine gute Lösung, aber generell stimme ich zu, dass document.write vermieden werden sollte.
„Soweit ich weiß, gibt es keine wirklich zuverlässige Methode, um auf den „absolut neuesten“ Build von jQuery zu verlinken“
Ich verwende
, um auf die neueste Version von jQuery zu verlinken. Das ist vielleicht nicht zuverlässig, da alles, was ich über jQuery gelernt habe, von Ihnen stammt. Wer weiß also, wo ich das aufgeschnappt habe :-)http://code.jquery.com/jquery-latest.js
Ah, da hast du es. Interessanterweise ist dieser http://code.jquery.com/jquery-nightly.js veraltet, und die eigentliche Nachtschicht ist glaube ich die 1.4.5pre (natürlich zum Zeitpunkt der Abfassung dieses Texts).
Chris,
Sie können den neuesten jQuery-Code von Git mit http://code.jquery.com/jquery-git.js erhalten.
Dies wurde hier angekündigt: http://blog.jquery.com/2010/10/24/community-updates-2610/
Ralph
Meiner Meinung nach ist es nicht immer am besten, alle Ihre Skripte zu einer Datei zu kombinieren. Nehmen wir an, in einem einfachen Fall haben Sie Folgendes:
jquery-1.4.4.min.js (offensichtlich die Kern-jQuery-Bibliothek)
utils.js (sagen wir, das sind all Ihre websitespezifischen Mistcodes)
lightbox.js (um dumme Fotos anzuzeigen)
Wenn Sie diese in einem Build-Skript kombinieren können, ist das theoretisch gut, aber jede Änderung an einer Datei macht diese kombinierte Datei ungültig und Sie müssen eine neue ausliefern. Und vergessen Sie nicht, Sie benötigen einen Cache-Busting-Mechanismus in dieser Datei, wie z. B. einen Zeitstempel, der dem Dateinamen hinzugefügt wird: combinedJS_20101126.js.
Wird sich der Code in der von Ihnen verwendeten jQuery-Version ändern? Nein. Wird sich lightbox.js ändern? Wahrscheinlich nein (Sie können ihn in der Entwicklung ändern, aber in der Produktion wird er sich wahrscheinlich nicht ändern).
Was wird sich ändern? Jegliches websitespezifisches JS, d. h. utils.js.
Außerdem bleiben Dateien nicht so lange in Ihrem Cache, wie Sie denken. Browser-Caches halten nicht wirklich mit der Zeit Schritt, ich denke, die meisten haben immer noch standardmäßig 50 MB, obwohl IE9 seine erhöhen wird, soweit ich gelesen habe. Sie können das leicht beim Surfen in einer Stunde füllen. Seien wir ehrlich, viele Homepages liefern heute fast ein Megabyte (wenn nicht mehr) aus.
HTML5s Cache-Manifest wird interessant sein, wird aber sicher auch missbraucht werden.
http://ajax.googleapis.com/… oder https://ajax.googleapis.com/… ? Google jQuery
Um dieses Problem zu vermeiden
Danke für die Skript-Links. Ich hatte immer Schwierigkeiten, die CDN-Links für diese Skripte zu finden. :)
Um Joe's Kommentar zu untermauern, gibt es auch die minimierte Version
http://code.jquery.com/jquery-latest.min.js
Sehr schöner Beitrag, Chris! Ich schätze die Arbeit, die Sie investiert haben.
„Reduzierte Latenz – Datei wird von einem buchstäblich-geografisch näheren Server geliefert.“
Ich möchte darauf hinweisen, dass dies eine Vereinfachung der Wahrheit ist. Ziemlich oft ist der Server von Google möglicherweise gar nicht näher, und selbst wenn er es ist, kann es gelegentlich immer noch mehrere hundert Millisekunden dauern, bis die Datei abgerufen wird. Dies hängt natürlich von verschiedenen Parametern sowie vom reinen Zufall ab. Daher halte ich eine verbesserte Cache-Wahrscheinlichkeit für einen wesentlich größeren Vorteil als tatsächliche Latenzverbesserungen.
In der älteren Paul Irish Boilerplate Version verwendet er
Und in der letzten Version hat er „“ durch „%3E“ ersetzt
Ich möchte wissen, ob es Unterschiede oder Probleme mit der ersten gibt.
Dies ist ein großartiger Beitrag für diejenigen von uns, die noch kein CDN verwenden, sehr informativ.
Verwendung von Google CDN: Können wir das auf Websites mit sicheren Informationen tun? Was passiert, wenn die Google-Website gehackt wird (obwohl die Möglichkeit sehr gering ist) und jemand ein bösartiges Skript in jquery.min.js einfügt, würde das nicht alle Websites betreffen, die es verwenden?
Sicher!
Vielen Dank für die Skripte!
Tolles Tutorial und wie immer sehr gut aussehend!