01. HTTP-Anfragen minimieren Reduzieren Sie HTTP-Anfragen
Bilder, CSS, Skripte, Flash usw. erhöhen die Anzahl der HTTP-Anfragen. Durch die Reduzierung der Anzahl dieser Elemente kann die Antwortzeit verkürzt werden. Schreiben Sie nach Möglichkeit mehrere JS- und CSS-Dateien in eine Datei. Es ist auch eine schlechte Praxis, Bilder direkt in die Seite zu schreiben, CSS Sprite zu verwenden, um die kleinen Bilder zusammenzusetzen, und dann den Hintergrund zu verwenden, um die Position zu finden. Verwenden Sie „Image Map“ (Durch die Platzierung verschiedener URLs auf demselben Bild kann diese Methode die Anzahl der Bildanforderungen reduzieren. Nach dem Test ist die Zeit zum Abrufen der Image Map 56 % schneller als die Zeit zum Abrufen jedes einzelnen Bilds. Image Map Es gibt zwei Möglichkeiten, eine ist „serverseitige Bildkarte“ und die andere ist „clientseitige Bildkarte“. Die serverseitige Implementierung besteht darin, die vom Benutzer angeklickten XY-Koordinaten an den Server zu übergeben und dann den Server- Die Verwendung von MAP-Tags im Vordergrund erschwert die Programmierung erheblich.
02. Verwenden Sie ein Content Delivery Network mit CDN-Technologie
„Content-Delivery-Netzwerk“. Sein Zweck besteht darin, den Inhalt der Website an dem Netzwerkrand zu veröffentlichen, der dem Benutzer am nächsten liegt, indem dem bestehenden Internet eine neue Ebene der Netzwerkarchitektur hinzugefügt wird.
Funktionen von CDN:
1. Beschleunigung des lokalen Caches – verbessert die Zugriffsgeschwindigkeit auf Unternehmenswebsites (insbesondere Websites mit einer großen Anzahl von Bildern und statischen Seiten) und verbessert die Stabilität von Websites der oben genannten Art erheblich.
2. Spiegelungsdienst – beseitigt die Auswirkungen von Verbindungsengpässen zwischen verschiedenen Betreibern, realisiert eine betreiberübergreifende Netzwerkbeschleunigung und stellt sicher, dass Benutzer in verschiedenen Netzwerken eine gute Zugangsqualität erhalten können.
3. Remote-Beschleunigung – Remote-Zugriffsbenutzer wählen intelligent und automatisch den Cache-Server basierend auf der DNS-Lastausgleichstechnologie aus und wählen den schnellsten Cache-Server aus, um den Remote-Zugriff zu beschleunigen.
4. Bandbreitenoptimierung – Generieren Sie automatisch einen Remote-Mirror-Cache-Server für den Server und lesen Sie Daten vom Cache-Server, wenn Remote-Benutzer darauf zugreifen. Dadurch wird die Bandbreite des Remote-Zugriffs reduziert, der Netzwerkverkehr wird gemeinsam genutzt und die Belastung des ursprünglichen WEB-Servers des Standorts verringert , usw.
5. Cluster-Angriffsschutz – Die weit verteilten CDN-Knoten und der intelligente Redundanzmechanismus zwischen den Knoten können das Eindringen von Hackern wirksam verhindern und die Auswirkungen verschiedener DDOS-Angriffe auf die Website reduzieren und gleichzeitig eine gute Servicequalität gewährleisten.
03. Fügen Sie einen Expires- oder Cache-Control-Header hinzu, um „Ablauf der Header-Datei“ oder „Statischen Cache“ festzulegen.
Browser verwenden Caching, um die Anzahl der HTTP-Anfragen zu reduzieren und die Ladezeit von Seiten zu beschleunigen. Wenn dem Header der Seite eine lange Ablaufzeit hinzugefügt wird, speichert der Browser die Elemente auf der Seite immer zwischen. Wenn sich jedoch etwas auf der Seite ändert, muss der Name geändert werden, da der Client sonst nicht aktiv aktualisiert wird.
(1) Konzept
Cache-Control wird zur Steuerung des HTTP-Cache verwendet (möglicherweise nicht teilweise in HTTP/1.0 implementiert, nur Pragma: No-Cache ist implementiert)
Format: Cache-Steuerung: Cache-Anweisung
Die Cache-Anweisung kann wie folgt lauten:
Wird bei der Anfrage verwendet:
|. „kein Cache“
|. „no-store“
|. „max-age“ „=“ Delta-Sekunden
|. "max-stale" [ "=" delta-sekunden ]
|. „min-fresh“ „=“ Delta-Sekunden
|. „keine Transformation“
|. „nur wenn zwischengespeichert“
|. „Cache-Erweiterung“
Als Antwort verwendet:
|. „öffentlich“
|. "privat" [ "=" <"> Feldname <"> ]
|. "no-cache" [ "=" <"> Feldname <"> ]
|. „no-store“
|. „keine Transformation“
|. „Muss erneut validiert werden“
|. „Proxy-Revalidierung“
|. „max-age“ „=“ Delta-Sekunden
|. „s-maxage“ „=“ Delta-Sekunden
|. „Cache-Erweiterung“
Teilbeschreibung:
Aufgeteilt danach, ob es zwischengespeichert werden kann
„Öffentlich“ gibt an, dass die Antwort von jedem Cache zwischengespeichert werden kann.
„Privat“ gibt an, dass die Antwortnachricht für einen einzelnen Benutzer ganz oder teilweise nicht vom gemeinsam genutzten Cache verarbeitet werden kann. Dadurch kann der Server nur eine Teilantwort eines Benutzers beschreiben, die für die Anfragen anderer Benutzer nicht gültig ist.
No-Cache zeigt an, dass die Anforderungs- oder Antwortnachricht nicht zwischengespeichert werden kann (HTTP/1.0 wird durch Pragmas No-Cache ersetzt).
Basierend auf dem, was zwischengespeichert werden kann
no-store wird verwendet, um zu verhindern, dass wichtige Informationen unbeabsichtigt weitergegeben werden. Das Senden in der Anforderungsnachricht führt dazu, dass sowohl die Anforderungs- als auch die Antwortnachrichten Caching verwenden.
Basierend auf dem Cache-Timeout
max-age gibt an, dass der Client Antworten mit einer Lebensdauer empfangen kann, die nicht größer als die angegebene Zeit in Sekunden ist.
min-fresh gibt an, dass der Client Antworten mit einer Antwortzeit empfangen kann, die kürzer ist als die aktuelle Zeit plus die angegebene Zeit.
max-stale gibt an, dass der Client über den Timeout-Zeitraum hinaus Antwortnachrichten empfangen kann. Wenn ein Wert für die maximale Anzahl veralteter Nachrichten angegeben ist, kann der Client dies tun
Empfängt Antwortnachrichten, die innerhalb des angegebenen Timeout-Zeitraums liegen.
Expires stellt die Existenzzeit dar und ermöglicht es dem Client, vor diesem Zeitpunkt nicht zu prüfen (eine Anfrage zu senden), was dem maximalen Alter entspricht.
Wirkung. Wenn sie jedoch gleichzeitig vorhanden sind, werden sie durch das maximale Alter von Cache-Control überschrieben.
Format: Expires = „Expires“ : „HTTP-Datum
Zum Beispiel: Läuft ab: Do, 01. Dezember 1994 16:00:00 GMT (muss im GMT-Format vorliegen)
(2) Bewerbung
Ablaufdatum und Cache-Kontrolle über HTTP META festlegen:
<meta http-equiv=“Cache-Control“ content=“max-age=7200″ />
<meta http-equiv=“Expires“ content=“Mon, 20. Juli 2009 23:00:00 GMT“ />
Die oben genannten Einstellungen sind nur Beispiele und jede davon kann in der Praxis verwendet werden. Wenn es so geschrieben ist, ist es nur für die Webseite gültig und wird nicht für Bilder oder andere Anfragen auf der Webseite verwendet und führt keine Zwischenspeicherung durch. Darüber hinaus gibt es mehr Anfragen vom Client. Obwohl nur der Status „Zuletzt geändert“ überprüft wird, muss sich die Zunahme der Anfragen auf die Browsing-Geschwindigkeit auswirken.
Wenn Sie der Datei einen Cache hinzufügen möchten, können Sie das mod_expire-Modul von Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ) verwenden, das wie folgt geschrieben ist
<IfModule mod_expires.c>
Läuft abAktiv am
Läuft abStandardwert „Zugriff plus 1 Tag“
</IfModule>
Ich erinnere mich, dass ExpiresActive zunächst nicht aktiviert war. Es scheint, dass YSlow den Caching-Mechanismus nicht finden kann, egal was passiert. Wenn es auf diese Weise hinzugefügt wird, wird es standardmäßig einbezogen. Wenn Sie auf einzelne MIME-Typen abzielen möchten, können Sie:
ExpiresByType Bild/GIF „Zugriff plus 5 Stunden 3 Minuten“
Wenn Sie im Browser auf „Aktualisieren“ klicken, sind alle vom Client gesendeten Anforderungen max-age = 0, was auf den Validierungsvorgang hinweist. Senden Sie eine Anforderung an den Server, um den Cache zu überprüfen, und aktualisieren Sie dann den Cache Erhalten Sie 304 Not Modified, was bedeutet, dass es keine Änderung gibt.
04. Gzip-Komponenten Gzip-Komprimierung
Das Gzip-Format ist eine sehr verbreitete Komprimierungstechnologie. Fast alle Browser verfügen über die Möglichkeit, das Gzip-Format zu dekomprimieren, und die Komprimierungsrate, die es komprimieren kann, ist mit einer allgemeinen Komprimierungsrate von 85 % sehr hoch. Komprimierung oder nicht, Sie können es hier testen.
05. Stylesheets ganz oben platzieren CSS ganz oben platzieren
Platzieren Sie das Stylesheet mit dem LINK-Tag im HEAD des Dokuments, damit Betrachter möglichst frühzeitig den vollständigen Stil der Website sehen können.
HTML-Seiten werden Schritt für Schritt gerendert. Wenn Benutzer die Seite öffnen, müssen wir die Benutzererfahrung berücksichtigen – die Geschwindigkeit beim Öffnen der Webseite. Die erste Voraussetzung für die Anzeige einer Seite ist HTML, und HTML besteht nacheinander aus DIVs, und CSS ist die Grundlage für alles.
06. Skripte ganz unten platzieren JS ganz unten platzieren
Nachdem die Website gerendert wurde, können Sie die Funktionen festlegen. Natürlich dürfen diese JS die Inhaltsleistung während Ihres Ladevorgangs nicht beeinträchtigen.
Da die Seite schrittweise gerendert wird, werden Inhalte unterhalb des Skripts blockiert. Das Rendern der Seite wird erst fortgesetzt, wenn das Skript vollständig geladen ist. Richtige Platzierung
(1) Worst-Case-Szenario: Platzieren Sie das Skript ganz oben. Es blockiert das nachfolgende Rendern von Inhalten und das anschließende Herunterladen von Komponenten.
(2) Best-Case-Szenario: Platzieren Sie das Skript unten. Verhindert nicht, dass die Seite gerendert wird.
07. Vermeiden Sie CSS-Ausdrücke. Vermeiden Sie CSS-Ausdrücke
CSS-Ausdrücke sind schrecklich. Diese Funktion wird nur vom IE unterstützt und erfordert bei der Ausführung sehr viele Berechnungen. Sie wird bei jeder Mausbewegung neu berechnet, muss aber manchmal aus Gründen der Browserkompatibilität verwendet werden.
08. Machen Sie JavaScript und CSS extern
Wir haben bereits über das Caching gesprochen. Für einige der gebräuchlicheren JS- und CSS-Anwendungen können wir externe Links verwenden, beispielsweise die Verknüpfung von Jquery-Dateien von Google.
09. Reduzieren Sie DNS-Suchvorgänge. Reduzieren Sie DNS-Suchvorgänge
Reduzieren Sie die Ressourcen, die die Website von außen aufruft.
Das Internet findet Server anhand der IP-Adresse. DNS hat auch Overhead. Unter normalen Umständen beträgt die Zeit, die ein Browser benötigt, um eine bestimmte Host-IP-Adresse zu finden, 20 bis 120 ms. Um den Zeitaufwand für den DNS-Suchvorgang zu reduzieren, müssen einige der folgenden Techniken übernommen werden:
(1) DNS-Cache
DNS-Lookups können zwischengespeichert werden, um die Leistung zu verbessern. Nachdem ein Hostname aufgelöst wurde, werden die entsprechenden DNS-Informationen im DNS-Cache des Betriebssystems gespeichert, was die für die spätere Verwendung erforderliche Zeit verkürzen kann. Auch einige andere Browser verfügen über entsprechende DNS-Caching-Funktionen. Die Anzahl der zwischengespeicherten DNS ist jedoch begrenzt. Normalerweise berücksichtigt das Betriebssystem den TTL-Wert und der Browser ignoriert diesen Wert und stellt seine eigene Zeit ein.
(2) TTL
DNS-Caching bringt einen gewissen Systemverbrauch mit sich und die IP-Adresse des Servers bleibt nicht unbedingt unverändert. Der Server kann angeben, wie lange der Datensatz zwischengespeichert werden kann, und der von der Suche zurückgegebene DNS-Eintrag enthält einen Time-to-Live-Wert (TTL), der angibt, wie lange der Client den Datensatz zwischenspeichern kann. Im Allgemeinen kann es auf 1 Tag eingestellt werden.
10. JavaScript und CSS minimieren Reduzieren Sie die Größe von JS und CSS
Es gibt Fähigkeiten beim Schreiben von JS und CSS. Verwenden Sie die geringste Menge an Code, um die gleiche Funktion zu erreichen, Leerraum zu reduzieren, die Logik zu verbessern, Abkürzungen zu verwenden usw. Natürlich gibt es viele Tools, die Ihnen dabei helfen können.
11. Vermeiden Sie Weiterleitungen
Beim erneuten Schreiben des Links gibt es zwar nur einen letzten „/“-Unterschied zwischen „http://xxx.com“ und „http://xxx.com/“, die Ergebnisse sind jedoch unterschiedlich. Der Server muss dafür Zeit aufwenden Konvertieren Sie die erstere Weiterleitung in die letztere und springen Sie dann darauf. Sie können das Problem auch mit Alias oder mod_rewrite oder DirectorySlash lösen.
Zu den Verwendungszwecken der Weiterleitung gehören außerdem: die Verbindung verschiedener Websites, die Verfolgung von Website-Besuchen und die Verschönerung von URLs.
12. Doppelte Skripte entfernen Entfernen Sie doppelte Skripte
Der Browser erkennt und ignoriert den wiederholt aufgerufenen Code nicht, sondern berechnet ihn erneut, was natürlich eine große Verschwendung ist.
13. ETags konfigurieren ETags konfigurieren
Ich weiß nicht, was passiert ist, aber ich habe es in htaccess gelöscht.
14. Machen Sie Ajax zum zwischenspeicherbaren Ajax-Cache
Ajax reagiert in Echtzeit, bevor der Browser neue Daten empfängt, und alte Daten werden zwischengespeichert, was die Effizienz verbessern kann.
15. Spülen Sie den Puffer frühzeitig. Geben Sie den Puffer so früh wie möglich frei
Wenn ein Benutzer eine Seitenanforderung stellt, muss der Server 200 bis 500 Millisekunden damit verbringen, den HTML-Code zusammenzustellen, ihn zwischen Kopf und Körper zu schreiben und den Puffer freizugeben. Auf diese Weise kann zuerst der Datei-Header gesendet werden Der Dateiinhalt kann gesendet werden, um die Effizienz zu verbessern.
16. Verwenden Sie GET für AJAX-Anfragen. Verwenden Sie GET für AJAX-Anfragen
Die Get-Methode interagiert nur einmal mit dem Server (Senden von Daten), während Post zwei Interaktionen erfordert (Senden von Headern und dann Daten).
17. Nachladen von Komponenten Verzögertes Laden von Komponenten
Laden Sie zuerst die für die Seiteninitialisierung erforderlichen Komponenten und laden Sie dann andere. Die spezifische Implementierungsmethode kann „verstecktes IFRAME“ oder Javascript sein. „YUI Image Loader“ ist ein gutes Beispiel.
18. Komponenten vorladen. Komponenten vorladen
Das Laden von Dingen, die später verwendet werden können, steht nicht im Widerspruch zum Lazy Loading. Sein Zweck besteht darin, eine schnellere Antwort auf nachfolgende Anfragen bereitzustellen. Siehe die CSS-Sprites-Anwendung auf der Google-Homepage.
19. Reduzieren Sie die Anzahl der DOM-Elemente. Reduzieren Sie die Anzahl der DOM-Elemente
Eine komplexe Seitenstruktur bedeutet längere Download- und Antwortzeiten, was zu einer langsameren Seitenwiedergabe führt. Die sinnvollere und effizientere Verwendung von Tags zur Strukturierung von Seiten ist eine Voraussetzung für ein gutes Frontend.
20. Teilen Sie Komponenten auf Domänen auf
Der Hauptzweck besteht darin, die Fähigkeit zum parallelen Herunterladen von Seitenkomponenten zu verbessern. Achten Sie jedoch darauf, nicht zu viele Domänennamen zu verwenden, da dies zu der oben erwähnten Verschwendung von DNS-Suchen führt. Der IE kann nur zwei Anfragen gleichzeitig für dieselbe Domain haben. Implementierungen können CDN-Netzwerke oder andere verteilte Computernetzwerke nutzen.
21. Minimieren Sie die Anzahl der IFrames. Reduzieren Sie die Anzahl der IFrames
IFrame ist für SEO ein Tabu und IFrame muss effektiver genutzt werden.
IFrame-Vorteile: gut zum Herunterladen langsamer Inhalte von Drittanbietern wie Anzeigen, Sicherheits-Sandbox, parallele Download-Skripte
Nachteile von IFrame: Selbst wenn es leer ist, verbraucht es viele Ressourcen und verhindert das Laden der Seite, was nicht semantisch ist.
22. Keine 404s. Erscheinen nicht auf der 404-Seite
404-Seiten werden auf der Website selbst angezeigt (nicht in den Suchergebnissen). Sinnlose 404-Seiten beeinträchtigen das Benutzererlebnis und verbrauchen Serverressourcen.
23. Cookie-Größe reduzieren. Cookie reduzieren
Cookies werden über Dateiheader zwischen dem Server und dem Browser ausgetauscht, wodurch die Cookie-Größe so weit wie möglich reduziert und eine angemessene Ablaufzeit festgelegt wird, was die Effizienz erheblich verbessern kann.
24. Verwenden Sie cookiefreie Domänen für Komponenten. Verwenden Sie cookiefreie Domänennamen für Komponenten
Das Lesen von Cookies für statische Komponenten ist eine Verschwendung. Es ist eine gute Möglichkeit, einen anderen Domänennamen ohne Cookies zum Speichern Ihrer statischen Komponenten zu verwenden, oder Sie können den Domänennamen nur mit www im Cookie speichern.
25. DOM-Zugriffe minimieren Reduzieren Sie die Anzahl der DOM-Zugriffe
JS greift sehr langsam auf das DOM zu. Versuchen Sie daher, JS nicht zum Festlegen des Seitenlayouts zu verwenden.
26. Entwickeln Sie intelligente Event-Handler. Entwickeln Sie flexible Event-Handler
Wenn dem Ereignishandler zu viele Elemente im DOM-Baum hinzugefügt werden, ist die Antworteffizienz definitiv gering. Das YUI-Ereignistool verfügt über eine onAvailable-Methode, mit der Sie den DOM-Ereignishandler flexibel festlegen können.
27. Wählen Sie <link> anstelle von @import. Verwenden Sie <link> anstelle von @import
Die Verwendung von @import im IE ist dasselbe wie die Verwendung von <link> am Ende der Seite.
28. Vermeiden Sie Filter. Vermeiden Sie die Verwendung von Filtern
Wenn Sie Alpha-Transparenz benötigen, verwenden Sie nicht AlphaImageLoader. Es ist ineffizient und gilt nur für IE6 und niedriger. Verwenden Sie PNG8-Bilder. Wenn Sie es verwenden müssen, fügen Sie _filter hinzu, um Auswirkungen auf IE7+-Benutzer zu vermeiden.
29. Bilder optimieren Bilder optimieren
Das Konvertieren Ihres GIF in PNG8 ist eine gute Möglichkeit, die Größe zu reduzieren, und es gibt viele Möglichkeiten, Ihre JPG- und PNG-Bilder zu verarbeiten, um Optimierungsergebnisse zu erzielen.
30. CSS-Sprites optimieren. CSS-Sprites optimieren
Wenn Sie Bilder in CSS-Sprites vertikal und so kompakt wie möglich anordnen und Bilder mit ähnlichen Farben möglichst zusammen anordnen, wird die Größe des Bildes selbst verringert und die Geschwindigkeit der Seitenbildanzeige erhöht.
31. Bilder in HTML nicht skalieren Skalieren Sie Bilder in HTML nicht
Verwenden Sie ein so großes Bild, wie Sie möchten, seien Sie nicht faul.
32. Machen Sie favicon.ico klein und zwischenspeicherbar. Reduzieren Sie die Größe von favicon.ico und speichern Sie es zwischen
Der Browser-ICO der Website sollte nicht häufig geändert werden. Cachen Sie ihn daher für eine lange Zeit und kontrollieren Sie ihn am besten unter 1 KB.
33. Komponenten unter 25K halten
Das iPhone kann keine Komponenten über 25 KB zwischenspeichern, und zwar vor der Komprimierung.
34. Komponenten in ein mehrteiliges Dokument packen. Komponenten in ein mehrteiliges Dokument packen
Genau wie das Hinzufügen eines Anhangs zu einer E-Mail reicht eine HTTP-Anfrage aus, diese Technik muss jedoch von Ihrem Proxy unterstützt werden, was das iPhone nicht unterstützt.
Inline-Bilder:
Verwenden Sie „data: URL scheme“, um Bilddaten in die eigentliche Seite einzubetten. Was wir normalerweise sehen, sind: http, ftp, mailto und andere Modi. Tatsächlich wurde der data:URL-Modus bereits 1995 vorgeschlagen. Dies bedeutet, dass kleine Datenstücke direkt in die Link-URL integriert werden. Das Muster sieht wie folgt aus: data: [<mediatype>][;base64],<data>
Der erste Parameter gibt das Dateiformat an, z. B. Bild/GIF.
Leider unterstützt der IE diesen Modus derzeit nicht. Darüber hinaus ist auch die Datengröße begrenzt.
Aussage: Der Inhalt stammt aus dem Internet und basiert auf den 34 Artikeln von Yahoo.