Erfahrung in der WEB-Frontend-Optimierung

Mit dem Aufkommen der WEB2.0-Ära hat das Netzwerk eine beispiellose Entwicklung erfahren. Das Front-End-Benutzererlebnis wird immer wichtiger, um einige der Mängel einer schlechten Benutzerinteraktion in der B/S-Struktur auszugleichen. Dies führt jedoch zu einem Problem, nämlich dass es den Druck auf den Kunden erhöht Wenn beispielsweise eine große Menge JS-Code verwendet wird, wird jeder wissen, dass der JS-Code, der auf dem Client ausgeführt wird, die Analyseeffizienz der gesamten Webseite im Browser beeinträchtigt, was auch zu einem Anstieg des Client-Verkehrs führen kann Aus Sicht der Serverlast oder aus Sicht des Benutzers, denn Es ist besonders wichtig, den Client-Code zu optimieren! In diesem Artikel werden hauptsächlich die Methoden der WEB-Frontend-Optimierung sowohl aus interner als auch externer Sicht erläutert. Ich hoffe, dass es den Lesern etwas Erfahrung und Inspiration geben kann.

Schauen wir uns zunächst die http-Verkehrsdaten von http://yahoo.com anhand eines Yahoo-Statistikdiagramms an:

Wir können feststellen, dass das Lesen des HTML-Codes von der ersten Serveranfrage bis zum vollständigen Laden einer Seite auf dem Client nur 5 % der gesamten Antwortzeit ausmacht. Dieses Ergebnis trifft auf die überwiegende Mehrheit der Websites in den USA zu Bei den Top-Ten-Websites hat nur eine mehr als 5 %, aber weniger als 20 %. Die restlichen 80 % der Zeit werden zum Lesen anderer Inhalte der Webseite verwendet, also des Frontends (Originaltext ist vorne). -end, was bedeutet, dass kein HTML enthalten ist. Der Rest des Codes kann aus Bildern, Skripten, Flash, Videos usw. bestehen. Dies ist der Hauptgrund, warum wir uns auf diese Dinge konzentrieren sollten, um die Anzeigegeschwindigkeit zu verbessern.

Es gibt drei Hauptgründe, warum Sie mit dem Frontend beginnen sollten :

1. Hier besteht Verbesserungs- und Verbesserungspotenzial. Wenn die Lautstärke um die Hälfte reduziert werden kann, kann die Reaktionszeit um 40 % verkürzt werden.
2. Die Verbesserung des Frontends erfordert weniger Zeit und Ressourcen als die Verbesserung des Backends. (Die Verbesserung des Backends umfasst die Neugestaltung des Anwendungsplans und Codes, die Suche nach Möglichkeiten zur Optimierung des Codes, das Hinzufügen oder Ändern von Hardwarekonfigurationen, verteilten Datenbanken usw.)
3. Unsere goldene Regel lautet: Optimieren Sie zuerst die Front-End-Leistung. Diese Dinge verbrauchen 80 % der Reaktionszeit auf Benutzerseite.

1. Außerhalb des Codes haben wir die folgenden drei Methoden:

1. Nutzen Sie die CDN-Technologie

Für bestimmte Methoden können Sie es googeln. (Das allgemeine Prinzip scheint darin zu bestehen, den Standort des Besuchers und den abgerufenen Inhalt zu ermitteln, um den nächstgelegenen Server auszuwählen, der die Anfrage des Benutzers bearbeiten kann.)

2. Fügen Sie einen längst abgelaufenen Header hinzu

Gültig bis: Do, 15. April 2010, 20:00:00 GMT

Browser verwenden Caching, um die Anzahl der HTTP-Anfragen zu reduzieren und die Ladezeit der Seite zu beschleunigen. Wenn dem Seitenkopf eine lange Ablaufzeit hinzugefügt wird, speichert der Browser die Elemente auf der Seite immer zwischen.
Dies führt jedoch zu einem Problem: Wenn sich die Dinge auf der Seite ändern, muss der Name geändert werden, da der Client sonst nicht aktiv aktualisiert wird. In der Yahoo-Arbeitsgruppe wird die Versionsnummer verwendet, z. B. yahoo_2. 0.6.js

3.Gzip-Komprimierung

Gzip ist heute die beliebteste und effektivste Komprimierungsmethode. Sie wurde von GNU entwickelt und von RFC1952 standardisiert.
(Gzip komprimiert Bilder, CSS, Skripte usw. auf der Serverseite und sendet sie dann zum Dekomprimieren an den Browser des Clients. Dies kann die Übertragungsgeschwindigkeit erhöhen, aber der Druck auf den Server wird zunehmen. Im Allgemeinen ist dies angemessener um einige Elemente zu komprimieren.