it-swarm.com.de

Ein JS / CSS-Bundle Vs. Eine mit Standardeinstellung und eine mit Benutzerdefiniert

Auf einigen meiner Websites verwenden wir Javascript/CSS-Bundles, um die Ladezeit zu verkürzen. Ich habe immer zwei Bündel für jeden Typ verwendet (4 insgesamt), also habe ich

  • JS Bundle 1: Enthält Skripte, die auf jeder Seite Standard sind (jQuery, seitenübergreifende Funktionen usw.)
  • JS Bundle 2: Enthält Skripte für diese Seite
  • CSS-Bundle 1: Enthält allgemeines Site-CSS (Layout, Farben usw.)
  • CSS Bundle 2: Enthält CSS speziell für diese Seite

Meine Theorie dahinter ist, dass sich JS-Bundle 1 und CSS-Bundle 1 niemals ändern. Wenn sie also in einem separaten Bundle vorliegen, können sie auf jeder Seite zwischengespeichert und wiederverwendet werden, wohingegen JS-Bundle 2 und CSS-Bundle 2 den Code enthalten, der sich per ändert Seite. Manchmal enthalten diese nur ein oder zwei Codezeilen. Ich habe mit dieser Methode für eine Webentwicklungsfirma als Freiberufler gearbeitet, und sie haben mir mitgeteilt, dass es schlecht/falsch ist und ich nur ein Bundle für jeden Medientyp verwenden sollte, da durch die Verwendung von zwei Bundles die Anzahl der Anforderungen erhöht und die Seite verlangsamt wird. Ich verstehe nicht, warum dies langsamer ist als die Verwendung von zwei Bundles?

Nur als Beispiel mit Javascript (Obwohl fast identisch für CSS)

Erste besuchte Seite (beispielsweise Seite1.html): 100 KB Standard-Skripte, die auf jeder Seite verwendet werden, und 5 KB benutzerdefinierte Skripte
Mit meiner Methode müsste ein Benutzer in zwei Anforderungen 105 KB Medien herunterladen
Mit ihrer Methode müsste ein Benutzer auf eine Anfrage 105 KB Medien herunterladen
Also beim ersten Besuch akzeptiere ich, dass ihre Methode doch schneller ist

Zweite besuchte Seite (page2.html): 100 KB Standard-Skripte und 3 KB benutzerdefinierte Skripte
Bei meiner Methode wären die Standardskripte bereits zwischengespeichert, sodass sie nur 3 KByte Skripte herunterladen müssten
Mit ihrer Methode müsste der Benutzer 103 KB an Skripten herunterladen, nur für die 3 KB an benutzerdefinierten Skripten.

Sie bestehen jedoch darauf, dass ihre Methode schneller ist. Wie ist das möglich? Ich bin mir sicher, dass eine zusätzliche Anforderung die Seitenlast nicht so stark reduzieren kann, dass es effektiver ist, 100 KB Daten, die sie bereits haben, erneut herunterzuladen. Dies ist nur die JS, die das CSS hinzufügt, das sich dem Doppelten nähert

4
Smudge

Sie haben wahrscheinlich * recht.

Es kann schlecht sein, Ihren JavaScript- und CSS-Code in mehrere Dateien aufzuteilen. Auch wenn ein Teil des Codes in diesen Dateien nur auf einer Seite verwendet wird, lohnt es sich, alles in einer einzigen Datei zu speichern, um Seitenanforderungen zu reduzieren. Ich zeige Ihnen warum:

Ihre Methode (alle CSS in einer Datei):

  1. Erste Seite wird geladen (1 Anforderung, 108 KB CSS-Datei über HTTP geladen)
  2. Zweite Seite wird geladen (0 Zugriffe, 108 KB CSS-Datei aus dem Browser-Cache)
  3. Dritte Seite wird geladen (0 Zugriffe, 108 KB CSS-Datei aus dem Browser-Cache)

Ihre Methode (CSS in mehreren Dateien):

  1. Laden der ersten Seite (1 Anforderung, 100 KB CSS-Masterdatei über HTTP geladen)
  2. Laden der zweiten Seite (1 Anforderung, 5 KB-Datei über HTTP, 100 KB-Datei aus dem Browser-Cache)
  3. Dritte Seite wird geladen (1 Anforderung, 3 KB-Datei über HTTP, 100 KB-Datei aus dem Browser-Cache)

Bei jedem Seitenladevorgang benötigen Sie eine zusätzliche HTTP-Seitenanforderung für das benutzerdefinierte CSS, die ansonsten in der Anforderung für die ursprüngliche Masterdatei enthalten gewesen wäre. Wenn der benutzerdefinierte Code für jede Unterseite viel größer wird , möchten Sie möglicherweise testen, welche schneller ist. In dem von Ihnen beschriebenen Szenario würde ich jedoch darauf setzen, dass eine einzelne 108-KB-Anforderung erfolgt ist schneller als drei Anforderungen für eine 100-KB-, 5-KB- und 3-KB-Datei, da HTTP-Anforderungen sind teuer.

Darüber hinaus - und der tatsächliche Leistungsunterschied dürfte ohnehin gering sein - ist es einfacher, eine Datei offen zu halten, wenn Sie Code bearbeiten, als zwischen mehreren Dateien zu wechseln. Eine große Site kann schnell zu 10 oder mehr separaten CSS-Dateien führen, und die Verwaltung macht keinen Spaß. Schon deshalb lohnt es sich, Code in einer Datei zu speichern, wenn Sie können.

* Ich sage wahrscheinlich , weil andere Faktoren zu berücksichtigen sind. z.B. Manchmal ist es sinnvoll, große CSS- und JavaScript-Dateien aufzuteilen. Wenn eine selten besuchte Seite zusätzlich 500 KB JavaScript benötigt, können Sie dagegen argumentieren, es in die Haupt-JS-Datei der Site aufzunehmen. Sie können auch Dinge wie Minify verwenden, um HTTP-Anforderungen zu reduzieren, wenn mehrere CSS/JS-Dateien angefordert werden, aber es kommt immer noch nicht von der Tatsache ab, dass Sie all diese Dateien in Ihrem jonglieren müssen Code-Editor an erster Stelle.

2
Nick

Meine Theorie dahinter ist

Das ist dein Problem. Nicht theoretisieren - testen. Sie können den Netzwerkprofiler in Firebug- oder IE dev-Tools verwenden, um bis auf die Millisekunde genau festzustellen, welche Methode am schnellsten ist.

3
Will Peavy