Eine detaillierte Einführung in die militärischen Vorschriften von Yahoo

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.

2.

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.

9.

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a und c9ccee2e6ea535a969eb3f532ad9fe89 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:

21363db31a13cbf9f6dcdf53a4fd77c72cacc6d41bbb37262a98f745aa00fbf0

Eine Alternative in PHP

besteht darin, eine Datei namens insertScript Funktion:

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

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 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-ETagsApache 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 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 XMLDie 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 AjaxBitte 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 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 -->

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 dc6dce4a544fdca2df29d5ac0ea9906b 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 dc6dce4a544fdca2df29d5ac0ea9906b 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 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.

d5ba1642137c3f32f4f4493ae923989c Vorteile von

:

Führt langsame Inhalte von Drittanbietern wie Logos und Werbung ein

Sichere Sandbox

Paralleles Download-Skript

d5ba1642137c3f32f4f4493ae923989c Nachteile von

:

Kostspielig, selbst ein leerer Iframe

Blockiert das Laden der Seite

Nicht semantisch

22. Beseitigen Sie 404

Kategorie: Inhalt

HTTP

Anfragen teuer sind, besteht keine Notwendigkeit, eine HTTP-Anfrage zu verwenden, um eine nutzlose Antwort zu erhalten (z. B. 404 Not Found). wird die Benutzererfahrung nur verlangsamen, ohne dass es einen Nutzen bringt.

Einige Websites verwenden hilfreiches 404 - „Sie meinen xxx Das ist ist gut für die Benutzererfahrung, verschwendet aber auch Serverressourcen (z. B. Datenbanken usw.). Das Schlimmste ist, dass das externe JavaScript, mit dem verlinkt wird, einen Fehler aufweist und das Ergebnis 404 ist. Erstens blockieren solche Downloads parallele Downloads. Zweitens versucht der Browser, den 404-Antworttext zu analysieren, da es sich um JavaScript-Code handelt, und muss herausfinden, welche Teile davon sind sind verfügbar.

23.Geben Sie KeksGewicht abnehmen

Kategorie: Cookie

Es gibt viele Gründe, Cookies zu verwenden, wie zum Beispiel Autorisierung und Personalisierung . HTTPCookieInformationen werden zwischen Web Server und Browser ausgetauscht. Es ist wichtig, das Cookie so klein wie möglich zu halten, um die Auswirkungen auf die Reaktionszeit des Benutzers zu minimieren.

Weitere Informationen finden Sie in den Artikeln von Tenni Theurer und Patty Chi: When the Cookie Crumbles . Die relevanten empirischen Grundlagen lassen sich wie folgt zusammenfassen:

Unnötige Cookies löschen

GarantiertCookies So klein wie möglich, um die Auswirkungen auf die Antwortzeit des Benutzers zu minimieren

Achten Sie darauf, die entsprechende Domänenebene für das Cookie festzulegen, um eine Auswirkung auf andere Subdomänen zu vermeiden

Legen Sie eine entsprechende Gültigkeitsdauer fest oder keinekann schneller gelöscht werdenCookieund die Reaktionszeit des Benutzers verbessern

24.Platzieren Sie die Komponente unter einer Domain, die kein Cookie

Kategorie: Cookie

Wenn der Browser eine Anfrage für ein statisches Bild sendet, wird das Cookie wird auch zusammen gesendet und der Server benötigt diese Cookies überhaupt nicht. Sie verursachen also nur bedeutungslosen Netzwerkverkehr und Sie sollten sicherstellen, dass Anfragen für statische Komponenten keine Cookies enthalten. Sie können eine Subdomain erstellen und dort alle statischen Komponenten bereitstellen.

Wenn der Domänenname www.example.org ist, können Sie die statische Komponente für statisch bereitstellen. example.org . Wenn jedoch ein Cookieexample.org oder www.example.org 🎜>, dann enthalten alle Anfragen an static.example.org diese Cookies. Zu diesem Zeitpunkt können Sie einen neuen Domänennamen kaufen, alle statischen Komponenten bereitstellen und den neuen Domänennamen ohne Cookies behalten. Yahoo! verwendet yimg.com , YouTube ist ytimg.com , Amazon ist images-amazon.com und so weiter.

Ein weiterer Vorteil der Bereitstellung statischer Komponenten unter einer Domäne, die keine

Cookies

enthält, besteht darin, dass einige Proxys möglicherweise das Caching verweigern. Komponente von Keks. Eines sollten Sie beachten: Wenn Sie nicht wissen, ob Sie example.org oder www.example.org als Startseite verwenden sollen , können Sie Cookies berücksichtigen. Wenn Sie www weglassen, können Sie cookie nur an *.example.org , daher ist es aus Leistungsgründen am besten, die Subdomain www zu verwenden und Cookie in diese Subdomain zu schreiben. 25.

DOM

Zugriff minimieren

Kategorie: Javascript

Verwenden Sie JavaScript, um auf das DOM Element ist sehr langsam. Damit die Seite schneller reagiert, sollten Sie:

den Index des besuchten Elements zwischenspeichern

ZuerstKnoten „offline“ aktualisieren und zum DOMBaum hinzufügen

Vermeiden Sie die Verwendung von JavaScriptzur Korrektur des Layouts Probleme

Weitere Informationen finden Sie im Artikel von YUIIn CinemaJulien Lecomte: Hochleistungsfähige Ajax-Anwendungen

26.Verwenden Sie intelligente Event-Handler

Kategorie: Javascript

Manchmal hat man das Gefühl, dass die Seite nicht reaktionsschnell genug ist, weil zu viele häufig ausgeführte Event-Handler zum DOM Für verschiedene Elemente des Baums wird daher empfohlen, die Ereignisdelegation zu verwenden. Wenn es 10 Schaltflächen in einem div gibt, sollte es nur dem div gegeben werden Container Fügen Sie für jede Schaltfläche einen Ereignishandler anstelle eines hinzu. Es können Ereignisse auftreten, sodass Sie das Ereignis erfassen und wissen können, welche Schaltfläche die Ursache des Ereignisses ist.

muss nicht auf das Ereignis

onload warten, um den DOM-Baum zu verarbeiten Normalerweise kann nur auf die Zielelemente im DOM-Baum zugegriffen werden, ohne dass darauf gewartet werden muss, dass alle Bilder heruntergeladen wurden. Erwägen Sie die Verwendung von DOMContentLoaded anstelle des Ereignisses onload. Um es jedoch in allen Browsern verfügbar zu machen, verwenden Sie YUI Ereignis--Tool, das über eine onAvailable -Methode verfügt.

Weitere Informationen finden Sie unter

YUIIn CinemaJulien Lecomte's Artikel: Hochleistungs-Ajax-Anwendungen

27.

Auswählen2cdf5bf648cf2f33323966d7f58a7f3fVerwerfen @import

Kategorie

: css

Eine Best Practice wurde bereits erwähnt: Um ein progressives Rendering zu erreichen, sollte

CSS oben platziert werden.

Verwenden Sie

@import in IE und verwenden Sie unten 2cdf5bf648cf2f33323966d7f58a7f3f Der Effekt ist derselbe, daher ist es am besten, ihn nicht zu verwenden.

28.

Verwendung von Filtern vermeiden

Kategorie

: css

IE

Proprietärer

AlphaImageLoader -Filter kann zur Behebung von IE7Es gibt ein Problem mit durchscheinenden PNG-Bildern in früheren Versionen. Während des Bildladevorgangs blockiert dieser Filter das Rendern, friert den Browser ein, erhöht den Speicherverbrauch und wird auf jedes Element und nicht auf jedes Bild angewendet, sodass viele Probleme auftreten.

Der beste Weg ist, AlphaImageLoader einfach nicht zu verwenden und problemlos auf die Verwendung von IE herunterzustufen, der in >PNG8 gut unterstützt wird Bild stattdessen. Wenn Sie AlphaImageLoader verwenden müssen, sollten Sie den Unterstrich Hack verwenden: _filter Zu vermeiden. Betrifft Benutzer von IE7 und höher.

29.Bilder optimieren

Kategorie : Bilder

Nachdem der Designer die Bilder erstellt hat, lädt er sie über FTP auf hoch. Es gibt ein paar Dinge, die wir vor dem WebServer tun können.

Überprüfen Sie das GIF-Bild, um zu sehen, ob die Anzahl der Farben, die der Palettengröße entspricht, im Bild verwendet wird, verwenden Sie imagemagick kann einfach prüfen:

identify -verbose image.gif

ob 4 Farbbilder verwendet werden 256 Farb-„Slots“ in der Palette, dann gibt es Raum für Verbesserungen

Versuchen Sie, GIFKonvertieren zu verwenden Ändern Sie das Bild in PNG und prüfen Sie, ob Sie die Größe reduzieren können, was normalerweise möglich ist. Aufgrund der eingeschränkten Browserunterstützung zögerten Entwickler oft, PNG-Bilder zu verwenden, aber das gehört der Vergangenheit an. Das eigentliche Problem besteht darin, dass PNG-Bilder die Alpha-Transparenz vollständig unterstützen, während GIF Bilder Es unterstützt keine Transparenzverläufe, also alles, was GIF kann, kann PNG (außer Animation). Mit dem folgenden einfachen Befehl können Sie das PNG-Bild sicher verwenden:

convert image.gif image.png

"We The Die Betonung liegt auf „Gib

PNG eine Chance“

mit pngcrush (oder einem anderen PNG. Optimierungstool) verarbeitet alle PNGBilder, zum Beispiel:

pngcrush image.png -rem alla -reduce -brute result .png

Verwenden Sie jpegtran, um alle JPEG-Bilder zu verarbeiten. Dieses Tool unterstützt JPEG Zerstörungsfreie Operationen an Bildern, wie z. B. Drehung, können auch verwendet werden, um Kommentare und andere nutzlose Informationen (wie z. B. EXIFInformationenP.S. ) zu entfernen Digitalfoto-Informationen, Brennweite, Blende usw.):

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30. OptimierungCSS Sprite

Kategorie: Bild

In Sprite sind horizontal angeordnete Bilder im Allgemeinen kleiner als die endgültigen Dateien, die vertikal angeordnet sind

Durch die Kombination von Spriteähnlichen Farben im Bild kann die Farbanzahl niedrig gehalten werden, idealerweise 256Farben untenPNG8Format

ist „mobilfreundlich“, lassen Sie keine zu große Lücke im Sprite-Bild. Obwohl dies keinen großen Einfluss auf die Größe der Bilddatei hat, kann dadurch der vom Benutzeragenten beim Dekomprimieren des Bilds in eine Pixelkarte verbrauchte Speicher eingespart werden. 100 >1000×1000 Bild ist 100 zehntausend Pixel. 31.Verwenden Sie kein HTMLZoombilder

Kategorie: Bild

Verwenden Sie es nicht, nur weil Sie die Breite und Höhe in HTML Unnötig großes Bild. Bei Bedarf

1acf00d8da3c1b4d1e485bf03581baac

Dann sollte das Bild selbst (mycat.jpg)

100x100px

sein, anstatt es auf

500x500px

zu verkleinern Bilder von . 32.Verwenden Sie ein kleines zwischenspeicherbares favicon.ico(

P.S.

Lieblingssymbol) Kategorie: Bilder

favicon.ico

ist ein Bild, das im Stammverzeichnis des Servers abgelegt wird. Es wird eine Menge Ärger verursachen, denn selbst wenn Sie es ignorieren, fordert der Browser es automatisch an, also ist es am besten, dies nicht zu tun Geben Sie eine

404 Not Found -Antwort ein. Und solange es sich auf demselben Server befindet, wird bei jeder Anforderung ein

Cookie

gesendet. Darüber hinaus beeinträchtigt dieses Bild die Download-Reihenfolge, z. B. in

IE , wenn Sie zusätzliche Komponenten in onload anfordern, wird das Favicon zuerst heruntergeladen . Um die Mängel von favicon.ico abzumildern, sollten Sie Folgendes sicherstellen:

Klein genug, vorzugsweise unter

1K

Stellen Sie den entsprechenden Gültigkeitszeitraum ein

HTTP

-Header (Sie können nicht Wenn Sie es später ändern möchten, ist es im Allgemeinen sicherer, den Gültigkeitszeitraum auf einige Monate später festzulegen. Sie können sicherstellen, dass die Änderung dem Browser bekannt ist, indem Sie das letzte Änderungsdatum des aktuellen

favicon.ico.

Imagemagick

kann verwendet werden, um kleine Lieblingssymbole zu verarbeiten 33 Stellen Sie sicher, dass alle Komponenten kleiner sind als

25K

Kategorie: Mobil

这个限制是因为iPhone不能缓存大于25K的组件，注意这里指的是 未压缩的 大小。这就是为什么缩减内容本身也很重要，因为单纯的gzip可能不够。

 

更多信息请查看Wayne Shea和Tenni Theurer的文章： Performance Research, Part 5: iPhone Cacheability – Making it Stick

 

34.把组件打包到一个复合文档里

 

分类: 移动

 

把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（iPhone就不支持）。

 

35.避免图片src属性为空

 

分类: 服务器

 

Image with empty string src 属性是空字符串的图片很常见，主要以两种形式出现：

 

straight HTML

<img src=””>

JavaScript

var img = new Image();img.src = 
“”
;

 

这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

 

IE 向页面所在目录发起一个请求

Safari和Chrome 想当前页面本身发送一个请求

Firefox 3及更早版本与Safari和Chrome处理方式一样，但3.5解决了这个问题 [bug 444931] ，不会再发送请求了

Opera 遇到有空src属性的图片不做任何处理

为什么图片src属性为空不好？

 

意外发送大量的通信量对服务器来说是很伤的，尤其是在每天有几百万访问量页面的时候。

浪费服务器资源去生成一个根本不可能被看到的页面

可能会污染用户数据，如果追踪请求状态，要么通过cookie要么是其它方式，可能会破坏用户数据。即使图片请求并没有返回图片，整个HTTP头部也会被浏览器接受并读取，包括所有的cookie。虽然其余部分会被丢弃，但这可能已经造成破坏了。

Die Hauptursache des Problems sind die Unterschiede in der Art und Weise, wie verschiedene Browser mit URI umgehen, der in RFC 3986 – spezifiziert ist Uniform Resource Identifierssind in der Dokumentation klar definiert. Wenn URI eine leere Zeichenfolge ist, wird sie als relativer URI behandelt und 5.2Algorithmische Verarbeitung definiert im Abschnitt . Die tatsächliche Situation ist, dass Firefox, Safari und Chrome alle darauf basieren Die in Abschnitt 5.4 aufgeführte Spezifikation behandelt leere Zeichenfolgen, IE jedoch nicht korrekt. Es heißt, dass in der alten Version des Spezifikationsdokuments RFC 2396 – Uniform Resource Identifiers (wurde ersetzt durch RFC 3986Verlassen), sodass der Browser streng genommen den relativen URI korrekt verarbeitet. Das Problem besteht in diesem Fall darin, dass die leere Zeichenfolge eindeutig unbeabsichtigt ist (P.S. und nicht irgendein relativer URI). Im Abschnitt

HTML5

geht es um a1f02c36ba31691bcfe87b2722de723b tagsrc Beschreibung des Attributs, legt fest, dass der Browser keine zusätzlichen Anfragen mehr sendet: Das src-Attribut muss vorhanden sein und eine gültige URL enthalten, die auf eine nicht interaktive, optional animierte Bildressource verweist, die weder ausgelagert noch skriptgesteuert ist. Wenn der Basis-URI des Elements mit dem des Dokuments übereinstimmt'

s Adresse, dann darf der Wert des src-Attributs

nicht die leere Zeichenfolge sein.（P.S " Das Attribut src muss vorhanden sein, und es muss eine zulässige URL vorhanden sein, die auf nicht interaktive Animations- oder Bildressourcen verweist. das nicht ausgelagert werden kann oder Skript enthält. Wenn der Basis-URI mit der Dokumentadresse übereinstimmt, dann ist der Wert von src Attribut darf keine leere Zeichenfolge sein. ")

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die militärischen Vorschriften von Yahoo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!