it-swarm.com.de

Sollte ich js / css-Dateien in einer einzigen Datei kombinieren?

Sowohl YSlow als auch Googles Page Speed Add-Ons empfehlen, Skriptdateien (und Stildateien) in jeweils einer Datei zu kombinieren, um die Anzahl der HTTP-Anforderungen zu verringern Dies gilt insbesondere dann, wenn die Skriptdateien auf der gesamten Website konsistent sind, jedoch für eine Webanwendung, die auf der Website unterschiedliche Anforderungen hat.

So wie ich es sehe, gibt es ein paar Möglichkeiten:

  1. Kombinieren Sie alle Dateien, die auf der Website verwendet werden, und jede Seite erhält die gleiche kombinierte Datei. Der Nachteil ist, dass nicht verwendeter Inhalt das Skript überfüllt (und eine schwerere erste Belastung (auch beim Ändern eines Komponentenskripts neu laden)).

  2. Kombinieren Sie die Dateien auf Seitenbasis - der Nachteil ist, dass jede Seite mit unterschiedlichen Anforderungen eine andere kombinierte Datei erhält (höhere Erstlast für jeden Seitentyp).

  3. Ignorieren Sie die strikte Interpretation der Empfehlungen "nur eine Datei" und lassen Sie die Seite in mehreren Dateien laden, wobei die Anzahl der HTTP-Anforderungen im allgemeinen Fall hoffentlich durch Zwischenspeichern negiert wird. Nachteilig ist die Anzahl der HTTP-Anforderungen auf jeder Seite

Gedanken?

11
Cebjyre

Option 2 ist das Schlimmste. Das bedeutet, dass jede Seite mit einer anderen Kombination der benötigten JS-Skripte eine HTTP-Anfrage zur Folge hat. Es wird die Leistung verschlechtern viel.

Option 1 ist das Beste. Mit der Zeit besuchen die meisten Benutzer die meisten "Seitentypen" Ihrer Website. Daher ist es immer noch von Vorteil, alles in einer einzigen Datei zusammenzufassen, mit Ausnahme von großen JS-Dateien, die in wenigen, selten besuchten Seiten benötigt werden.

Der erste Seitentreffer ist möglicherweise langsamer als bei anderen Dateien, es lohnt sich jedoch, dies zu tun, da bei jedem zweiten Seitentreffer das zwischengespeicherte globale JS verwendet wird.

Ein Tipp aber; Füge sie automatisch zusammen, wenn du es nicht schon bist!

11
Thomas Bonini

Im Allgemeinen kombiniere ich "globales Javascript" - jQuery und allgemeine Plugins - in einer einzigen Datei und stelle dann bei Bedarf zusätzliche Plugins als separate Dateien bereit.

Auf einer Website, auf der ich viele Seiten betreibe, befinden sich Datentabellen, sodass ich einen global.js mit jQuery, DataTables und SuperFish (für mein Menü) habe. Es gibt zwei Seiten auf der Site, die eine "Lightbox" verwenden, sodass ich für diese beiden Seiten ein separates Skript habe.

Für CSS liefere ich nur eine einzige Datei für die gesamte Website und versuche, das CSS so allgemein wie möglich zu gestalten - die meisten Seiten enthalten nur wenige eindeutige CSS-Elemente.

4
DisgruntledGoat

Ich würde nicht vorschlagen, alle zu kombinieren. Wenn Sie eine gemeinsame Bibliothek verwenden, können Sie einen CDN nutzen, um Ihre Javascripts zu liefern. Sie können dann das Browser-Caching (vorausgesetzt, andere Websites verwenden dasselbe CDN) und die verteilte Zustellung nutzen. Microsoft und Google haben jeweils Lösungen (ich habe sie auch nicht ehrlich verwendet, aber ich werde auf jeden Fall anfangen), und es kann auch andere geben. In einem verwandten Hinweis hat SO diese Frage:

Wann löscht der Browser den JavaScript-Cache automatisch?

und die erste Antwort ist festes Gold.

1
Larry Smithmier

Es wird auf jeden Fall empfohlen, so wenig Dateien wie möglich zu verwenden. Möglicherweise besteht jedoch eine Aufteilung zwischen Funktionen, die beim Laden der Seite erforderlich sind, und Funktionen, die durch asynchrones Laden zurückgestellt werden können.

Wenn genug von Ihrem JS in die zweite Kategorie verschoben werden kann, können Sie die wahrgenommene anfängliche Ladegeschwindigkeit der Seite verbessern und so eine bessere Erfahrung für Ihre Benutzer schaffen.

1
JasonBirch