Vor kurzem habe ich das Buch "Leitfaden zur Konstruktion von Hochleistungs -Websites" untersucht. Dieser Artikel ist ein Studiennotiz. Ich werde herausfinden, was ich später für die einfache Anzeige gelernt habe.
Performance Golden Rule erklärt, dass nur 10% bis 20% der Reaktionszeit der Endbenutzer aufgewendet werden, um angeforderte Benutzer-HTML-Dokumente zu akzeptieren, während die verbleibenden 80% bis 90% der Zeit für HTTP-Anfragen für alle Komponenten (Bilder, Skripte, Stylesheets usw.) aufgewendet werden, die von den HTML-Dokumenten verwiesen werden, und die Reaktionszeit für die Endversorgungszeit und die Reaktion der Endversorgungszeiten für die Aufgabe von Komponenten.
-Steve Sounders
1 Dateiübertragung (Reduzieren Sie die Anzahl der HTTP -Anforderungen)
CSS Sprites
Verwenden Sie CSS Sprites, um die auf der Website verwendeten Bilder in ein Bild zu verschmelzen, und verwenden Sie ein Symbol über Hintergrundposition, Breite und Höhe, um die Hintergrundbildposition zu steuern. Diese Methode kann mehrere Bildanforderungen auf einmal reduzieren. Es gibt viele Werkzeuge, um CSS -Sprites zu erzeugen. Es gibt verwandte Plug-Ins in Grunzen und Schluck, und CSSGAGA ist ebenfalls gut.
Zusammenführen JS und CSS
Wie bei der Sprite -Karte ist das Zusammenführen von CSS- und JS -Dateien ebenfalls eine wichtige Möglichkeit, HTTP -Anforderungen zu reduzieren. Gegenwärtig gibt es keine Kontroversen über den Zusammenschluss von CSS -Dateien, aber für die aktuelle Prävalenz der JS -Modularität scheint es rückwärts zu sein, alle JS -Dateien in eine Datei zu verschmelzen. Die korrekte Art und Weise besteht darin, das kompilierte Sprachmuster einzuhalten, die Modularität von JS beizubehalten und Zieldateien nur für die JS -Dateien zu generieren, die in der Erstanforderung während des Erzeugungsprozesses verwendet werden.
2 Verwenden Sie Inhalte, um das Netzwerk zu veröffentlichen (Reduzieren Sie die HTTP -Anforderungszeit)
Ein weiterer Faktor, der die HTTP -Anforderungszeit beeinflusst, ist die Entfernung, die Sie auf dem Webserver -Website befinden. Je länger die Entfernung ist, desto länger dauert die Anfrage, was sich durch CDN erheblich verbessern kann.
CDN ist ein Webserver, der an mehreren geografischen Standorten verteilt ist und zur Veröffentlichung von Inhalten an Benutzer effektiver wird. Die Hauptfunktion von CDN besteht darin, statische Dateien für Endbenutzer zu speichern und auch Download-, Sicherheitsdienste und andere Funktionen anzubieten.
3 Browser -Cache einstellen (vermeiden Sie doppelte HTTP -Anforderungen)
Verwenden von Ablauf/Cache-Kontroll
Browser können jedes Mal wiederholte Anforderungen durch Verwendung von Cache vermeiden. HTTP 1.0 und HTTP 1.1 haben unterschiedliche Cache-Implementierungsmethoden, Abgeläufe (1.0) und Cache-Kontroll (1.1). Der Webserver verwendet aus Ablauf dem Client, dass alle zwischengespeicherten Kopien der Datei innerhalb einer bestimmten Zeit verwendet werden und nicht mehr wiederholt Anforderungen an den Server stellt, z. B.:
Ausgelassen: Thu, 01. Dezember 2016 16:00:00 GMT (GMT -Format)
Diese Einstellung bedeutet, dass ab dem 1. Dezember 2016 die zwischengespeicherte Kopie ohne weitere Anfragen verfügbar ist.
Abgeläuft hat eine Einschränkung des Ways der Übergabe von Fristen: Es erfordert eine strenge Synchronisation zwischen den Client- und Serveruhren, während die von HTTP 1.1 eingeführte Cache-Control-Control ein Cache-Datum angibt, indem eine Zeit in Sekunden angegeben wird, sodass diese Einschränkung nicht vorhanden ist, z.
Cache-Control: max-agete = 31536000
Diese Einstellung bedeutet, dass die Cache-Zeit ein Jahr beträgt, und es wird empfohlen, Cache-Control zu verwenden. Wenn HTTP 1.1 jedoch unterstützt wird, ist eine andere Sache zu beachten: Cache-Control und Ablauf gleichzeitig haben eine höhere Priorität.
ETAG konfigurieren oder entfernen
Durch die Verwendung von Ablauf/Cache-Control kann der zweite Besuch vermieden werden, lokale Cache verwenden, um doppelte HTTP-Anforderungen zu vermeiden und die Geschwindigkeit der Website zu verbessern. Wenn der Benutzer jedoch auf die Browser -Aktualisierung klickt oder abläuft, wird weiterhin eine HTTP -GET -Anforderung an den Server ausgestellt. Wenn sich die Datei derzeit nicht ändert, gibt der Server nicht die gesamte Datei zurück, sondern einen 304 nicht geänderten Statuscode.
Der Server gibt zwei Basississ, um festzustellen, ob sich die Datei geändert hat: Last-modifiziert (neuestes Änderungsdatum) und ETAG (Entity-Tag);
ETAG (Entity-Tags) wurde in HTTP 1.1 eingeführt und hat eine höhere Priorität, wenn es gleichzeitig mit dem letzten modifizierten vorhanden ist. Der Server vergleicht den vom Client mit dem aktuellen ETAG gesendeten ETAG (IF-None-Match) und gibt 304 nicht modifiziert, wenn dieselbe ist, andernfalls wird die gesamte Datei und 200 OK zurückgegeben.
Es gibt ein Problem mit ETAG: Wenn der Browser eine GET -Anforderung an einen Server sendet und dann die Komponente von einem anderen Server anfordert, stimmt ETAG nicht überein. Wenn Ihre Website auf einem Server gehostet wird und jetzt viele Websites mehrere Server verwenden, verringert die Existenz von ETAG die Erfolgsrate der Überprüfungsgültigkeit erheblich.
Die Lösung für dieses Problem besteht darin, ETAG zu konfigurieren, den Server Innode-Wert zu entfernen und den Zeitstempel und die Größe des Modifikums nur als ETAG-Wert zu behalten oder ETAG direkt zu entfernen und die Gültigkeit der Datei zu überprüften.
4 Komprimierungskomponenten (HTTP -Anforderungsgröße reduzieren)
Durch Komprimieren von HTTP-übertragenen Dateien, Reduzierung der Größe von HTTP-Anforderungen und Verbesserung der Anforderungsgeschwindigkeit ist GZIP derzeit die am häufigsten verwendete und effektivste Komprimierungsmethode.
Es müssen jedoch nicht alle Ressourcendateien komprimiert werden. Die Kosten für die Komprimierung umfassen, dass der Server CPU -Zyklen für die Komprimierung ausgeben muss, und der Client muss auch die komprimierten Dateien dekomprimieren, die in Kombination mit seiner eigenen Website abgewogen werden müssen. Jetzt komprimieren die meisten Websites ihre HTML -Dokumente, und einige Websites komprimieren JS und CSS. Fast keine Websites verwenden die GZIP -Komprimierung für Bilder, PDFs und andere Dateien. Der Grund dafür ist, dass diese Dateien komprimiert wurden und mit HTTP, die überkomprimiert wurden, nicht kleiner werden kann, um Dinge zu komprimieren. Das Hinzufügen von Headern, das Komprimieren von Wörterbüchern und das Überprüfen des Reaktionskörpers macht es tatsächlich größer, und auch die CPU verschwenden.
So aktivieren Sie GZIP auf der Website erfordert die Einstellung auf dem Webserver (IIS, Nginx, Apache usw.).
5 CSS -Dateien werden zuerst platziert
Wenn Sie die CSS -Datei in den ersten und letzten Einfluss auf HTTP -Anfragen aufnehmen, ist sie daher in Bezug auf die Anforderungszeit konsistent. Aus Sicht der Benutzererfahrung erhalten Sie jedoch eine bessere Benutzererfahrung.
Der Grund dafür ist, dass der Browser das HTML -Dokument von oben nach unten analysiert und die CSS -Datei am Kopf platziert. Auf der Seite wird zuerst eine Anfrage an die CSS -Datei gestellt, dann den DOM -Baum geladen und rendern. Die Seite wird dem Benutzer nach und nach präsentiert.
Im Gegenteil, wenn die CSS -Datei am Ende platziert ist, lädt die Seite die vollständige DOM und fordert die CSS -Datei an und rendert dann den gesamten DOM -Baum und präsentiert sie dem Benutzer. Aus Sicht des Benutzers befindet sich die gesamte Seite vor der Anforderung der CSS -Datei in einem weißen Bildschirmstatus. Der weiße Bildschirm ist ein Verhalten des Browsers. David Hyatts Erklärung dafür ist so
Bevor der Stilbaum voll beladen ist, ist es ein Verschwendung, den Dom -Baum zu rendern, da er nach dem Laden des Stilbaums erneut gerendert wird und das Problem des Fouc (kein Stilen -Inhaltsflicker) auftritt.
Eine andere Sache zu beachten ist die Verwendung von Link anstelle von @import, um CSS -Stylesheets einzuführen. Auch wenn der von @import eingeführte Stil in den Header geschrieben ist, wird er am Ende des Dokuments geladen.
6 JS -Datei wird am Ende platziert
HTTP -Anfragen sind parallel und die Anzahl der parallelen Downloads verschiedener Browser ist unterschiedlich (2, 4 oder 8). Parallele Downloads verbessern die Geschwindigkeit von HTTP -Anfragen. Wenn Sie die JS -Datei in erster Linie einsetzen, blockieren Sie nicht nur den Download der nachfolgenden Datei, sondern blockieren auch das Rendering der Seite.
Warum passiert das? Es gibt zwei Gründe:
Dokument.Write kann in der JS -Datei vorhanden sein, um den Inhalt der Seite zu ändern, sodass die Seite nach Ausführung des Skripts nicht gerendert wird.
Unterschiedliche JS -Dateien haben möglicherweise Abhängigkeiten, unabhängig von der Größe, daher müssen sie in der Reihenfolge ausgeführt werden, sodass sie beim Laden von Skripten verboten sind.
Daher besteht der beste Weg darin, die JS -Datei am Ende zu platzieren und zu warten, bis alle visuellen Komponenten der Seite geladen sind, bevor sie Anfragen zur Verbesserung der Benutzererfahrung stellen.
Die oben genannten sind einige Vorschläge zur Verbesserung der Website der Website durch JavaScript, die der Editor Ihnen vorgestellt hat (1). Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie mehr wissen möchten, achten Sie bitte wulin.com. Im nächsten Artikel wird der Editor Ihnen die Vorschläge zur Verbesserung der Website der Website -Leistung von JavaScript (II) vorstellen.