Einschließlich Lasten von CSS-Dateien und Javascript-Datei - wie kann ich optimieren

StackOverflow https://stackoverflow.com/questions/801581

Frage

Duplizieren: Mehrere Javascript / CSS-Dateien: Best Practices ?

Hallo Leute, meine Anwendung so gut wie fertig, aber die Sache ist, dass ich bemerkt habe, dass ich eine Menge von externen Javascript-Dateien und CSS bin auch. Ich habe viel von Dritten kostenlosem Plugins hier mit und didnt den Code aus Angst vor Unordnung etwas bis berühren will.

Aber das Ergebnis ist, dass ich merke, dass ich jetzt 8 externe CSS-Dateien enthalten bin, sowie eine satte 20 externen Javascript-Dateien: O - ich habe keine größere Website enthält nicht erinnern, gesehen mehr als 2 oder 3 css_ js Dateien kombiniert also auf jeden Fall muss ich etwas falsch hier tun. Wie sortiere ich das aus. - Ich habe irgendwo gelesen, dass eine große js Datei mehr schneller zu laden ist als 2 oder 3 Dateien, die auch nur die Hälfte der akkumulierte Größe

Jede Hilfe wäre sehr dankbar

War es hilfreich?

Lösung

Eine große Datei ist besser als eine Reihe von kleinen, weil in diesem Fall Web-Browser macht eine Anfrage an den Web-Server anstelle von, sagen wir, acht Anfragen. Was zählt, ist nicht die geringen Unterschiede in Gesamtgröße, aber die Gesamt Latenz der Anfragen.

Stellen Sie sich zwei Szenarien: Sie eine Datei von 8 kB und 8 Dateien von 1kB jeder herunterladen.

  1. Im ersten Szenario Gesamtzeit ist smth wie 80 msec (Transferzeit) + 50 msec (Latenz) = 130 msec

  2. Im zweiten Szenario Sie smth wie 8x10 ms (Transferzeit) + 8x50 ms (!) Der Latenz = 480 ms (!)

    3. haben

Sie sehen den Unterschied. Dies ist keineswegs ein umfassendes Beispiel, aber Sie bekommen die Idee.

Also, wenn möglich, Zusammenführen von Dateien zusammen. Komprimiert Gehalt die Menge an Daten zu verringern, zu übertragen. Und Caching verwenden, um sich wiederholender Anfragen loswerden.

Andere Tipps

Wenn Sie Ihre CSS-Dateien in eine Datei (und gleiche für JS) in der Reihenfolge kombinieren sie zur Zeit auf die Seite geladen werden, dann werden sie genau wie vor die gleiche Arbeit; es ist, wenn Sie beginnen, die Reihenfolge zu ändern, dass die Regeln unerwartet diejenigen außer Kraft setzen können sie nicht zu haben verwendet.

Die meisten Ihrer Dateien sollten auf jeden Fall in der Client-Seite Cache aufzuwickeln, damit ich nicht allzu besorgt darüber sein würde. So stellen Sie sicher, dass Sie die richtigen Header sind einstellen. Natürlich, wenn dies die Titelseite Ihrer Website ist dann ja, dann sollten Sie weiter zu optimieren.

In den vergangenen Projekten, habe ich SmartOptimizer für JS und CSS-Dateien on the fly zu komprimieren. Es ist eine PHP-basierte Datei minifier.

Durch eine gerade rechtzeitig minifier Verwendung befreit Sie von der separaten Quelle und verkleinerte Dateien zu halten. Natürlich ist es eine wenig Rechenleistung minifying die Dateien zu halten benötigt. Auch eine einzelne minimierte Datei geladen ist besser mit den folgenden Vorteilen:

  1. Kleinere Dateigröße (sicher)
  2. Keine Komponente parallel Download Verzögerung, weil weniger scripts / Stylesheets.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top