Wie kann ich die Kosten für das Laden großer JS-Bibliotheken senken?

23

Wie kann ich sicherstellen, dass die Nutzung der Website durch den Benutzer nicht beeinträchtigt wird, wenn ich eine große Javascript-Bibliothek für meine Seite verwende?

Macha
quelle

Antworten:

25

Es gibt 4 Dinge, die Sie tun können.

  1. Minimieren Sie Ihre JS-Datei. Dadurch werden alle Kommentare und Leerzeichen entfernt, um die Größe zu verringern.
  2. Kombinieren Sie Ihre JS-Dateien auf jeder Seite, sodass nur 1 Datei vorhanden ist.
  3. Verwenden Sie ein Paket, um Ihre Dateien beim Senden zu komprimieren. Dadurch werden sie noch kleiner
  4. Platzieren Sie nicht benötigtes Javascript direkt am Ende der Seite, damit es am Ende geladen wird. Auf diese Weise kann der Benutzer die Seite sehen und verwenden, noch bevor der JS vollständig geladen ist.

Und einige andere Leute haben vorgeschlagen:

  • Apache kümmert sich automatisch um die Komprimierung (und Zwischenspeicherung von komprimiertem Inhalt), wodurch die Verwaltung von Dateien erheblich vereinfacht wird
  • Wenn Sie JavaScript richtig cachefähig machen, ergeben sich große Vorteile.
  • Platzhalterdomänen (mit mehreren URIs) ermöglichen mehr gleichzeitige Verbindungen. Pre-Fetching ist nicht nur für Bilder /
Ben Hoffman
quelle
Es gibt mehr Dinge, die Sie tun können, und bessere Möglichkeiten, dies zu tun. Apache kümmert sich automatisch um die Komprimierung (und Zwischenspeicherung von komprimiertem Inhalt), wodurch die Verwaltung von Dateien erheblich vereinfacht wird. Wenn Sie Javascript richtig zwischenspeichern, ergeben sich große Vorteile. Platzhalterdomänen (mit mehreren URIs) ermöglichen mehr gleichzeitige Verbindungen. Pre-Fetching ist nicht nur für Bilder /
symcbean
21

Wenn Sie allgemeine Bibliotheken (wie jQuery, Prototype oder Dojo) verwenden, können Sie die Datei an Google auslagern und von diesen bereitstellen lassen . Dies bietet Ihnen mehrere Vorteile:

  • Sie müssen sich keine Gedanken über das Minimieren und Zippen machen
  • Es ist nicht deine Bandbreite
  • Diese Dateien stammen aus einer anderen Domäne, sodass Sie das Limit von 2 parallelen Anforderungen pro Hostname (zumindest teilweise) umgehen können
  • Wenn Sie Glück haben, hat der Benutzer bereits eine andere Website besucht, auf der dieselbe Bibliothek vom selben Anbieter verwendet wurde, sodass er sie bereits im Browser-Cache hat.

Hinweis: Die von Ihnen angeforderte Version kann einen großen Einfluss auf die Caching-Eigenschaften haben: Wenn Sie nach jQuery 1.4.2 fragen, erhalten Sie eine Datei, die für ein Jahr zwischengespeichert werden kann, 1.4 kann jedoch nur für eine Stunde zwischengespeichert werden.

Cebjyre
quelle
1
+ 1 für CDN und scriptsrc.net , um es noch einfacher zu machen;)
Agos
1
Können Sie Ihre 'Notiz' erweitern? Warum gibt es einen Unterschied in der Caching-Zeit?
erinnern sich
2
@theycallmemorty: Obwohl ich die Dokumente nicht überprüft habe, gehe ich davon aus, dass Sie durch die Angabe von 1.4.2 sehr genau über die gewünschte Version informiert sind. Wenn Sie nach 1.4 fragen, sagen Sie im Grunde: "Geben Sie mir das Meiste Aktuelle Version unter 1.4 ", daher werden sie nicht so stark zwischengespeichert.
Zhaph - Ben Duguid
Erwähnenswert ist auch, dass Microsoft einige JS-Bibliotheken (jQuery und einige MS-spezifische) auf ihrem CDN zur Verfügung stellt, die auch https unterstützen (was viele andere Skript-CDNs nicht unterstützen). Asp.net/ajaxlibrary/cdn.ashx
Bert Lamb
6

Sie können die gesamte Bibliothek in eine js-Datei einfügen und die Datei komprimieren. Es ist jedoch wirklich nur für das erste Laden einer Seite von Bedeutung. Danach wird Ihre js-Datei im Browser zwischengespeichert, insbesondere wenn Sie den Cache-Ablauf lange genug einstellen. Folglich wird bei jedem weiteren Treffer Ihre js-Datei nicht mehr geladen.

txwikinger
quelle
+1 für Sie können die gesamte Bibliothek in einer Datei ablegen und komprimieren. Daran habe ich nicht gedacht.
Gordon Gustafson
4

Zusätzlich zu den obigen Antworten können Sie den Google Closure Compiler verwenden , um Ihr JS automatisch zu komprimieren und zu optimieren, während Sie es in andere Bibliotheken von Drittanbietern (jQuery, YUI, Mootools usw.) integrieren.

sie erinnern sich
quelle
0

Wenn Sie eine Reihe von Seitenelementen und Zugriff auf eine separate Domain haben, können Sie erwägen, alle statischen Dateien einschließlich der großen JS-Datei in der zweiten Domain zu hosten.

Wie Steve Souders in seinem Blog über Hochleistungswebsites feststellt -

... in einigen Situationen lohnt es sich, eine Reihe von Ressourcen, die auf eine einzelne Domain heruntergeladen werden, auf mehrere Domains aufzuteilen. Ich nenne diese Domain Scherben. Auf diese Weise können mehr Ressourcen parallel heruntergeladen werden, wodurch die Ladezeit der Seite insgesamt verkürzt wird.

woanders schreibt er ..

Browser öffnen nur eine begrenzte Anzahl von Verbindungen pro Domäne. Durch Aufteilen oder Teilen der Anforderungen auf zwei Domänen im Gegensatz zu einer Domäne wird eine schnellere Seite erstellt, insbesondere in IE 6 und 7

mvark
quelle