Ich glaube, dass das Internet zu einem unverzichtbaren Teil des Lebens der Menschen geworden ist. Die Anwendungen von reichen Kunden wie Ajax, Flex usw. machen die Menschen gerne viele Funktionen, die nur in C/S implementiert werden konnten. Beispielsweise hat Google Opportunity alle grundlegendsten Büroanwendungen ins Internet verschoben. Natürlich macht es die Seite zweifellos langsamer und langsamer. Ich mache Front-End-Entwicklung. Laut der Umfrage von Yahoo macht das Backend nur 5%aus, während das Front-End bis zu 95%liegt, von denen 88%der Dinge optimiert werden können.
Das obige ist das Lebenszyklusdiagramm einer Web2.0 -Seite. Der Ingenieur sagt lebhaft, dass er in vier Stufen unterteilt ist: Schwangerschaft, Geburt, Abschluss und Ehe. Wenn wir diesen Vorgang anstelle eines einfachen Anforderungsantworts erkennen können, wenn wir auf den Web-Link klicken, können wir viele Details ausgraben, die die Leistung verbessern können. Heute habe ich mir einen Vortrag über die Forschung der Webleistung von Xiao Ma Ge auf Taobao über das Yahoo -Entwicklungsteam angehört. Ich hatte das Gefühl, dass ich viel gewonnen habe und wollte es im Blog teilen.
Ich glaube, viele Menschen haben von 14 Regeln für die Optimierung der Website -Leistung gehört. Weitere Informationen finden Sie in Entwickler.yahoo.com
1. Reduzieren Sie die Anzahl der HTTP -Anforderungen so weit wie möglich [Inhalt]
2. Verwenden Sie CDN (Content Delivery Network) [Server]
3. Fügen Sie den Ablauf des Headers (oder Cache-Control) [Server] hinzu.
4. GZIP -Komponente [Server]
5. Platzieren Sie den CSS -Stil über der Seite [CSS]
6. Das Skript nach unten verschieben (einschließlich Inline) [JavaScript]
7. Vermeiden Sie die Verwendung von Ausdrücken in CSS [CSS]
8. Separate JavaScript und CSS in externe Dateien [JavaScript] [CSS]
9. DNS -Abfragen reduzieren [Inhalt]
10. Kompress JavaScript und CSS (einschließlich Inline) [JavaScript] [CSS]
11. Vermeiden Sie Umleitungen [Server]
12. DOPPICE -Skripte entfernen [JavaScript]
13. Konfigurieren Sie Entity -Tags (ETAGs) [CSS]
14. Ajax Cache machen
Unter Firefox gibt es einen Plug-In-Yslow, der in Firebug integriert ist. Sie können es verwenden, um zu sehen, wie Ihre Website in diesen Aspekten funktioniert.
Dies ist das Ergebnis der Verwendung von Yslow zur Bewertung meiner Website XIfengFang. Leider hat es nur 51 Punkte. hehe. Die zahlreichen wichtigen Websites in China sind nicht hoch. Ich habe es gerade getestet und sowohl Sina als auch Netase waren 31 Punkte. Dann beträgt der Punktzahl von Yahoo (US) tatsächlich 97 Punkte! Es ist ersichtlich, dass Yahoo in dieser Hinsicht Anstrengungen unternommen hat. Nach den 14 Regeln zu urteilen, die sie zusammengefasst haben, gibt es jetzt viele Details, die uns jetzt hinzugefügt wurden, und einige Praktiken sind sogar etwas pervers.
Artikel 1: Minimieren Sie die Anzahl der HTTP -Anfragen so weit wie möglich (weniger HTTP -Anfragen machen).
HTTP -Anfragen sind Overhead, und die Suche nach Möglichkeiten zur Reduzierung der Anzahl der Anforderungen kann die Geschwindigkeit der Webseite natürlich erhöhen. Gemeinsame Methoden sind CSS, JS (Zusammenführen von CSS- und JS -Dateien in einer Seite) und Image Maps und CSS -Sprites usw. Natürlich sind die Aufspalten von CSS und JS -Dateien auf Überlegungen in Bezug auf CSS -Struktur, Teilen usw. zurückzuführen. Dies war immer noch eine Anfrage für den Browser, konnte jedoch während der Entwicklung immer noch auf mehrere wiederhergestellt werden, was für die Verwaltung und wiederholte Referenzen zweckmäßig war. Yahoo empfiehlt sogar, die Homepage CSS und JS direkt in die Datendatei anstelle von externen Referenzen zu schreiben. Da die Homepage zu viele Besuche enthält, kann dies die Anzahl von zwei Anfragen verringern. Tatsächlich tun dies viele inländische Portale.
CSS Sprites bezieht sich darauf, das Hintergrundbild auf der Seite nur in einem zu kombinieren und dann den Wert zu verwenden, der nicht durch das Hintergrund-Positionsattribut von CSS definiert werden kann, um seinen Hintergrund zu erhalten. Die chinesischen Websites von Taobao und Alibaba tun dies derzeit. Wenn Sie interessiert sind, können Sie sich die Hintergrundbilder von Taobao und Alibaba ansehen.
http://www.csssprites.com/ Dies ist eine Tool-Website, die die von Ihnen hochgeladenen Bilder automatisch zusammenführen und den entsprechenden Koordinaten für Hintergrundpositionen angeben kann. Und geben Sie die Ergebnisse in PNG- und GIF -Formaten aus.
Artikel 2: Verwenden Sie ein Inhaltsdeliefer -Netzwerk
Um ehrlich zu sein, weiß ich nicht viel über CDN. Einfach ausgedrückt, indem Sie dem vorhandenen Internet eine neue Netzwerkarchitektur hinzufügen und den Inhalt der Website zum Cache -Server am nächsten dem Benutzer veröffentlichen. Durch die DNS -Lastausgleichstechnologie wird beurteilt, dass die Quelle des Benutzers auf den Cache -Server in der Nähe zugreift, um die erforderlichen Inhalte zu erhalten. Benutzer in Hangzhou greifen auf den Inhalt auf dem Server in der Nähe von Hangzhou zu, und diejenigen in Peking zugreifen auf den Inhalt auf dem Server in der Nähe von Peking. Dies kann den Zeitpunkt der Datenübertragung im Netzwerk effektiv verkürzen und die Geschwindigkeit verbessern. Für detailliertere Inhalte können Sie sich auf die Erläuterung von CDN auf Baidu Encyclopedia beziehen. Yahoo! Die Verteilung des statischen Inhalts auf CDN verringert die Auswirkung der Benutzer um 20% oder mehr.
CDN -Technologiediagramm:
CDN -Netzwerkdiagramm:
Artikel 3: Fügen Sie einen Ablauf/Cache-Kontroll-Header hinzu: Fügen Sie einen Ablauf-Header hinzu
Jetzt sind immer mehr Bilder, Skripte, CSS und Flash in die Seite eingebettet, und wenn wir darauf zugreifen, werden wir zwangsläufig viele HTTP -Anfragen stellen. Tatsächlich können wir diese Dateien durch einstellen, indem wir den Ablauf des Headers abgeben. Abgelaufen gibt tatsächlich die Cache -Zeit eines bestimmten Dateiarts im Browser über die Header -Nachricht an. Die meisten Bilder müssen nach der Veröffentlichung nicht häufig modifiziert werden. Nach dem zwischengespeicherten Abschnitt muss der Browser diese Dateien nicht mehr vom Server herunterladen und direkt aus dem Cache lesen. Dadurch wird der Zugriff auf die Seite erneut beschleunigt. Ein typisches HTTP 1.1 -Protokoll gibt Headerinformationen zurück:
HTTP/1.1 200 OK
Datum: Fr, 30. Oktober 1998 13:19:41 GMT
Server: Apache/1.3.3 (UNIX)
Cache-Control: max-agete = 3600, must-revalidat
Ausgelassen: Fr, 30. Oktober 1998 14:19:41 GMT
Last-Modified: Mon, 29. Juni 1998 02:28:12 GMT
ETAG: 3E86-410-3596FBBC
Inhaltslänge: 1040
Inhaltstyp: Text/HTML
Dies kann durch Einstellen von Cache-Control erfolgen und über serverseitige Skripte abläuft.
Wenn Sie beispielsweise in PHP eingestellt sind, läuft nach 30 Tagen ab:
<!-PHEADER (Cache-Control: Must-Revalidate); $ offset = 60 * 60 * 24 * 30; $ expstr = läuft aus: gmdate (d, d, myh: i: s, time () + $ offset). GMT; Header ($ expstr);-> kann auch durch Konfigurieren des Servers selbst durchgeführt werden, sodass diese nicht sehr klar sind, haha. Wenn Sie mehr wissen möchten, lesen Sie bitte http://www.web-caching.com/
Soweit ich weiß, beträgt die Ablaufzeit der chinesischen Website von Alibaba 30 Tage. In diesem Zeitraum gab es jedoch Probleme, insbesondere wenn Sie die Ablaufzeit des Skripts festlegen, sollten Sie es sorgfältig in Betracht ziehen, da der Client diese Änderungen nach der Aktualisierung der entsprechenden Skriptfunktion ansonsten dauern kann. Ich habe dieses Problem gestoßen, als ich zuvor am [Vorschlag -Projekt] gearbeitet habe. Daher sollten wir sorgfältig prüfen, welche zwischengespeichert werden sollten und welche nicht zwischengespeichert werden sollten.
Artikel 4: Aktivieren Sie die Gzip -Komprimierung: Gzip -Komponenten
Die Idee von GZIP besteht darin, zuerst Dateien auf der Serverseite zu komprimieren und dann zu übertragen. Dies kann die Größe der Dateiübertragungen erheblich verringern. Nach Abschluss des Getriebes wird der Browser den komprimierten Inhalt neu komprimieren und ihn ausführen. Aktuelle Browser können Gzip gut unterstützen. Der Browser kann es nicht nur erkennen, sondern auch die Hauptcrawler können es erkennen. Alle Treue können sich versichert. Darüber hinaus ist das Kompressionsverhältnis von GZIP sehr groß, im Allgemeinen beträgt das Komprimierungsverhältnis 85%, was bedeutet, dass die 100 -km -Seite auf dem Server auf etwa 25.000 komprimiert werden kann, bevor sie an den Client gesendet werden. Für bestimmte GZIP -Komprimierungsprinzipien können Sie auf den Artikel "Gzip -Komprimierungsalgorithmus" auf CSDN verweisen. Yahoo betont besonders, dass alle Textinhalte von GZIP: HTML (PHP), JS, CSS, XML, TXT ... unsere Website in dieser Hinsicht gute Arbeit leisten. Die JS der Websites dieser Werbecode -Eigentümer wurden von GZIP nicht komprimiert, was auch unsere Website herunterziehen würde.
Die meisten der oben genannten drei Punkte sind serverseitige Inhalte, und ich habe nur ein kurzes Verständnis für sie. Was falsch ist, ist korrigiert zu werden.
Artikel 5: Stylesheets an die Spitze setzen
Stellen Sie CSS auf die Seite. Warum ist das so? Weil Browser wie IE, Firefox, nichts rendern, bis alle CSS vollständig übertragen werden. Der Grund ist so einfach, wie Bruder Ma sagte. CSS, Vollständiger Name: Cascading -Stilblätter. Durch Kaskaden können die CSS hinter dem vorherigen CSS abdecken, und das CSS mit hohen Werten kann das CSS mit niedrigen Werten abdecken. In [CSS! Wichtig] Diese Hierarchie -Beziehung wurde am Ende dieses Artikels erwähnt, und hier müssen wir nur wissen, dass CSS überschrieben werden kann. Da der vorherige überschrieben werden kann, ist es für den Browser zweifellos vernünftig, nach voll geladenem Rendern zu rendern. In vielen Browsern, wie dem IE, besteht das Problem, das Stylesheet am Ende der Seite zu setzen, dass es die Reihenfolge der Anzeige des Webseiteninhalts verbietet. Wenn der Browser das Display blockiert, um das Neulackieren der Seitenelemente zu vermeiden, kann der Benutzer nur leere Seiten sehen. Firefox blockiert keine Anzeige, aber dies bedeutet, dass beim Herunterladen des Stylesheet möglicherweise einige Seitenelemente neu gestrichen werden müssen, was zu flackernden Problemen führt. Also sollten wir das CSS so schnell wie möglich geladen lassen
Wenn wir diese Bedeutung sorgfältig betrachten, gibt es tatsächlich einige Bereiche, die optimiert werden können. Beispielsweise sind die beiden auf dieser Website enthaltenen CSS -Dateien <link rel = styleSheet rev = styleSheet href = http: //www.space007.com/themes/google/style/google.css type = text/css Media = screen/> und <link rel href = http: //www.space007.com/css/print.css type = text/css media = print/>. Aus den Medien können wir sehen, dass das erste CSS für den Browser und die zweite CSS -Datei für den Druckstil ist. Aus den Verhaltensgewohnheiten des Benutzers muss die Aktion zum Drucken der Seite auftreten, nachdem die Seite angezeigt wurde. Daher sollte eine bessere Methode darin bestehen, CSS der Seite nach dem Laden der Seite dynamisch hinzuzufügen, damit sie die Geschwindigkeit verbessern kann. (Ha ha)
Artikel 6: Drehbücher unten setzen
Am Ende der Seite gibt es zwei Zwecke, um Skripte zu platzieren: 1. Da die Ausführung von Skriptskripten verhindert, den Download der Seite zu blockieren. Während des Ladevorgangs der Seite wird der Browser, wenn der Browser die JS -Ausführungsanweisung liest, auf jeden Fall alles erklären und als nächstes den folgenden Inhalt liest. Wenn Sie es nicht glauben, können Sie eine JS -Schleife schreiben, um zu sehen, ob die Dinge unter der Seite noch herauskommen. (Die Ausführung von SetTimeOut und SetInterval ist ein bisschen ähnlich wie Multithreading, und der folgende Inhaltswechsel wird vor der entsprechenden Antwortzeit fortgesetzt.) Die Logik hinter dem Browser ist, dass JS den Ort ausführen kann. HREF oder andere Funktionen, die diese Seite jederzeit vollständig unterbrechen können, muss natürlich geladen werden, wenn es abgeschlossen ist. Wenn Sie es am Ende der Seite setzen, können Sie die Ladezeit der visuellen Elemente der Seite effektiv verkürzen. 2. Das zweite Problem, das durch das Skript verursacht wird, ist, dass es die Anzahl der parallelen Downloads blockiert. Die HTTP/1.1 -Spezifikation empfiehlt, dass die Anzahl der parallelen Downloads für jeden Host des Browsers 2 nicht überschreiten sollte (dh nur 2, und andere Browser wie FF werden standardmäßig auf 2 eingestellt, aber der neue IE8 kann 6 erreichen). Wenn Sie Bilddateien auf mehrere Maschinen verteilen, können Sie mehr als 2 parallele Downloads erzielen. Wenn die Skriptdatei jedoch heruntergeladen wird, startet der Browser andere parallele Downloads nicht.
Für jede Website ist natürlich die Machbarkeit, alle Skripte am Ende der Seite zu platzieren, noch fraglich. Zum Beispiel die Seite der chinesischen Website von Alibaba. Es gibt an vielen Stellen Inline -JS, und die Anzeige von Seiten hängt stark davon ab. Ich gebe zu, dass dies weit vom Konzept nicht-invasiver Skripte entfernt ist, aber viele historische Probleme sind nicht so einfach zu lösen.
Artikel 7: Vermeiden Sie die Verwendung von Ausdrücken in CSS (vermeiden Sie CSS -Ausdrücke)
Es wird jedoch zwei bedeutungslose Nistschichten geben, was definitiv nicht gut ist. Eine bessere Lösung ist erforderlich.
Artikel 8: Fügen Sie sowohl JavaScript als auch CSS in externe Dateien ein (machen Sie JavaScript und CSS extern)
Ich denke, das ist immer noch leicht zu verstehen. Dies erfolgt nicht nur aus Sicht der Leistungsoptimierung, sondern auch aus der Sicht der einfachen Code -Wartung. Das Schreiben von CSS und JS auf dem Seiteninhalt kann 2 Anfragen reduzieren, aber auch die Seitengröße erhöhen. Wenn Sie CSS und JS zwischengespeichert haben, gibt es zweimal keine zusätzlichen HTTP -Anfragen. Natürlich sagte ich auch zuvor, dass einige spezielle Seitenentwickler immer noch Inline -CSS- und JS -Dateien auswählen.
Artikel 9: DNS -Lookups reduzieren
Es gibt eine Eins-zu-Eins-Korrespondenz zwischen dem Domänennamen und der IP-Adresse im Internet. Der Domain -Name (kuqin.com) ist leicht zu erinnern, aber der Computer erkennt ihn nicht. Die Erkennung zwischen den Computern muss in eine IP -Adresse konvertiert werden. Jeder Computer im Netzwerk verfügt über eine unabhängige IP -Adresse. Die Konvertierungsarbeiten zwischen einem Domänennamen und einer IP -Adresse werden als Domain -Namensauflösung bezeichnet, auch als DNS -Abfrage bezeichnet. Ein DNS-Auflösungsprozess dauert 20-120 Millisekunden, und der Browser lädt nichts unter dem Domain-Namen herunter, bis die DNS-Abfrage vorbei ist. Durch die Reduzierung der Zeit der DNS -Abfrage kann die Ladegeschwindigkeit der Seite beschleunigt werden. Yahoo empfiehlt, dass die Anzahl der in einer Seite enthaltenen Domain-Namen so weit wie möglich bei 2-4 gesteuert werden sollte. Dies erfordert einen guten Plan für die Gesamtseite. Im Moment geht es uns nicht gut, und viele Werbesysteme, die Punkte verwalten, haben uns nach unten gezogen.
Artikel 10: Kompress JavaScript und CSS (Minify JavaScript)
Es ist offensichtlich, die linke und rechts von JS und CSS zu komprimieren und die Anzahl der Seitenbytes zu verringern. Die Ladegeschwindigkeit der Seite ist natürlich schneller, wenn sie eine kleine Kapazität hat. Zusätzlich zur Reduzierung des Volumens kann die Komprimierung auch einen gewissen Schutz bieten. Wir haben dabei gute Arbeit geleistet. Zu den üblichen Komprimierungswerkzeugen gehören JSMin, Yui -Kompressor usw. Darüber hinaus bieten wir uns auch ein sehr praktisches Online -Komprimierungswerkzeug zur Verfügung. Sie können den Kapazitätsunterschied zwischen komprimierten JS -Dateien und unkomprimierten JS -Dateien auf der Jquery -Webseite sehen:
Natürlich ist ein Nachteil der Komprimierung, dass die Lesbarkeit des Codes verschwunden ist. Ich glaube, viele Front-End-Freunde haben dieses Problem gestoßen: Der Effekt des Betrachtens von Google ist sehr cool, aber wenn man sich seinen Quellcode ansieht, sind viele Charaktere zusammengedrängt, und selbst die Funktionsnamen wurden ersetzt. Ich bin so verschwitzt! Ist es nicht sehr unpraktisch für die Wartung, wenn Ihr eigener Code gleich ist? Die aktuelle Praxis aller chinesischen Websites von Alibaba besteht darin, sie auf der Serverseite zu komprimieren, wenn JS und CSS veröffentlicht werden. Auf diese Weise können wir unseren eigenen Code leicht verwalten.
Artikel 11: Umleitungen vermeiden
Vor nicht allzu langer Zeit habe ich den Artikel "Internet Explorer und Verbindungslimits" auf Ieblog gesehen. Wenn Sie beispielsweise http://www.kuqin.com/ eingeben, generiert der Server automatisch einen 301 -Server und wendet sich an http://www.kuqin.com/. Sie können es sehen, indem Sie sich die Adressleiste des Browsers ansehen. Diese Art der Umleitung nimmt natürlich auch Zeit. Natürlich ist dies nur ein Beispiel. Es gibt viele Gründe für die Umleitung, aber das Unveränderliche ist, dass jedes Mal, wenn die Umleitung hinzugefügt wird, eine Webanforderung hinzugefügt wird, sodass sie minimiert werden sollte.
Artikel 12: Doppelte Skripte entfernen
Ich möchte das nicht sagen, aber es gilt auch aus der Perspektive der Leistung, sondern auch aus der Perspektive der Codespezifikationen. Aber ich muss zugeben, dass wir oft einen vielleicht doppelten Code hinzufügen, da der Diagramm schnell ist. Vielleicht kann ein einheitliches CSS -Framework und ein JS -Framework unsere Probleme besser lösen. Der Standpunkt von Xiaozhu ist richtig, nicht nur nicht wiederholbar, sondern auch wiederverwendbar zu sein.
Artikel 13: Konfigurieren von Entity -Tags (ETAGs) (Konfigurieren von ETAGs)
Ich verstehe das auch nicht, haha. Ich fand eine detaillierte Erklärung zu Inforq "unter Verwendung von ETAGs, um die Bandbreite und das Ladung von Webanwendungen zu verringern". Interessierte Schüler können einen Blick darauf werfen.
Artikel 14: Machen Sie Ajax zwischengespeichert
Ajax muss noch zwischengespeichert werden? Bei AJAX -Anfragen müssen Sie häufig einen Zeitstempel hinzufügen, um Cache zu vermeiden. Es ist wichtig, sich daran zu erinnern, dass Asynchron nicht sofort impliziert. Denken Sie daran, selbst wenn Ajax dynamisch generiert wird und nur für einen Benutzer funktioniert, können sie dennoch zwischengespeichert werden.