Detaillierte Einführung in Lösungen zur Web-Performance-Optimierung

Kapitel 1 Analyse des langsamen Status der Website öffnen

Wenn das Unternehmen auf die im IDC-Computerraum bereitgestellte VIP-Website zugreift, wird es sich sehr langsam anfühlen. Was verursacht das? Um die Reaktionszeit der Seite zu verkürzen und unser Benutzererlebnis zu verbessern, müssen wir wissen, worauf Benutzer warten.

Sie können unsere Anmeldeseite verfolgen, wie unten gezeigt

Aus dem obigen Bild können wir HTMLDokumente machen nur 20 % der gesamten Antwortzeit aus, und die anderen 80 % Antwortzeit werden zum Herunterladen von JS, CSS, Bilder usw. Komponenten. Daher gibt es im Front-End von WEB viel Raum für Optimierungen. Wir werden einen Leistungsoptimierungsplan für WEB sowohl für die Front-End-Optimierung als auch für das Back-End erstellen Optimierung von WEB.

Kapitel 2 WEBOptimierungsregeln der Rezeption1.

Minimieren

HTTP-Anfragen

Es gibt mehrere gängige Methoden, um tatsächlich zu reduzieren Anfrage: 1

,

Skript- und Stildateien zusammenführen, zum Beispiel können Sie mehrere CSS -Dateien zusammenfassen Eins: Kombinieren Sie mehrere JS -Dateien zu einer. 2

,

CSS Sprites Verwenden Sie CSS-Hintergrund verwandte Elemente, um das Hintergrundbild absolut zu positionieren , um mehrere Bilder zu kombinieren ein Bild. 2.

Browser-Cache verwenden

 Wenn Benutzer verschiedene Seiten der Website durchsuchen, werden viele Inhalte wiederholt, z. B. dasselbe JS, CSS, Bilder usw. Wenn wir Browsern vorschlagen oder sogar zwingen könnten, diese Dateien lokal zwischenzuspeichern, würde dies den von der Seite generierten Datenverkehr erheblich reduzieren und damit die Seitenladezeiten verkürzen.

Gemäß dem serverseitigen Antwort-Header weist eine Datei mehrere verschiedene Ebenen des Cache-Status für den Browser auf.

1 Der Server weist den Browser an, diese Datei nicht zwischenzuspeichern und die Datei jedes Mal auf dem Server zu aktualisieren.

2 Der Server gibt keine Anweisungen an den Browser.

3 Bei der letzten Übertragung sendete der Server die Daten Last-Modified oder Etag Daten werden an den Server übermittelt, um zu überprüfen, ob die lokale Version die neueste ist. Wenn es sich um die neueste handelt, gibt der Server den Code 304 zurück und weist den Browser an, die lokale Version direkt zu verwenden. Andernfalls wird die Version heruntergeladen neue Version. Wenn nur statische Dateien vorhanden sind, stellt der Server im Allgemeinen diese Daten bereit.

4 Der Server zwingt den Browser, Dateien zwischenzuspeichern, und legt eine Ablaufzeit fest. Bevor der Cache abläuft, verwendet der Browser direkt die lokale Cache-Datei, ohne dass eine Kommunikation mit dem Server erfolgt.

 Wir müssen versuchen, den Browser in den vierten Zustand zu zwingen, insbesondere für JS, CSS, Bilder und andere Änderungen Das sind relativ große Weniger Dateien.

3. Komprimierungskomponenten verwenden

IE und Firefox-Browser unterstützen beide ClientGZIP, Verwenden Sie vor der Übertragung GZIP, um es zu komprimieren und dann an den Client zu übertragen. Nachdem der Client es empfangen hat, wird es vom Browser dekomprimiert, obwohl dies etwas von der CPU beansprucht des Servers und des Clients ändert sich dadurch nichts. Es kommt zu einer höheren Bandbreitenauslastung. Bei reinem Text ist die Komprimierungsrate ziemlich beeindruckend. Wenn jeder Benutzer 50 % an Bandbreite einspart, kann die gemietete Bandbreite doppelt so viele Kunden bedienen und die Datenübertragungszeit verkürzen.

4. Vorabladen von Bildern und JS

Der einfachste Weg, Bilder vorab zu laden, ist Instanziieren a neues Image() -Objekt in JavaScript und übergeben Sie dann die URL des zu ladenden Bildes als Parameter.

function preLoadImg(url) {
var img = new Image();
img.src = url;
}

Sie können JS und Bilder auf der Anmeldeseite vorladen

5 , Platzierung des Skripts unten

Probleme, die durch die Platzierung des Skripts oben verursacht werden,

1, Bei der Verwendung von Skripten wird das progressive Rendering für Inhalte blockiert, die sich unterhalb des Skripts befinden

2, blockiert parallele Downloads während des Herunterladens des Skripts

unten platziert kann einen JS-Fehler verursachen. Wenn das Skript nicht geladen ist, löst der Benutzer das Skriptereignis aus.

Betrachten Sie die Situation umfassend.

6. Platzieren Sie die Stildatei oben auf der Seite

Wenn das Stylesheet nicht geladen ist, ist das Erstellen des Rendering-Baums eine Verschwendung. Es kann zwei Situationen geben, in denen die Style-Datei am Ende der Seite platziert wird:

1 , Weißer Bildschirm

2. Flashen von nicht gestyltem Inhalt

7 Verwenden Sie externes

JS und CSS

, um das Inline-

JS und CSS in externes JS umzuwandeln , CSS. Reduzieren Sie wiederholte Downloads von Inline-JS und CSS. 8.

Komponenten in mehrere Domänen aufteilen

Der Hauptzweck besteht darin, die Fähigkeit zum parallelen Herunterladen von Seitenkomponenten zu verbessern. Überspannen Sie jedoch nicht zu viele Domainnamen. Es wird empfohlen, 2 Subdomainnamen zu verwenden.

9.

StreamliningJS

kann zwei Dinge bewirken Ebenen

1

, rationalisieren: Entfernen Sie unnötige Zeichen aus dem Code, um seine Größe zu reduzieren,

2

, Verschleierung: Beim Optimieren wird auch der Code neu geschrieben und Funktions- und Variablennamen werden in kürzere Strings umgewandelt

10.

OptimierenCSS

Entfernen Sie unnötige Zeichen aus dem Code, um seine Größe zu reduzieren,

Elf,

 Bild optimieren, Flash

Achten Sie bei großen Bildern Flash auf ein Gleichgewicht zwischen Effekt und Größe.

Kapitel 3 Optimierung des Programms

Kapitel 4

Datenbankoptimierung

Anhang

A Seitenanforderungsanalyse

Von der Eingabe

URL erfordert die folgenden 5 Schritte zum Rendern auf der Seite1

.

Geben Sie die URL-Adresse ein oder klicken Sie auf einen Link von URL

　

2. Der Browser analysiert die IPAdresse URL

entspricht, basierend auf der URL-Adresse, kombiniert mit DNS 🎜>　

3

. HTTP-Anfrage senden 　

4

. Stellen Sie eine Verbindung zum angeforderten Server her und fordern Sie zugehörige Inhalte an

　5． Der Browser analysiert den vom Server zurückgegebenen Inhalt und zeigt die Seite an

Das Obige ist im Grunde der grundlegende Prozess einer Seite von der Anfrage bis zur Implementierung. Im Folgenden werden wir analysieren diesen Prozess.

Wenn Sie URL eingeben, erkennt der Browser diese URL Wie lautet die entsprechende IP? Nur wenn die IP-Adresse bekannt ist, kann sich der Browser darauf vorbereiten, die Anfrage konkret an den angegebenen Server zu senden IP und Portnummer. Der DNS-Parser des Browsers ist für das Parsen der URL in die richtige IP verantwortlich Adresse. Dieser Parsing-Vorgang nimmt Zeit in Anspruch und während dieser Parsing-Zeitspanne kann der Browser nichts vom Server herunterladen. Browser und Betriebssysteme bieten Unterstützung für DNS-Auflösungs-Caching. Nach Erhalt der IP-Adresse sendet der Browser eine HTTP-Anfrage an den Server. Der Vorgang ist wie folgt folgt:

1． Der Browser fordert den Server auf, eine Verbindung 2

zu öffnen, indem er ein

TCP-Paket sendet. Der Server antwortet auch auf den Browser des Clients, indem er ein Paket sendet und dem Browser mitteilt, dass die Verbindung geöffnet ist.

3. Der Browser sendet eine HTTPGET-Anfrage. Diese Anfrage enthält viele Dinge, wie zum Beispiel unser gemeinsames Cookie und andere HeadHeader-Informationen.

Auf diese Weise wird eine Anfrage gesendet.

Nachdem die Anfrage gesendet wurde, ist es Sache des Servers. Das serverseitige Programm sendet das Endergebnis an den Client.

Tatsächlich sind die Dokumente von html das erste, was den Browser erreicht. Die sogenannten Dokumente von html sind reine HTMLDer Code enthält keine Bilder, Skripte, CSS usw. Das heißt, die HTML-Struktur der Seite. Denn was zu diesem Zeitpunkt zurückgegeben wird, ist nur die HTML-Struktur der Seite. Die Zeit, die benötigt wird, um dieses HTML-Dokument an den Browser zu senden, ist sehr kurz und macht im Allgemeinen etwa 10 % der gesamten Antwortzeit aus.

Danach befindet sich das Grundgerüst der Seite im Browser. Der nächste Schritt ist der Prozess der Analyse der Seite durch den Browser, bei dem es sich um eine schrittweise Analyse von oben handelt nach untenHTMLSkelett.

Wenn zu diesem Zeitpunkt das img-Tag im html-Dokument gefunden wird, sendet der Browser eine HTTP-Anfrage an dieses Die URL-Adresse der img-Antwort wird verwendet, um das Bild abzurufen und es dann anzuzeigen. Wenn das HTML-Dokument, Flash viele Bilder enthält, fordert der Browser sie einzeln an und rendert sie dann. Wenn jedes Bild angefordert werden muss, muss dies der Fall sein zuvor durchgeführt Die genannten Schritte: URL analysieren, TCP-Verbindung öffnen usw. Das Öffnen einer Verbindung verbraucht ebenfalls Ressourcen. Genau wie beim Zugriff auf eine Datenbank versuchen wir, so wenige Datenbankverbindungen wie möglich zu öffnen und mehr Verbindungen im Verbindungspool zu verwenden. Aus dem gleichen Grund können auch TCP-Verbindungen wiederverwendet werden. http1.1 schlug das Konzept der dauerhaften Verbindung (persistente Verbindung) vor, was bedeutet, dass dieselbe HTTP -Verbindung mehrere Anforderungen gleichzeitig verarbeiten kann, wodurch TCP-Verbindung.

Wenn das HTML-Gerüst der Seite geladen wird, beginnt der Browser, die Tags auf der Seite zu analysieren , von Beginnen Sie mit der Analyse von oben nach unten.

Das erste ist das Parsen des head-Tags. Wenn festgestellt wird, dass es ein JS-Skript gibt, das in head, dann Der Browser beginnt zu diesem Zeitpunkt mit der Anforderung des Skripts und der gesamte Seitenanalyseprozess stoppt, bis die JS-Anfrage abgeschlossen ist. Anschließend wird die Seite nach unten geparst, beispielsweise durch Parsen des body-Tags. Wenn in body ein img-Tag vorhanden ist, fordert der Browser img an Die Ressourcen, die src entsprechen. Wenn mehrere img-Tags vorhanden sind, analysiert der Browser sie einzeln und die Analyse wartet nicht wie JS. Wird gleichzeitig heruntergeladen.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Lösungen zur Web-Performance-Optimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!