Heute habe ich kurz „Hochleistungswebsites“ durchstöbert. Die chinesische Version dieses Buches ist „Guide to High-Performance Website Construction“.
Dieses Buch enthält außerdem ein Kapitel für Fortgeschrittene mit dem Titel „Even Faster Web Sites“, in dem einzelne Themen eingehend behandelt werden. Die chinesische Übersetzung lautet „Advanced Guide to Building High-Performance Websites“.
Der Autor hat es im obigen Douban-Link vorgestellt, daher werde ich es hier nicht kopieren.
Dieses Buch enthält 14 Prinzipien zur Verbesserung der Website-Leistung. Jedes Prinzip ist ein eigenständiges Kapitel mit Beispielen. Die meisten dieser Prinzipien sind sehr praktisch und für Site-Architekten und Front-End-Ingenieure geeignet. Es ist für Front-End-Ingenieure von größerer Bedeutung.
Dieses Mal habe ich mir die Originalversion angeschaut. Mir mangelt es an praktischer Erfahrung in der Webentwicklung und ich habe es eilig gelesen, daher kann es zu Auslassungen und unangemessenen Ausdrücken kommen. Ich hoffe, dass die Internetnutzer sich frei fühlen, mich zu korrigieren.
Prinzip 1 Reduzieren Sie die Anzahl der HTTP-Anfragen
Es braucht Zeit, eine Anfrage zu erstellen und auf eine Antwort zu warten. Je weniger Anfragen, desto besser. Die allgemeine Idee bei der Reduzierung von Anforderungen besteht darin, Ressourcen zusammenzuführen und die Anzahl der zum Anzeigen einer Seite erforderlichen Dateien zu verringern.
1. Bildkarte
Durch Festlegen des usemap-Attributs des <img>-Tags und Verwendung des <map>-Tags können Sie ein Bild in mehrere Bereiche unterteilen und auf verschiedene Links verweisen. Im Vergleich zur Verwendung mehrerer Bilder zum separaten Erstellen von Links wird die Anzahl der Anfragen reduziert.
2. CSS SPRite (CSS-Texturintegration/Texturheftung/Texturpositionierung)
Dies erfolgt durch Festlegen des Hintergrundpositionsstils des Elements. Wird im Allgemeinen für Schnittstellensymbole verwendet. Typische davon sind die kleinen Schaltflächen über dem TinyMCE-Editor. Mehrere kleine Bilder werden im Wesentlichen aus einem einheitlichen großen Bild mit unterschiedlichen Versätzen ausgeschnitten. Auf diese Weise müssen viele Schaltflächen auf der Ladeoberfläche tatsächlich nur einmal angefordert werden (einmaliges Anfordern des großen Bildes), wodurch die Anzahl der HTTP-Anfragen reduziert wird.
3. Inline-Bild
Geben Sie nicht die URL der externen Bilddatei im Quellcode von <img> an, sondern geben Sie die Bildinformationen direkt ein. Beispielsweise ist src="data:image/gif;base64,R0lGODlhDAAMAL..." in einigen Sonderfällen nützlich (z. B. wenn ein kleines Bild nur auf der aktuellen Seite verwendet wird).
Prinzip 2: Nutzen Sie mehrzeiliges CDN
Bieten Sie Ihrer Site Zugriff auf mehrere Leitungen (z. B. inländische Telekommunikation, China Unicom, China Mobile) und mehrere geografische Standorte (Norden, Süden, Westen), damit alle Benutzer schnell darauf zugreifen können.
Prinzip 3: HTTP-Cache verwenden
Fügen Sie längere Expires-Header-Informationen zu Ressourcen hinzu, die nicht häufig aktualisiert werden (z. B. statische Bilder). Sobald diese Ressourcen zwischengespeichert sind, werden sie in Zukunft nicht mehr übertragen.
Prinzip 4: Gzip-Komprimierung verwenden
Verwenden Sie Gzip, um HTTP-Nachrichten zu komprimieren und so Größe und Übertragungszeit zu reduzieren.
Prinzip 5: Platzieren Sie Stylesheets am Anfang der Seite
Laden Sie zuerst das Stylesheet, damit das Rendern der Seite früher beginnen kann und den Benutzern das Gefühl gibt, dass die Seite schneller geladen wird.
Prinzip 6: Platzieren Sie Skripte am Ende der Seite
Der Grund ist derselbe wie bei 5. Die Seitenanzeige wird zuerst verarbeitet, das Rendern der Seite wird früher abgeschlossen und die Skriptlogik wird später ausgeführt, was dem Benutzer das Gefühl gibt, dass die Seite schneller geladen wird.
Prinzip 7 Vermeiden Sie die Verwendung von CSS-Ausdrücken
Eine zu komplexe JavaScript-Skriptlogik, DOM-Suche und Auswahlvorgänge verringern die Effizienz der Seitenverarbeitung.
Prinzip 8 Verwenden Sie Javascript und CSS als externe Ressourcen
Dies scheint im Widerspruch zur Zusammenführungsidee in Prinzip 1 zu stehen, ist es aber nicht: Wenn man bedenkt, dass jede Seite eine öffentliche JavaScript-Ressource (wie jQuery oder eine JavaScript-Bibliothek wie ExtJS) einführt, gemessen an der Leistung einer Seite allein, inline (d. h. Einbetten von JavaScript in HTML) Seiten werden schneller geladen (aufgrund der geringeren Anzahl von HTTP-Anfragen) als ausgehende Seiten (eingeführt mit <script>-Tags). Wenn jedoch viele Seiten diese öffentliche JavaScript-Ressource einführen, führt das Inline-Schema zu einer wiederholten Übertragung (da diese Ressource in jede Seite eingebettet ist, muss dieser Teil der Ressource jedes Mal übertragen werden, wenn eine Seite geöffnet wird, was zu einer Verschwendung von Netzwerkübertragungen führt). Ressourcen). Dieses Problem kann gelöst werden, indem diese Ressource unabhängig gemacht und extern darauf verwiesen wird.
Da JavaScript und CSS relativ stabil sind, können wir längere Ablaufdaten für die entsprechenden Ressourcen festlegen (siehe Prinzip 3).
Prinzip 9 Reduzieren Sie DNS-Suchen
Der Rat des Autors lautet:
1. Verwenden Sie Keep-Alive, um in Verbindung zu bleiben
Wenn die Verbindung getrennt wird, muss beim nächsten Verbindungsaufbau eine DNS-Suche durchgeführt werden. Auch wenn die entsprechende Domänennamen-IP-Zuordnung zwischengespeichert wurde, dauert die Suche einige Zeit.
2. Domainnamen reduzieren
Jedes Mal, wenn Sie einen neuen Domänennamen anfordern, müssen Sie über DNS nach einem anderen Domänennamen suchen, und der DNS-Cache kann nicht funktionieren. Daher sollten Sie Ihr Bestes tun, um die Site unter einem einheitlichen Domainnamen zu organisieren und die Verwendung zu vieler Subdomainnamen zu vermeiden.
Prinzip 10 Minimieren Sie Ihr JavaScript
Verwenden Sie das JS-Komprimierungstool, um Ihr JavaScript zu komprimieren. Es ist sehr effektiv. Schauen Sie sich einfach die beiden verschiedenen Distributionen von jQuery an, um den Unterschied zu erkennen:
http://code.jquery.com/jquery-1.6.2.js Leseversion des jQuery-Codes, 230 KB
http://code.jquery.com/jquery-1.6.2.min.js komprimierte Version des jQuery-Codes (für die tatsächliche Bereitstellung), 89,4 KB
Prinzip 11 Versuchen Sie Weiterleitungen zu vermeiden
Eine Umleitung bedeutet, dass eine zusätzliche Runde von HTTP-Anfragen hinzugefügt wird, bevor Sie tatsächlich auf die Seite zugreifen, die Sie sehen möchten (der Client initiiert eine HTTP-Anfrage → der HTTP-Server gibt eine Umleitungsantwort zurück → der Client initiiert eine Anfrage für eine neue URL → das HTTP Da der Server Inhalte zurückgibt, handelt es sich bei den unterstrichenen Teilen um zusätzliche Anfragen), nimmt er daher mehr Zeit in Anspruch (was den Leuten auch das Gefühl einer langsameren Reaktion vermittelt). Verwenden Sie daher keine Weiterleitungen, es sei denn, dies ist erforderlich. Mehrere „notwendige“ Situationen:
1. Vermeiden Sie ungültige URLs
Nach der Migration der alten Site werden Anfragen für die alte URL normalerweise an die entsprechende Adresse des neuen Systems umgeleitet, um zu verhindern, dass die alte URL ungültig wird.
2. URL-Verschönerung
Konvertieren Sie zwischen lesbaren URLs und tatsächlichen Ressourcen-URLs. Benutzer merken sich beispielsweise http://toolbar.google.com, was für Menschen eine semantische Adresse ist, aber es ist schwierig, sich http://www.google zu merken .com/tools/Firefox/toolbar/FT3/intl/en/index.html ist die eigentliche Ressourcenadresse. Daher ist es notwendig, Ersteres beizubehalten und Anfragen für Ersteres an Letzteres umzuleiten.
Prinzip 12 Entfernen Sie doppelte Skripte
Fügen Sie nicht wiederholt dasselbe Skript auf einer Seite ein. Beispielsweise hängen die Skripte B und C beide von A ab, sodass es auf Seiten, die B und C verwenden, möglicherweise wiederholte Verweise auf A gibt. Die Lösung besteht darin, Abhängigkeiten für einfache Sites manuell zu überprüfen und wiederholte Einführungen zu vermeiden. Für komplexe Sites müssen Sie Ihren eigenen Abhängigkeitsverwaltungs-/Versionskontrollmechanismus erstellen.
Prinzip 13 Gehen Sie vorsichtig mit ETags um
ETag ist neben Last-Modified eine weitere HTTP-Cache-Methode. Identifizieren Sie, ob die Ressource durch Hashing geändert wurde. Es gibt jedoch einige Probleme mit ETag, wie zum Beispiel:
1. Inkonsistenz: Verschiedene Webserver (Apache, IIS usw.) definieren unterschiedliche ETag-Formate
2. Die Berechnung von ETag ist instabil (aufgrund der Berücksichtigung zu vieler Faktoren), wie zum Beispiel:
1) Für dieselben Ressourcen werden unterschiedliche ETags auf verschiedenen Servern berechnet, und große Webanwendungen werden normalerweise von mehr als einem Server bereitgestellt. Dies führt dazu, dass die zwischengespeicherten Ressourcen des Clients auf Server A weiterhin gültig sind, bei der nächsten Anforderung jedoch an B Wenn das ETag unterschiedlich ist, wird es als ungültig betrachtet, was zu einer wiederholten Übertragung derselben Ressource führt.
2) Die Ressource bleibt unverändert, aber das ETag ändert sich aufgrund von Änderungen einiger anderer Faktoren, wie z. B. Änderungen der Konfigurationsdatei. Die direkte Folge ist, dass nach der Systemaktualisierung Client-Cache-Ausfälle in großem Umfang auftreten, was zu einem starken Anstieg des Übertragungsvolumens und einer Verschlechterung der Site-Leistung führt.
Der Vorschlag des Autors lautet: Verbessern Sie entweder die vorhandene ETag-Berechnungsmethode entsprechend den Merkmalen Ihrer Anwendung oder verwenden Sie ETag einfach nicht und verwenden Sie das einfachste Last-Modified.
Prinzip 14 Nutzen Sie den HTTP-Cache mit Ajax
Ajax ist eine asynchrone Anfrage. Asynchrone Anfragen blockieren Ihre aktuellen Vorgänge nicht und wenn die Anfrage abgeschlossen ist, können Sie die Ergebnisse sofort sehen. Aber asynchron bedeutet nicht, dass es sofort abgeschlossen werden kann, noch bedeutet es, dass es toleriert werden kann und unendlich viel Zeit in Anspruch nehmen kann. Daher muss auch auf die Leistung von Ajax-Anfragen geachtet werden. Es gibt viele Ajax-Anfragen, die auf relativ stabile Ressourcen zugreifen. Vergessen Sie also nicht, den HTTP-Cache-Mechanismus für Ajax-Anfragen sinnvoll zu nutzen. Weitere Informationen finden Sie in den Prinzipien 3 und 13.
Autor: Yang Mengdong
Quelle des Artikels: Yang Mengdongs Blog. Bitte geben Sie beim Nachdruck den Quellenlink an.