Website-Frontend- und Backend-Performance-Optimierung (Nettoauszug)

1. Reduzieren Sie die Anzahl der HTTP-Anfragen
Führen Sie Dateien zusammen, indem Sie alle Skripte in einer Skriptdatei oder alle Stylesheets in einer Stylesheet-Datei platzieren und so die Anzahl der HTTP-Anfragen reduzieren .
CSS Sprites sind die bevorzugte Lösung zur Reduzierung von Bildanfragen. Kombinieren Sie alle Hintergrundbilder in einem Bild und verwenden Sie die CSS-Eigenschaften „Hintergrundbild“ und „Hintergrundposition“, um den entsprechenden Bildbereich zu steuern.
Inline-Bilder verwenden das URL-Schema „data:“, um Bilddaten in die Seite einzubetten. Dadurch wird jedoch die Größe des HTML-Dokuments erhöht.
2. Content-Verteilungsnetzwerk verwenden
Content Distribution Network (CDN) ist eine Sammlung von Servern, die in verschiedenen Regionen verteilt sind und Informationen effektiver an Benutzer senden können. Es wählt den Server aus, an den Daten für einen Benutzer gesendet werden sollen, basierend auf einem Maß für die Domänenentfernung. Beispielsweise wird der Server mit den wenigsten Hops zum Erreichen des Benutzers oder der schnellsten Antwortgeschwindigkeit ausgewählt.
3. Fügen Sie dem Header ein Ablaufdatum oder eine Cache-Kontrolle hinzu
Für statische Komponenten: Stellen Sie den Cache-Zeitraum des Headers auf eine ferne Zukunft ein, damit er „niemals ablaufen“ kann.
Für dynamische Komponenten: Verwenden Sie geeignete Cache-Control-Header, um dem Browser bei der Ausführung bestimmter Anforderungen zu helfen.
4. Gzip-Komprimierungskomponente
Das durch Accept-Encoding im Header der HTTP-Anfrage angegebene Komprimierungsformat:
ν Accept-Encoding: gzip, deflate
ν Content- Kodierung: gzip
5. Platzieren Sie das Stylesheet am Anfang
Wenn Sie das Stylesheet an den Kopf des Dokuments verschieben, kann dies das Laden der Seite beschleunigen. Denn durch die Platzierung des Stylesheets am Kopf kann die Seite schrittweise gerendert werden.
6. Fügen Sie das Skript am Ende ein
Skripte können gleichzeitige Downloads blockieren. Die HTTP/1.1-Spezifikation empfiehlt, dass Browser pro Domänennamen nur zwei gleichzeitige Downloads durchführen.
Richten Sie ein Lazy-Loading-Skript ein, das auch am Ende der Seite platziert werden kann
7. Verwenden Sie keine CSS-Ausdrücke
CSS-Ausdrücke sind eine leistungsstarke (und gefährliche) Dynamik Festlegen von CSS-Eigenschaftsmethoden.

Das Problem mit CSS-Ausdrücken besteht darin, dass sie häufiger ausgeführt werden, als die meisten Leute erwarten würden. Ausdrücke werden nicht nur ausgeführt, wenn die Seite angezeigt und in der Größe geändert wird, sondern auch, wenn auf der Seite gescrollt wird und sogar, wenn der Benutzer die Maus über die Seite bewegt. Durch das Hinzufügen eines Zählers zu einem CSS-Ausdruck kann verfolgt werden, wann und wie das CSS ausgeführt wird. Durch Bewegen der Maus auf der Seite können leicht mehr als 10.000 Ausführungen generiert werden.
8. Verwendung von externem JavaScript und CSS
Die Verwendung externer Dateien in realen Anwendungen führt häufig zu schnelleren Seiten, da Browser JavaScript- und CSS-Dateien zwischenspeichern. Wenn in externen Dateien platziertes JavaScript und CSS vom Browser zwischengespeichert werden, besteht keine Notwendigkeit, die Anzahl der HTTP-Anfragen zu erhöhen und die Größe des HTML-Dokuments wird reduziert.
9. Reduzieren Sie DNS-Anfragen
DNS benötigt im Allgemeinen 20–120 Millisekunden, um die IP-Adresse eines bestimmten Domänennamens zu ermitteln. Der Browser lädt nichts vom Zieldomänennamen herunter, bis die DNS-Suche abgeschlossen ist.

10. JavaScript und CSS minimieren

Minimierung bedeutet, unnötige Buchstaben aus dem Code zu entfernen, die Dateigröße zu reduzieren und die Ladegeschwindigkeit zu verbessern.

Beim Reduzieren des Codes müssen Sie alle Kommentare sowie unnötige Leerzeichen (Leerzeichen, neue Zeilen und Tabulatoren) entfernen.

Reduzieren Sie die Größe von JS- oder CSS-Dateien und verbessern Sie die Antwortleistung.

Code-Verschleierung ist eine weitere Optimierungslösung, die im Quellcode verwendet werden kann.

Komprimieren Sie die in die Seite eingebetteten

16.在Ajax请求中使用GET方法

Yahoo! Mail 团队发现进行XMLHttpRequest的时候，POST方法在浏览器中分两步执行：先发送头部，然后发送数据。所以最好使用只发送一个TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大长度是2000，所以如果你发送超过 2000的数据就不能使用GET方法。
一个有趣的现象是，POST方法并不像GET那样实际发送数据（而Get则名副其实）。基于 HTTP规范，GET方法意味着取回数据，所以当你只是请求数据时使用GET方法更为有意义（从语义上来说），而在发送需要储存在服务器端的数据时则相反使用POST。

17.后加载组件

你可以仔细端详下你的页面然后自问：“什么是在页面初始化时必须的？”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。