Eine detaillierte Einführung in die militärischen Vorschriften von Yahoo-HTML-Tutorial-php.cn

YahooMilitärische Vorschriften sind in 7 Kategorien insgesamt 35 Artikel:

1.Minimieren Sie die Anzahl der HTTPAnfragen

Kategorie: Inhalt

80 %

der Reaktionszeit des Endbenutzers wird für die Frontend, darunter Die meiste Zeit wird damit verbracht, verschiedene Komponenten auf der Seite herunterzuladen: Bilder, Stylesheets, Skripte, Flash usw. Durch die Reduzierung der Anzahl der Komponenten verringert sich zwangsläufig die Anzahl der von der Seite übermittelten HTTP-Anfragen. Dies ist der Schlüssel zur Beschleunigung Ihrer Seite.

Eine Möglichkeit, die Anzahl der Seitenkomponenten zu reduzieren, besteht darin, das Seitendesign zu vereinfachen. Aber gibt es eine Möglichkeit, komplexe Seiten zu erstellen und gleichzeitig die Reaktionszeiten zu verkürzen? Nun, es gibt tatsächlich eine Möglichkeit, Ihren Kuchen zu haben und ihn auch zu essen.

Dateien zusammenführen, um die Anzahl der Anfragen zu reduzieren, indem Sie alle Skripte in einer Datei zusammenfassen. Natürlich können Sie auch alle CSS zusammenführen. Das Zusammenführen von Dateien kann eine umständliche Aufgabe sein, wenn die Skripte und Stile der einzelnen Seiten unterschiedlich sind. Wenn Sie dies jedoch als Teil des Website-Veröffentlichungsprozesses durchführen, können sich die Reaktionszeiten tatsächlich verbessern.

CSS-Sprites

sind die bevorzugte Methode, um die Anzahl der Bildanfragen zu reduzieren. Integrieren Sie alle Hintergrundbilder in ein Bild und verwenden Sie dann CSSs background-image und background - position Attribut, um den anzuzeigenden Teil zu positionieren.

Bildzuordnung Kann mehrere Bilder zu einem einzigen Bild zusammenführen, die Gesamtgröße ist gleich, aber die Anzahl der Anfragen wird reduziert und beschleunigt. Die Seite wird geladen. Imagemaps sind nur dann sinnvoll, wenn das Bild fortlaufend auf der Seite angezeigt wird, beispielsweise in einer Navigationsleiste. Das Festlegen von Koordinaten für Image Map ist langweilig und fehleranfällig. Es ist auch nicht einfach, Image Map für die Navigation zu verwenden, daher ist es diese Methode nicht empfohlen.

Inline-Bilder (Base64kodiert) verwenden den Modus Daten: URL zum Konvertieren von Bildern Seite einbetten. Dadurch wird die Größe der HTML-Datei erhöht. Das Einfügen von Inline-Bildern in das (zwischengespeicherte) Stylesheet ist eine gute Idee und verhindert erfolgreich, dass die Seite „schwer“ wird. Allerdings unterstützen aktuelle Mainstream-Browser Inline-Bilder nicht gut.

Die Reduzierung der Anzahl von HTTP-Anfragen für eine Seite ist ein wichtiger Ausgangspunkt, um die Geschwindigkeit des ersten Besuchs zu verbessern der Website. Genau wie Tenni Theurer in ihrem Blog geschrieben hat Browser-Cache-Nutzung – Enthüllt! Von haben 40 % bis 60 % einen leeren Cache, wenn sie Ihre Website besuchen. Daher ist die Beschleunigung des ersten Besuchs der Seite äußerst wichtig, um das Benutzererlebnis zu verbessern.

Verwenden Sie

CDN(Content Delivery Network )

Kategorie

Server

Benutzer Auch die räumliche Distanz zum Server wirkt sich auf die Antwortzeiten aus. Durch die Bereitstellung von Inhalten auf mehreren geografisch verteilten Servern können Benutzer Seiten schneller laden. Aber wie geht das?

Der erste Schritt zur Erzielung geografisch verteilter Inhalte ist: Versuchen Sie nicht, Ihre Web-Anwendung neu zu gestalten, um sie an eine verteilte Struktur anzupassen. Abhängig von der Anwendung kann das Ändern der Struktur entmutigende Aufgaben wie das Synchronisieren des Sitzungsstatus und das Replizieren von Datenbanktransaktionen zwischen Servern umfassen (Übersetzungen sind möglicherweise nicht korrekt). Vorschläge zur Verkürzung der Entfernung zwischen Benutzern und Inhalten können aufgrund dieser Schwierigkeit verzögert oder einfach nicht umgesetzt werden.

Denken Sie daran, dass der Endbenutzer 80 % bis 90 % Reaktionszeit aufwendet Komponenten der Download-Seite: Bilder, Stile, Skripte, Flash usw. Dies ist die goldene Regel der Leistung. Es ist besser, zunächst statische Inhalte zu verteilen, als die Anwendungsstruktur von Anfang an neu zu gestalten. Dies verkürzt nicht nur die Reaktionszeit erheblich, sondern erleichtert auch die Anzeige der Kreditwürdigkeit von CDN.

Content Delivery Network (CDN) ist eine Gruppe von WebServer wird verwendet, um Inhalte effizienter an Benutzer zu senden. Typischerweise basiert die Auswahl des Servers für die Bereitstellung von Inhalten auf einem Maß für die Netzwerkentfernung. Beispiel: Wählen Sie den Server mit der kleinsten Anzahl an Hops (Hop) oder der schnellsten Antwortzeit.

Einige Internetriesen haben ihr eigenes CDN, nutzen aber einen CDN-Dienst Anbieter sind kostengünstiger, wie zum Beispiel Akamai Technologies , EdgeCast oder level3 . Für Unternehmen und private Websites, die gerade erst gestartet sind, sind die Kosten für den CDN-Dienst sehr hoch, aber wenn Ihre Benutzerbasis immer größer und immer globaler wird, dann ist das der Fall Es ist notwendig, CDN zu verwenden, um eine schnellere Reaktionszeit zu erhalten. Verschieben Sie in Yahoo! statische Inhalte vom Web-Server der Anwendung nach CDN( Einschließlich der oben genannten Drittanbieter und Yahooeigenem CDN)Kann verbessert werden die Reaktionszeit der Endbenutzer um 20 % oder sogar mehr. Der Wechsel zu CDN ist eine relativ einfache Codeänderung, wird aber die Reaktionsfähigkeit Ihrer Website drastisch verbessern.

3.Fügen Sie Expires oder Cache-Control HTTPHeader

Kategorie

: Server

Diese Regel hat zwei Seiten:

Für statische Komponenten: Läuft niemals ab, indem eine Zeit in ferner Zukunft als

Läuft ab Redundante dynamische Komponenten: Verwenden Sie den entsprechenden

Cache-Control HTTP

-Header, damit der Browser bedingte Anfragen stellen kann

Webdesign wird immer umfangreicher, was bedeutet, dass es mehr Skripte, Bilder und Flash auf der Seite gibt. Neue Besucher der Website müssen möglicherweise noch einige HTTP-Anfragen stellen, aber durch die Verwendung des Ablaufdatums wird die Komponente zwischenspeicherbar, wodurch unnötige Anfragen bei nachfolgenden Browsersitzungen vermieden werden HTTPAnfrage. GültigkeitHTTP-Header werden normalerweise für Bilder verwendet, sie sollten jedoch für alle Komponenten verwendet werden, einschließlich Skripten, Stilen und Flash-Komponenten .

Browser (und Proxys) verwenden Caching, um die Anzahl und Größe von HTTP-Anfragen zu reduzieren, damit Seiten schneller geladen werden können. WebDer Server verwendet den Validity PeriodHTTP-Antwortheader, um dem Client mitzuteilen, wie lange jede Komponente der Seite zwischengespeichert werden soll. Verwenden Sie als Gültigkeitszeitraum einen Zeitpunkt in der fernen Zukunft und teilen Sie dem Browser mit, dass diese Antwort im 2010Jahr4Monat15 Das wird sich auch heute nicht ändern.

Läuft ab: Do, 15. April 2010 20:00:00 GMT

Wenn Sie den Apache-Server verwenden , verwenden Sie die Anweisung ExpiresDefault, um den Gültigkeitszeitraum relativ zum aktuellen Datum festzulegen. Im folgenden Beispiel wird ein Ablaufzeitraum von 10 Jahren ab dem Zeitpunkt der Anforderung festgelegt:

ExpiresDefault „access plus 10 years“

Denken Sie daran: Wenn Sie als Gültigkeitszeitraum einen Zeitpunkt in der fernen Zukunft verwenden, müssen Sie den Dateinamen der Komponente rechtzeitig nach der Änderung der Komponente ändern. Bei Yahoo! tun wir dies oft als Teil des Build-Prozesses: Betten Sie die Versionsnummer in den Dateinamen der Komponente ein, zum Beispiel: yahoo_2.0.6.js

Die Verwendung einer Zeit in ferner Zukunft für den Validity HTTP-Header wirkt sich nur auf die Seitenaufrufe aus, nachdem der Benutzer die Website bereits besucht hat. Wenn es sich um einen neuen Besucher handelt oder der Browser-Cache geleert wird, hat dies keinen Einfluss auf die Anzahl der HTTP-Anfragen. Diese Leistungsverbesserung hängt daher davon ab, wie oft Benutzer, die einzelne Komponenten zwischengespeichert haben, die Site besuchen. Wir haben diese Daten bei Yahoo! gemessen und festgestellt, dass Seitenaufrufe für jede zwischengespeicherte Komponente (PV) 75 % bis 85 %. Durch die Verwendung einer Zeit in ferner Zukunft als Gültigkeitszeitraum HTTP -Header wird die Anzahl der vom Browser zwischengespeicherten Komponenten erhöht und es besteht keine Notwendigkeit, Internet bei nachfolgenden Seitenaufrufen Die Verbindung sendet noch ein Byte mehr.

4.Gzip

Komponente

Kategorie

Server

Front-End-Ingenieure können Möglichkeiten finden, die Zeit für die Übertragung von

HTTP

-Anfragen und -Antworten über das Netzwerk erheblich zu verkürzen . Es besteht kein Zweifel, dass die Bandbreitengeschwindigkeit des Endbenutzers, der Netzwerkdienstanbieter, die Entfernung der Peer-Austauschpunkte usw. außerhalb der Kontrolle des Entwicklungsteams liegen. Aber es gibt noch andere Faktoren, die die Antwortzeit beeinflussen können, indem sie die Größe der HTTP-Antwort reduzieren. Ab HTTP/1.1 unterstützt der

Web

-Client die Komprimierung Accept-Encoding HTTPAnforderungsheader.

Accept-Encoding: gzip, deflate

Wenn der Web-Server diesen Anforderungsheader sieht, komprimiert er die Antwort mit einer der vom Client aufgeführten Methoden. WebDer Server benachrichtigt den Client über den Content-Encoding entsprechenden Header.

Content-Encoding: gzip

Gzip ist derzeit die am weitesten verbreitete effiziente Komprimierungsmethode, entwickelt von GNU Das Projekt wurde durch RFC 1952 entwickelt und standardisiert. Das einzige andere Komprimierungsformat, das Sie möglicherweise sehen, ist deflate, aber es ist nicht sehr effizient und ungewöhnlich.

Gzipping kann die Antwort im Allgemeinen auf 70 % komprimieren, derzeit etwa 90 % s Netzwerkübertragung über den Browser unterstützt gzip. Wenn es sich um einen Apache-Server handelt, hängt das Modul zum Konfigurieren von gzip von der Version ab: Apache 1.3 Verwenden Sie mod_gzip , während Apache 2.x das mod_deflate Modul.

Bestimmte Faktoren in Browsern und Proxys können zu einer Diskrepanz zwischen den Erwartungen des Browsers und dem empfangenen komprimierten Inhalt führen. Glücklicherweise nehmen diese seltenen Begegnungen ab, da ältere Browser eingestellt werden, und das Apache-Modul kann automatisch den entsprechenden VaryResponse-Header hinzufügen, um Ihnen dabei zu helfen.

Der Server entscheidet anhand des Dateityps, ob er die gzip-Komprimierung verwendet. Dies ist jedoch sehr begrenzt. Die meisten Websites verwenden gzip, um HTML-Dateien zu komprimieren. Tatsächlich ist das Komprimieren von Skripten und Stylesheets auch eine gute Wahl, aber viele Websites Ich habe diese Gelegenheit verpasst. Tatsächlich kann jeder Textinhalt komprimiert werden, einschließlich XML und JSON, während Bilder und PDF Keine Komprimierung erforderlich, da sie bereits komprimiert wurden. Die Verwendung von gzip zum Komprimieren verschwendet nicht nur CPU kann aber auch die Komprimierung erhöhen.

Wenn Sie gzip so weit wie möglich verwenden, kann dies dazu führen, dass die Seite an Gewicht verliert, was auch der einfachste Weg ist, die Benutzererfahrung zu verbessern.

5.Legen Sie das Stylesheet oben an

Kategorie: CSS

Als wir die Leistung von Yahoo! untersuchten, stellten wir fest, dass das Einfügen des Stylesheets in das Dokument Der Abschnitt HEAD lässt die Seite scheinbar schneller laden. Dies liegt daran, dass das Platzieren des Stylesheets im head ein schrittweises Rendern der Seite ermöglicht.

Front-End-Ingenieure, die sich Gedanken über die Leistung machen, möchten, dass die Seite inkrementell gerendert wird. Mit anderen Worten: Wir möchten, dass der Browser vorhandene Inhalte so schnell wie möglich anzeigt, was besonders wichtig ist, wenn sich viele Inhalte auf der Seite befinden oder die Internetverbindung des Benutzers sehr langsam ist. Die Bedeutung der Anzeige von Feedback für Benutzer (z. B. Fortschrittsindikatoren) wurde ausführlich untersucht und dokumentiert . In unserem Fall ist die HTML-Seite der Fortschrittsindikator! Wenn der Browser nach und nach den Seitenkopf, die Navigationsleiste, das obere Logo usw. lädt, werden diese als Feedback von Benutzern behandelt, die auf das Laden der Seite warten, was die Leistung verbessern kann allgemeine Benutzererfahrung.

In vielen Browsern (einschließlich IE) platzieren Sie das Stylesheet in HTML Der untere Rand des Dokuments verhindert, dass die Seite schrittweise gerendert wird. Diese Browser blockieren den Rendering-Prozess, um zu verhindern, dass Seitenelemente aufgrund von Stiländerungen neu gezeichnet werden, sodass Benutzer auf eine leere Seite starren.

HTMLDie offizielle Dokumentation beschreibt eindeutig, dass das Stylesheet im HEAD der Seite platziert werden sollte: „Im Gegensatz zu A darf [LINK] nur im HEAD-Abschnitt eines Dokuments erscheinen, obwohl es beliebig oft vorkommen kann.“ (Im Gegensatz zu a -Tag, Link-Tag darf nur im Abschnitt HEAD erscheinen, obwohl es beliebig oft vorkommen kann) . Leere Bildschirme oder unformatierte falsche Inhalte sind nicht akzeptabel. Die ideale Lösung besteht darin, der offiziellen Dokumentation von HTML zu folgen und das Stylesheet im HEAD von HTML Dokument Abschnitt.

6.Fügen Sie das Skript unten ein

Kategorie : Javascript

Skript blockiert parallele Downloads, HTTP/1.1In der offiziellen Dokumentation wird jeweils die Anzahl der parallel herunterzuladenden Komponenten empfohlen Hostname des Browsers Nicht mehr als zwei. Wenn das Bild von mehreren Hostnamen stammt, kann die Anzahl der parallelen Downloads mehr als zwei betragen. Wenn das Skript heruntergeladen wird, startet der Browser keine weiteren Download-Aufgaben, auch nicht unter einem anderen Hostnamen.

Manchmal ist es nicht einfach, das Skript nach unten zu verschieben. Wenn das Skript beispielsweise mit document.write in den Seiteninhalt eingefügt wird, gibt es keine Möglichkeit, es nach unten zu verschieben. Es kann auch zu Scoping-Problemen kommen, die in den meisten Fällen gelöst werden können.

Ein häufiger Vorschlag ist die Verwendung eines verzögerten (deferred) Skripts mit DEFER Attributskripte dürfen document.write nicht enthalten und den Browser auffordern, ihnen mitzuteilen, dass sie mit dem Rendern fortfahren können. Leider unterstützt Firefox das Attribut DEFER nicht. Im IE verzögert sich das Skript möglicherweise, entspricht jedoch nicht den Erwartungen. Wenn das Skript verzögert werden kann, können wir es an den unteren Rand der Seite verschieben und die Seite wird schneller geladen.

7.Vermeiden Sie die Verwendung von CSSAusdruck

Kategorie: CSS

Die Verwendung von CSS-Ausdrücken zum dynamischen Festlegen von CSS-Eigenschaften ist eine wirkungsvolle und gefährliche Methode. Unterstützt ab IE5, aber veraltet ab IE8. Sie können beispielsweise den Ausdruck CSS verwenden, um die Hintergrundfarbe so festzulegen, dass sie stündlich wechselt:

Im obigen Code kann die Methode Ausdruck einen Ausdruck JavaScript akzeptieren. Die Eigenschaft CSS wird auf das Ergebnis des Ausdrucks gesetzt. Die Methode expression wird von anderen Browsern ignoriert, daher ist sie nur nützlich, um Wege zu finden, um eine browserübergreifende Benutzererfahrung zu erreichen, die mit IE konsistent ist .

Das größte Problem bei Ausdrücken ist, dass sie oft neu bewertet werden, und zwar öfter, als wir denken. Ausdrücke werden nicht nur beim Rendern und Ändern der Seite der Seite neu ausgewertet, sondern auch beim Scrollen der Seite und sogar dann, wenn der Benutzer die Maus über die Seite bewegt. Fügen Sie dem CSS-Ausdruck einen Zähler hinzu, um zu verfolgen, wann und wie oft er neu berechnet wird. Wenn Sie die Maus auf der Seite bewegen, kann dies dazu führen, dass 10000 mehrmals neu berechnet wird . berechnen.

Eine Möglichkeit, die Neubewertung von CSS-Ausdrücken zu reduzieren, besteht darin, einmalige Ausdrücke zu verwenden, d. h. nachdem der Ausdruck zum ersten Mal ausgewertet wurde Zeit Setzen Sie einfach das Stilattribut auf einen expliziten Wert und ersetzen Sie den Ausdruck. Wenn Sie Stileigenschaften während des gesamten Lebenszyklus der Seite dynamisch festlegen müssen, können Sie Ereignishandler anstelle von CSS-Ausdrücken verwenden. Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie daran, dass diese möglicherweise tausende Male neu berechnet werden, was sich auf die Leistung der gesamten Seite auswirkt.

8.Setzen Sie JavaScript und CSSStellen Sie es nach draußen

Kategorie: Javascript, CSS

Viel Bei den Prinzipien dreht sich alles um die Verwaltung externer Komponenten. Bevor diese Bedenken jedoch auftauchen, sollten Sie eine grundlegendere Frage stellen: Sollten JavaScript und CSS sein? In einer externen Datei oder direkt auf der Seite platziert?

Tatsächlich kann die Verwendung externer Dateien die Seite schneller machen, da JavaScript und CSSDie Datei wird im Browser zwischengespeichert. HTMLinline im DokumentJavaScript und CSS bei jeder Anfrage für das HTML Dokumente werden erneut heruntergeladen. Dadurch wird die Anzahl der erforderlichen HTTP-Anfragen reduziert, aber die Größe des HTML-Dokuments erhöht. Wenn sich JavaScript und CSS hingegen in externen Dateien befinden und vom Browser zwischengespeichert wurden, gelingt uns das HTML-Dokument wurde stark reduziert und die Anzahl der HTTP-Anfragen wurde nicht erhöht.

Der Schlüsselfaktor ist das Verhältnis zwischen der Häufigkeit, mit der externe Dateien zwischengespeichert werden, und der Anzahl der Seitenanfragen. Obwohl dieser Faktor schwer zu quantifizieren ist, kann er mithilfe verschiedener Metriken gemessen werden. Das Zwischenspeichern externer Dateien kann ein großer Vorteil sein, wenn der Benutzer mehrere Seiten pro Sitzung besucht, sodass dieselben Skripte und Stylesheets auf mehreren Seiten wiederverwendet werden können.

Viele Websites liegen bei den Kennzahlen im Mittelfeld, und für diese Websites ist die Kombination von JavaScript CSS im Allgemeinen die beste Lösung Als externe Datei bereitgestellt. Die einzige Ausnahme ist die Inline-Priorität auf Homepages wie der Startseite von Yahoo! und Mein Yahoo! . Homepages mit weniger Besuchen pro Sitzung werden feststellen, dass Inline-JavaScript und CSS zu schnelleren Endbenutzer-Reaktionszeiten führen.

Für eine typische Website ist die Homepage der Beginn vieler Besuche. Es gibt viele Techniken, die die Reduzierung von

HTTP-Anfragen nutzen können Der Effekt ist genau wie die Vorteile der Verwendung von externem Datei-Caching. Eine solche Technik besteht darin, Inline-JavaScript und CSS auf der Startseite zu verwenden, externe Dateien jedoch dynamisch zu laden, nachdem die Seite geladen wurde Auf diese Weise wurden die für nachfolgende Seiten benötigten externen Dateien im Cache des Browsers abgelegt.

ReduzierenDNSSuche

Kategorie

: Inhalt

Das Domain Name System legt den Hostnamen und die

IP Adresse Die Zuordnung zwischen Namen und Nummern ähnelt der Zuordnung zwischen Namen und Nummern in einem Telefonbuch. Wenn Sie www.yahoo.com im Browser eingeben, kontaktiert der Browser den DNS-Resolver, um den des Servers zurückzugeben IPAdresse. DNS hat seinen Preis, es dauert 20 bis 120 Millisekunden, um es anzuzeigen up Die IP-Adresse des angegebenen Hostnamens. Der Browser kann nichts vom Hostnamen herunterladen, bis die DNS-Suche abgeschlossen ist.

DNS

-Suchvorgänge werden effizienter zwischengespeichert, entweder vom

ISP (Internetdienstanbieter) des Benutzers oder lokal Netzwerk existiert auf einem speziellen Caching-Server, kann aber auch auf den Computern einzelner Benutzer zwischengespeichert werden. DNS Informationen werden im DNS-Cache des Betriebssystems gespeichert (Microsoft Windows " DNSKundendienst"). Die meisten Browser verfügen über einen eigenen Cache unabhängig vom Betriebssystem. Solange der Browser diesen Datensatz in seinem Cache behält, fragt er das Betriebssystem nicht nach DNS ab.

IEStandardcacheDNS-Suche30 Minuten, geschrieben in DnsCacheTimeout Registrierungseinstellungen. Firefox speichert 1 Minuten, die mit network.dnsCacheExpiration eingestellt werden können Konfigurationselement. (Fasterfox hat die Cache-Zeit auf 1Stunde geändertP.S. Fasterfox istFF)

Wenn der Kunde DNS-Cache ist leer (einschließlich Browser und Betriebssystem), DNSDie Anzahl der Suchvorgänge entspricht der Anzahl verschiedener Hostnamen auf der Seite, einschließlich der Seite URL, Bilder, Skriptdateien, Stylesheets, Flash Objekte und andere Hostnamen in Komponenten, durch die Reduzierung verschiedener Hostnamen kann reduziert werden DNS-Suche.

Durch die Reduzierung der Anzahl verschiedener Hostnamen verringert sich auch die Anzahl der Komponenten, die die Seite parallel herunterladen kann, wodurch DNS-Suchen vermieden und reduziert werden Reaktionszeit: Die Reduzierung der Anzahl paralleler Downloads erhöht die Reaktionszeit. Mein Prinzip besteht darin, die Komponenten unter 2 auf 4 Hostnamen zu verteilen, also gleichzeitig zu reduzieren Gleichzeitig ein Kompromiss zwischen DNS-Suche und dem Zulassen hoher gleichzeitiger Downloads.

10.KomprimierungJavaScript und CSS

Kategorie: Javascript, CSS

Komprimierung bedeutet insbesondere, unnötige Elemente aus den Codezeichen zu entfernen Größe reduzieren und dadurch schneller laden. Codeminimierung bedeutet, alle Kommentare und unnötigen Leerzeichen (Leerzeichen, Zeilenumbrüche und Tabulator) zu entfernen. Dies in JavaScript zu tun, verbessert die Reaktionsfähigkeit, da die herunterzuladende Datei kleiner wird. Die beiden am häufigsten verwendeten JavaScript-Codekomprimierungstools sind JSMin und YUI Compressor , YUI-Kompressor kann auch CSS komprimieren.

Verschleierung ist eine optionale Maßnahme zur Optimierung des Quellcodes, die komplizierter als die Komprimierung ist, sodass der Verschleierungsprozess auch eher zu Fehlern. In einer Umfrage unter den zehn besten Websites in den Vereinigten Staaten kann die Komprimierung um 21 % sinken, während die Verschleierung um 25 % sinken kann. Obwohl die Verschleierung ein höheres Maß an Reduzierung bietet, ist sie riskanter als die Komprimierung.

Zusätzlich zur Komprimierung externer Skripte und Stile können auch Inline-Blöcke <script> und <style> komprimiert werden. Selbst wenn das Modul gzip aktiviert ist, kann die Größe durch vorheriges Komprimieren um 5 % oder mehr reduziert werden. JavaScript und CSS werden zunehmend verwendet, daher hat die Komprimierung von Code einen guten Effekt. 11.Weiterleitungen vermeiden Kategorie : Inhalt Weiterleitung mit 301 und 302 Statuscodes, die Es folgt ein HTTP-Header mit dem 301-Statuscode: HTTP /1.1 301 Dauerhaft verschoben Ort: Inhaltstyp: text/html Der Browser springt automatisch zum Ort URL, die von der Domäne angegeben wird. Alle für die Umleitung erforderlichen Informationen befinden sich im Header HTTP und der Antworttext ist normalerweise leer. Tatsächlich gibt es zusätzliche HTTP -Header, wie z. B. Expires und Cache-Control repräsentieren auch Redirect. Darüber hinaus gibt es andere Möglichkeiten zum Springen: refresh Meta-Tag und JavaScript, aber wenn Sie eine Weiterleitung durchführen müssen, ist dies der Fall Verwenden Sie am besten den Standardstatuscode 3xxHTTP, vor allem, damit die Zurück-Taste normal funktioniert. Bedenken Sie, dass Weiterleitungen die Benutzererfahrung verlangsamen und das Einfügen von Weiterleitungen zwischen dem Benutzer und dem HTML-Dokument alles auf der Seite verzögert , kann die Seite nicht gerendert werden und die Komponente kann nicht heruntergeladen werden, bis das HTML-Dokument dem Browser bereitgestellt wird. Es gibt eine häufige Weiterleitung, die extrem Ressourcen verschwendet, und Webentwickler sind sich dessen im Allgemeinen nicht bewusst, nämlich URL fehlt am Ende ein Schrägstrich. Wenn Sie beispielsweise zu springen, wird eine 301-Antwort zurückgegeben, die zu weiterleitet ( Beachten Sie den Schrägstrich am Ende). In Apache können Sie Alias , mod_rewrite oder verwenden DirectorySlash Befehl zum Abbrechen unnötiger Weiterleitungen. Die häufigste Verwendung der Umleitung besteht darin, die alte Site mit der neuen Site zu verbinden. Sie kann auch verschiedene Teile derselben Site verbinden und je nach Situation des Benutzers (Browsertyp, Benutzer) einige Verarbeitungen durchführen Kontotyp usw.). Die Verbindung zweier Websites über Weiterleitungen ist am einfachsten und erfordert nur wenig zusätzlichen Code. Obwohl die Verwendung von Weiterleitungen zu diesen Zeiten die Entwicklungskomplexität für Entwickler verringert, verringert sie die Benutzererfahrung. Eine Alternative ist die Verwendung von Alias und mod_rewrite , sofern sich beide Codepfade auf demselben Server befinden. Wenn die Umleitung aufgrund von Domänennamenänderungen verwendet wird, können Sie einen CNAME erstellen (einen DNS-Eintrag erstellen, der auf einen anderen Domänennamen verweist). ein Alias) kombiniert mit der Alias oder der mod_rewrite -Direktive. 12.Doppelte Skripte entfernen Kategorie: javascript Seiten, die doppelte Skriptdateien enthalten, beeinträchtigen die Leistung, was möglicherweise nicht Ihren Vorstellungen entspricht. In einer Überprüfung der Top 10großenWebseiten in den Vereinigten Staaten wurde festgestellt, dass nur 2 Websites enthielten doppelte Skripte. Zwei Hauptgründe erhöhen die Wahrscheinlichkeit doppelter Skripte auf einer einzelnen Seite: Teamgröße und Anzahl der Skripte. In diesem Fall erzeugen doppelte Skripte unnötige HTTP-Anfragen, führen nutzlosen JavaScript-Code aus und beeinträchtigen die Seitenleistung. IE macht unnötige HTTP Anfragen, während Firefox NEIN. Wenn in IE ein nicht zwischenspeicherbares externes Skript zweimal von der Seite eingeführt wird, werden beim Laden der Seite zwei HTTPAnfrage. Auch wenn das Skript zwischenspeicherbar ist, generiert es zusätzliche HTTP-Anfragen, wenn der Benutzer die Seite neu lädt. Zusätzlich zur Generierung bedeutungsloser HTTP-Anfragen verschwendet die mehrmalige Auswertung des Skripts auch Zeit. Denn unabhängig davon, ob das Skript zwischenspeicherbar ist oder nicht, wird redundantes JavaScript in Firefox und IE ausgeführt >Code. Eine Möglichkeit, das versehentliche zweimalige Einführen desselben Skripts zu vermeiden, besteht darin, ein Skriptverwaltungsmodul im Vorlagensystem zu implementieren. Die typische Methode zur Einführung von Skripten ist die Verwendung des SCRIPT-Tags auf der HTML-Seite: <script type="text/javascript" src="menu_1.0.17.js?1.1.11"></script>

Eine Alternative in PHP

besteht darin, eine Datei namens insertScript Funktion:

<?php insertScript("menu.js?1.1.11") ?>

Nach dem Login kopieren

Diese Funktion verhindert nicht nur, dass dasselbe Skript mehrmals eingeführt wird, sondern kann auch andere Skripte lösen. damit verbundene Probleme, wie z. B. Abhängigkeiten. Überprüfen Sie Versionsnummern und fügen Sie sie zu Skriptdateinamen hinzu, um

„permanente“ AblauffristHTTP-Header zu unterstützen.

13.

KonfigurationETags

Kategorie

: Server

Entitäts-Tags (ETags) sind ein Mechanismus, der von Servern und Browsern verwendet wird, um zu bestimmen, ob Komponenten im Browser-Cache mit Komponenten im Ursprungsserver übereinstimmen („Entitäten“ sind Komponenten: Bilder, Skripte, Stylesheets usw.). Durch das Hinzufügen von ETags wird ein Entitätsvalidierungsmechanismus bereitgestellt, der flexibler ist als das Datum der letzten Änderung. Ein ETag ist eine Zeichenfolge, die als eindeutige Kennung für eine bestimmte Version einer Komponente dient. Die einzige Formatierungsbeschränkung besteht darin, dass die Zeichenfolge in Anführungszeichen gesetzt werden muss und der Ursprungsserver das ETag der Komponente mit dem ETag angibt der entsprechende Header. :

HTTP/1.1 200 OK

Letzte Änderung: Di, 12. Dezember 2006 03:03:59 GMT

ETag: "10c24bc-4ab-457e1c1f"

Content-Length: 12195

Wenn der Browser dann eine Komponente validieren muss, verwendet er If-None- Übereinstimmen Sie den Anforderungsheader, um ETag zurück an den Ursprungsserver zu übergeben. Wenn ETags erfolgreich übereinstimmt, wird ein Statuscode 304 zurückgegeben, wodurch die Anzahl von 12195< reduziert wird 🎜> Antworttext aus Bytes.

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Di, 12. Dez. 2006 03:03:59 GMT

If-None-Match: "10c24bc-4ab-457e1c1f"

HTTP/1.1 304 Not Modified

ETags

Das Problem besteht darin, dass sie von einem bestimmten Server erstellt werden. Wenn der Browser also die ursprüngliche Komponente von einem Server erhält und dann dieselbe Komponente auf einem anderen Server validieren möchte, ETags Es ist unmöglich, einen erfolgreichen Abgleich durchzuführen, und die Verwendung einer Gruppe von Servern zur Bearbeitung von Anfragen ist auf Webseiten sehr verbreitet. Standardmäßig betten Apache und IIS Daten in ETag ein Reduzieren Sie die Chance auf einen erfolgreichen Gültigkeitstest auf einer Website mit mehreren Servern.

Apache 1.3

und 2.xETag Die Das Format ist inode-size-timestamp . Auch wenn sich eine bestimmte Datei möglicherweise im selben Verzeichnis auf mehreren Servern befindet und die Dateigröße, Zugriffsberechtigungen, Zeitstempel usw. alle gleich sind, ist ihr Knoten i (P.S. inode, Indexdateien in UNIX) sind auch auf verschiedenen Servern unterschiedlich.

IIS5.0

und 6.0 haben ebenfalls ähnliche Probleme. Das Format von ETags in IIS ist Filetimestamp:ChangeNumber , ChangeNumber ist ein Zähler, der zum Verfolgen von IIS-Konfigurationsänderungen verwendet wird. Die ChangeNumber einer Site auf verschiedenen IIS-Servern kann nicht identisch sein.

Das Endergebnis sind Apache und IIS, die für genau dieselbe Komponente ETags generiert wurden Es gibt keine browserübergreifende Übereinstimmung. Wenn die ETags nicht übereinstimmen, erhält der Benutzer nicht die für Small konzipierte 304-Antwort und schnell ETags. Stattdessen erhalten sie eine normale Antwort 200mit allen Daten für die Komponente. Wenn die Site auf einem einzelnen Server bereitgestellt wird, besteht dieses Problem überhaupt nicht. Wenn die Site jedoch auf mehreren Servern bereitgestellt wird und Sie planen, die Standard-ETags< von Apache oder IIS zu verwenden 🎜>-Konfiguration sehen Benutzer langsame Seiten, eine höhere Serverlast, einen höheren Bandbreitenverbrauch und der Proxy kann den Seiteninhalt nicht effektiv zwischenspeichern. Selbst wenn die Komponente über einen „permanenten“ Expires HTTP -Header verfügt, wird beim Klicken des Benutzers zum Neuladen oder Aktualisieren eine bedingte GET-Anfrage angezeigt wird noch ausgegeben.

Wenn Sie das flexible Verifizierungsmodell von ETags nicht nutzen möchten, geben Sie am besten alle < ein 🎜>Etag Alle entfernen, Sie können die komponentenbasierte Zeitstempel-Last-Modified HTTP Header-Überprüfung verwenden und ETag entfernen um HTTPdie Größe der Antwortheader und nachfolgender Anfragen zu reduzieren. Der Microsoft-Supportartikel beschreibt, wie ETags entfernt werden. In Apache können Sie einfach den folgenden Code zur Apache-Konfigurationsdatei hinzufügen:

FileETag none

14.

Machen Sie Ajax zwischenspeicherbar

Kategorie

: Inhalt

Einer der Vorteile von Ajax

besteht darin, dass es Benutzern sofortiges Feedback geben kann. Weil es Informationen asynchron vom Backend-Server anfordern kann. Bei

Ajax gibt es jedoch keine Garantie dafür, dass der Benutzer auf asynchrones JavaScript und XML<🎜 wartet >Die Antwortfrist wird nicht sehr langweilig sein. In vielen Anwendungen hängt die Wartefähigkeit des Benutzers davon ab, wie Ajax verwendet wird. Beispielsweise suchen Benutzer in einem auf Web basierenden E-Mail-Client weiterhin nach Ajax<, um E-Mail-Nachrichten zu finden, die ihren Suchkriterien entsprechen 🎜 >Bitte um Aufmerksamkeit für zurückgegebene Ergebnisse. Es ist wichtig, sich daran zu erinnern, dass „asynchron“ nicht „unmittelbar“ bedeutet.

Um die Leistung zu verbessern, ist die Optimierung dieser

Ajax

-Antworten von entscheidender Bedeutung. Die wichtigste Möglichkeit, die Leistung von

Ajax zu verbessern, besteht darin, die Antwort zwischenspeicherbar zu machen, indem Sie beispielsweise Expires oder < The hinzufügen das Gleiche wie im Header 🎜>Cache-Control HTTP besprochen. Die folgenden zusätzlichen Regeln gelten für Ajax: Gzip Komponente

减少DNS查找

压缩JavaScript

避免重定向

配置ETags

我们一起看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录，以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录，而且Ajax响应是可缓存的，有尚未过期的Expires或者Cache-Control HTTP头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。可以通过给通讯录的Ajax URL里添加一个表明用户通讯录最后修改时间的时间戳来实现，例如 &t=1190241612 。如果通讯录从上一次下载之后再没有被修改过，时间戳不变，通讯录就将从浏览器缓存中直接读出，从而避免一次额外的HTTP往返消耗。如果用户已经修改了通讯录，时间戳也可以确保新的URL不会匹配缓存的响应，浏览器将请求新的通讯录条目。

即使Ajax响应是动态创建的，而且可能只适用于单用户，它们也可以被缓存，而这样会让你的Web 2.0应用更快。

15.尽早清空缓冲区

分类: 服务器

当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个 flush() 函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。

比较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。

例如：

... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

Nach dem Login kopieren

Yahoo!搜索开创了这项技术，而且真实用户测试研究也证明了使用这种技术的诸多好处。

16.对Ajax用GET请求

分类: 服务器

Das

Yahoo!Mail-Team hat festgestellt, dass bei der Verwendung von XMLHttpRequest die POST-Anfrage des Browsers zwei Schritte durchläuft: Schritt Prozess Der Prozess wird implementiert: Senden Sie zuerst den HTTP-Header und dann die Daten. Daher ist es am besten, die GET-Anfrage zu verwenden, die lediglich eine TCP-Nachricht senden muss (es sei denn ). KeksAußergewöhnlich viele). Die maximale Länge der URL von IE beträgt 2K, also wenn Sie senden möchten Wenn die Daten 2K überschreiten, kann GET nicht verwendet werden. Ein interessanter Nebeneffekt der

POST-Anfrage ist, dass keine Daten tatsächlich gesendet werden, wie bei der GET-Anfrage . Wie in der HTTP-Dokumentation beschrieben, wird die GET-Anfrage zum Abrufen von Informationen verwendet. Seine Semantik besteht also nur darin, Daten mit der GET-Anfrage anzufordern, und nicht darin, Daten zu senden, die auf dem Server gespeichert werden müssen.

17.Lazy Loading Components

Kategorie: Inhalt

Sie können sich die Seite genauer ansehen und sich fragen: Was ist überhaupt notwendig, um die Seite zu rendern? Der Rest kann warten.

JavaScript eignet sich ideal zur Trennung vor und nach dem Onload-Event. Wenn Sie beispielsweise über JavaScript-Code und eine Bibliothek verfügen, die Drag-and-Drop und Animationen unterstützt, können diese warten, da Drag-and-Drop-Elemente nach dem ersten Rendern der Seite auftreten . Andere Abschnitte, die verzögert geladen werden können, umfassen versteckte Inhalte (Inhalte, die nach einer Interaktion angezeigt werden) und minimierte Bilder.

Tools können Ihnen helfen, Ihren Arbeitsaufwand zu reduzieren: YUI Image Loader kann das Laden reduzierter Bilder verzögern, und YUI Get Das Dienstprogramm ist eine einfache Möglichkeit, JS und CSS einzubinden. Yahoo!Homepage ist ein Beispiel. Sie können das Netzwerkfenster von Firebug öffnen und einen genaueren Blick darauf werfen.

Es ist am besten, Leistungsziele mit anderen Best Practices für die Web-Entwicklung in Einklang zu bringen, z. B. „progressive Verbesserung“. Wenn der Client JavaScript unterstützt, kann die Benutzererfahrung verbessert werden, Sie müssen jedoch sicherstellen, dass die Seite ordnungsgemäß funktioniert, wenn sie JavaScript nicht unterstützt . Sobald Sie also sicher sind, dass Ihre Seite ordnungsgemäß funktioniert, können Sie sie mit einigen Lazy-Loading-Skripten erweitern, um einige ausgefallene Effekte wie Drag-and-Drop und Animationen zu unterstützen.

18.Vorinstallierte Komponenten

Kategorie : Inhalt

Das Vorladen mag wie das Gegenteil von Lazy Loading erscheinen, hat aber tatsächlich ein anderes Ziel. Durch das Vorabladen von Komponenten können Sie die Leerlaufzeit des Browsers vollständig nutzen, um Komponenten (Bilder, Stile und Skripte) anzufordern, die in Zukunft verwendet werden. Wenn der Benutzer auf die nächste Seite zugreift, befinden sich die meisten Komponenten bereits im Cache, sodass die Seite aus Benutzersicht schneller geladen wird.

In tatsächlichen Anwendungen gibt es folgende Arten der Vorspannung:

Unbedingt Vorladen – Beginnen Sie so schnell wie möglich mit dem Laden, um einige zusätzliche Komponenten zu erhalten. google.com ist ein gutes Beispiel für das Vorladen von Sprite. Dieses Sprite-Bild funktioniert nicht Nicht das, was für die google.com-Startseite benötigt wird, sondern das, was auf der Suchergebnisseite steht.

Bedingt Vorladen – Erraten Sie anhand von Benutzeraktionen, wohin der Benutzer springen wird, und laden Sie entsprechend vor. Nachdem Sie das Eingabefeld von search.yahoo.com eingegeben haben, können Sie sehen, wie diese zusätzlichen Komponenten zum Laden aufgefordert werden.

Der Zeit voraus Vorinstalliert – Laden Sie neue Designs vor, bevor sie eingeführt werden. Nach einer Neugestaltung hören wir oft: „Diese neue Website ist gut, aber langsamer als zuvor.“ Ein Grund dafür ist, dass die vorherigen Seiten, die Benutzer besucht haben, alte Caches haben, die neuen jedoch in einem leeren Cache-Zustand sind . Diese negativen Auswirkungen können abgemildert werden, indem einige Komponenten vorab geladen werden, bevor ein neues Design eingeführt wird. Die alte Site kann die Leerlaufzeit des Browsers nutzen, um die Bilder und Skripte anzufordern, die die neue Site benötigt.

19.Reduzieren Sie die Anzahl der DOM-Elemente

Kategorie: Inhalt

Eine komplexe Seite bedeutet, dass mehr Bytes heruntergeladen und JavaScriptZugriff auf verwendet werden müssen DOM wird auch langsamer sein. Wenn Sie beispielsweise einen Ereignishandler hinzufügen möchten, durchlaufen Sie die Elemente 500DOM und 5000 DOM Elemente sind unterschiedlich.

Eine große Anzahl von DOM-Elementen ist ein Zeichen dafür, dass es auf der Seite einige irrelevante Tags gibt, die bereinigt werden müssen. Verwenden Sie verschachtelte Tabellen für das Layout? Oder haben Sie eine Reihe von

s hinzugefügt, um das Layoutproblem zu beheben? Möglicherweise sollte ein besseres semantisches Markup verwendet werden.

YUI-CSS-Dienstprogramme sind sehr hilfreich für das Layout: grids.cssFür das Gesamtlayout Mit fonts.css und reset.css kann das Standardformat des Browsers entfernt werden. Dies ist eine gute Gelegenheit, mit dem Aufräumen und Nachdenken über Markup zu beginnen, z. B. die Verwendung von

nur dann, wenn es semantisch sinnvoll ist, und nicht, weil es einen Zeilenumbruch darstellt.

DOM

Die Anzahl der Elemente lässt sich leicht testen. Geben Sie einfach in die Konsole von

Firebug ein:

document.getElementsByTagName('*').length

Wie viele

DOM-Elemente sind zu viele? Sie können auf andere, ähnlich gut getaggte Seiten verweisen, wie zum Beispiel Yahoo!Die Startseite ist eine recht geschäftige Seite, aber es gibt weniger als 700 Elemente (HTML-Tags).

20.

Domänenübergreifende Trennkomponenten

Klassifizierung

: Inhalt

Trennen Sie die Komponenten, um parallele Downloads zu maximieren. Stellen Sie jedoch sicher, dass Sie aufgrund der DNS-Suchkosten nur nicht mehr als 2-4 Domains verwenden. Sie können beispielsweise HTML und dynamische Inhalte in www.example.org bereitstellen und statische Komponenten in < trennen 🎜>static1.example.org und static2.example.org .

Weitere Informationen finden Sie in den Artikeln von Tenni Theurer und Patty Chi: Maximierung paralleler Downloads in der Fahrgemeinschaftsspur

21.Verwenden Sie so wenig wie möglichiframe

Kategorie: Inhalt

Verwendung iframeSie können ein HTML-Dokument in ein übergeordnetes Dokument einfügen. Wichtig ist, zu verstehen, wie der iframe funktioniert funktioniert und nutzt es effizient.