Eine kurze Diskussion über Yahoos 35 Regeln zur Front-End-Optimierung

Zusammenfassung: Ob bei der Arbeit oder im Vorstellungsgespräch, die Optimierung der Web-Frontend-Leistung ist sehr wichtig. Wo sollten wir also mit der Optimierung beginnen? Sie können die 34 Regeln von Yahoo zur Front-End-Optimierung befolgen, mittlerweile gibt es jedoch 35. Man kann also sagen, dass dies die 35 Regeln von Yahoo zur Front-End-Optimierung sind. Es wurde klassifiziert, was gut ist. Dadurch erhalten wir eine klarere Richtung für die Optimierung.

Inhalt

1. Minimieren Sie die Anzahl der HTTP-Anfragen

80 % der Reaktionszeit des Endbenutzers entfallen auf das Front-End, wobei der Großteil davon auf das Herunterladen verschiedener Komponenten auf der Seite entfällt: Bilder, Stylesheets, Skripte, Flash usw. Durch die Reduzierung der Komponentenanzahl verringert sich zwangsläufig auch 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 verbessern? Es gibt tatsächlich eine Möglichkeit, das Beste aus beiden Welten zu haben.

Durch das Zusammenführen von Dateien wird die Anzahl der Anfragen reduziert, da alle Skripte in einer Datei zusammengefasst werden. Natürlich können Sie auch alle CSS zusammenführen. Wenn die Skripts und Stile für jede Seite unterschiedlich sind, kann das Zusammenführen der Dateien eine mühsame Aufgabe sein. Wenn Sie dies jedoch als Teil des Site-Veröffentlichungsprozesses tun, können Sie die Reaktionszeiten wirklich verbessern.

Um die Anzahl der Bildanforderungen zu reduzieren, sind CSS-Sprites die bevorzugte Methode. Kombinieren Sie alle Hintergrundbilder zu einem Bild und verwenden Sie dann die CSS-Eigenschaften „background-image“ und „background-position“, um den anzuzeigenden Teil zu positionieren.

Imagemaps kombinieren mehrere Bilder zu einem einzigen Bild, das die gleiche Gesamtgröße hat, aber die Anzahl der Anfragen reduziert und das Laden der Seite beschleunigt. Imagemaps sind nur dann sinnvoll, wenn die Bilder fortlaufend auf der Seite angeordnet sind, beispielsweise in einer Navigationsleiste. Das Festlegen der Koordinaten für eine Imagemap ist mühsam und fehleranfällig. Außerdem ist es nicht einfach, Imagemaps zur Navigation zu verwenden, daher wird diese Methode nicht empfohlen.

Inline-Bilder (Base64-codiert) verwenden das URL-Schema „data:“ um Bilder in die Seite einzubetten. Dadurch vergrößert sich die HTML-Datei. Das Einfügen von Inline-Bildern in das (zwischengespeicherte) Stylesheet ist eine gute Idee und verhindert erfolgreich, dass die Seite „schwer“ wird. Die derzeit gängigen Browser unterstützen Inline-Bilder jedoch nicht besonders gut.

Die Reduzierung der Anzahl der HTTP-Anfragen für eine Seite ist ein erster Punkt und ein wichtiger Leitsatz zur Verbesserung der Geschwindigkeit der ersten Besuche auf Ihrer Site.

2. Reduzieren Sie DNS-Lookups

Das Domain Name System stellt eine Zuordnung zwischen Hostnamen und IP-Adressen her, ähnlich der Zuordnung zwischen Namen und Nummern in einem Telefonbuch. Wenn Sie www.yahoo.com in Ihren Browser eingeben, kontaktiert der Browser den DNS-Resolver und gibt die IP-Adresse des Servers zurück. DNS ist kostenpflichtig; das Nachschlagen der IP-Adresse für einen bestimmten Hostnamen dauert 20 bis 120 Millisekunden. Bis die DNS-Suche abgeschlossen ist, kann der Browser nichts vom Hostnamen herunterladen.

DNS-Lookups werden effizienter auf einem speziellen Cache-Server zwischengespeichert, der vom ISP (Internet Service Provider) oder vom lokalen Netzwerk des Benutzers gehostet wird, können aber auch auf einzelnen Benutzercomputern zwischengespeichert werden. DNS-Informationen werden im DNS-Cache des Betriebssystems gespeichert (dem „DNS-Client-Dienst“ unter Microsoft Windows). Die meisten Browser verfügen über einen eigenen, vom Betriebssystem unabhängigen Cache. Solange der Browser diesen Eintrag im Cache hat, wird er das Betriebssystem nicht nach DNS abfragen.

Der Internet Explorer speichert DNS-Lookups standardmäßig 30 Minuten lang im Cache, wie in der Registrierungseinstellung „DnsCacheTimeout“ angegeben. Firefox speichert den Cache für 1 Minute. Dies kann mit dem Konfigurationselement network.dnsCacheExpiration festgelegt werden. (Fasterfox hat die Cache-Zeit auf 1 Stunde geändert. PS Fasterfox ist ein Beschleunigungs-Plugin für FF)

Wenn der DNS-Cache des Clients leer ist (einschließlich Browser und Betriebssystem), entspricht die Anzahl der DNS-Lookups der Anzahl der unterschiedlichen Hostnamen auf der Seite, einschließlich der Hostnamen in Komponenten wie Seiten-URLs, Bildern, Skriptdateien, Stylesheets, Flash-Objekten usw. Durch die Reduzierung der Anzahl der unterschiedlichen Hostnamen können DNS-Lookups reduziert werden.

Durch die Reduzierung der Anzahl unterschiedlicher Hostnamen wird auch die Anzahl der Komponenten der Seite reduziert, die parallel heruntergeladen werden können. Das Vermeiden von DNS-Lookups verkürzt die Antwortzeit, während die Reduzierung der Anzahl paralleler Downloads die Antwortzeit erhöht. Mein Prinzip besteht darin, Komponenten auf 2 bis 4 Hostnamen zu verteilen, was einen Kompromiss zwischen der Reduzierung von DNS-Lookups und der Ermöglichung hoher gleichzeitiger Downloads darstellt.

3. Weiterleitungen vermeiden

Weiterleitungen verwenden die Statuscodes 301 und 302. Hier ist ein HTTP-Header mit einem 301-Statuscode:

HTTP/1.1 301 dauerhaft verschoben
Standort: http://example.com/newuri
Inhaltstyp: text/html

Der Browser springt automatisch zur im Feld „Standort“ angegebenen URL. Alle für eine Weiterleitung erforderlichen Informationen befinden sich im HTTP-Header und der Antworttext ist normalerweise leer. Tatsächlich weisen auch zusätzliche HTTP-Header wie „Expires“ und „Cache-Control“ auf eine Umleitung hin. Es gibt andere Möglichkeiten zur Umleitung: Aktualisieren Sie Meta-Tags und JavaScript. Wenn Sie jedoch umleiten müssen, verwenden Sie am besten den Standardstatuscode 3xxHTTP, hauptsächlich, damit die Zurück-Schaltfläche ordnungsgemäß funktioniert.

Bedenken Sie, dass Weiterleitungen das Benutzererlebnis verlangsamen. Wenn Sie zwischen dem Benutzer und dem HTML-Dokument eine Weiterleitung einfügen, verzögert sich alles auf der Seite. Die Seite kann nicht gerendert werden und der Download von Komponenten kann erst beginnen, wenn das HTML-Dokument dem Browser bereitgestellt wurde.

Eine häufige und äußerst verschwenderische Weiterleitung, die Webentwicklern oft nicht bewusst ist, ist das Fehlen eines abschließenden Schrägstrichs in einer URL. Beispielsweise würde eine Umleitung zu http://astrology.yahoo.com/astrology eine 301-Antwort mit einer Umleitung zu http://astrology.yahoo.com/astrology/ zurückgeben (beachten Sie den hinzugefügten Schrägstrich am Ende). In Apache können Sie Alias-, mod_rewrite- oder DirectorySlash-Anweisungen verwenden, um unnötige Weiterleitungen abzubrechen.

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 Benutzersituation (Browsertyp, Benutzerkontotyp usw.) einige Verarbeitungsvorgänge durchführen. Die Verwendung einer Weiterleitung zum Verbinden zweier Websites ist am einfachsten und erfordert nur wenig zusätzlichen Code. Obwohl die Verwendung von Weiterleitungen zu diesen Zeitpunkten die Entwicklungskomplexität für Entwickler verringert, verschlechtert sie die Benutzererfahrung. Eine Alternative besteht darin, Alias ​​und mod_rewrite zu verwenden, vorausgesetzt, beide Codepfade befinden sich auf demselben Server. Wenn Sie die Umleitung aufgrund eines Domänenwechsels verwenden, können Sie in Verbindung mit der Direktive „Alias“ oder „mod_rewrite“ einen CNAME erstellen (einen DNS-Eintrag erstellen, der als Alias ​​auf eine andere Domäne verweist).

4. Machen Sie Ajax zwischenspeicherbar

Ein Vorteil von Ajax besteht darin, dass es Benutzern sofortiges Feedback geben kann, da es asynchron Informationen von einem Backend-Server anfordern kann. Bei Ajax gibt es jedoch keine Garantie dafür, dass sich der Benutzer nicht langweilt, während er auf die Rückgabe der asynchronen JavaScript- und XML-Antwort wartet. In vielen Anwendungen hängt die Möglichkeit des Benutzers zu warten davon ab, wie Ajax verwendet wird. In einem webbasierten E-Mail-Client behalten Benutzer beispielsweise die von Ajax-Anfragen zurückgegebenen Ergebnisse im Auge, um E-Mail-Nachrichten zu finden, die ihren Suchkriterien entsprechen. Es ist wichtig, sich daran zu erinnern, dass „asynchron“ nicht „sofort“ bedeutet.

Die Optimierung dieser Ajax-Antworten ist für die Leistungsverbesserung von entscheidender Bedeutung. Die wichtigste Möglichkeit, die Ajax-Leistung zu verbessern, besteht darin, die Antwort zwischenspeicherbar zu machen, wie unter „Hinzufügen von Expires- oder Cache-Control-HTTP-Headern“ beschrieben. Für Ajax gelten zusätzlich folgende Regeln:

1. Gzip-Komponente
2. Reduzieren Sie DNS-Lookups
3. Komprimieren von JavaScript
4. Weiterleitungen vermeiden
5. Konfigurieren von ETags

Sehen wir uns ein Beispiel an, bei dem ein Web 2.0-E-Mail-Client Ajax verwendet, um das Adressbuch des Benutzers herunterzuladen und so die Autovervollständigungsfunktion zu implementieren. Wenn der Benutzer sein Adressbuch seit der letzten Verwendung nicht geändert hat und die Ajax-Antwort zwischenspeicherbar ist (mit einem Expires- oder Cache-Control-HTTP-Header, der nicht abgelaufen ist), kann das vorherige Adressbuch aus dem Cache gelesen werden. Dem Browser muss mitgeteilt werden, ob er die bisher zwischengespeicherte Adressbuch-Antwort weiter verwenden oder eine neue anfordern soll. Dies kann erreicht werden, indem der Ajax-URL des Adressbuchs ein Zeitstempel hinzugefügt wird, der angibt, wann das Adressbuch des Benutzers zuletzt geändert wurde, zum Beispiel &t=1190241612. Wenn das Adressbuch seit dem letzten Download nicht geändert wurde, bleibt der Zeitstempel unverändert und das Adressbuch wird direkt aus dem Browser-Cache gelesen, wodurch ein zusätzlicher HTTP-Roundtrip vermieden wird. Wenn der Benutzer sein Adressbuch geändert hat, stellt der Zeitstempel außerdem sicher, dass die neue URL nicht mit einer zwischengespeicherten Antwort übereinstimmt und der Browser einen neuen Adressbucheintrag anfordert.

Obwohl Ajax-Antworten dynamisch erstellt werden und möglicherweise nur für einen einzelnen Benutzer nützlich sind, können sie zwischengespeichert werden, was Ihre Web 2.0-Anwendung schneller machen kann.

5. Lazy Load-Komponenten

Schauen Sie sich die Seite genauer an und fragen Sie sich: Was ist überhaupt erforderlich, um die Seite darzustellen? Der restliche Inhalt kann warten.

JavaScript ist eine ideale Wahl, um das Vorher und Nachher des Onload-Ereignisses zu trennen. Wenn beispielsweise JavaScript-Code und Bibliotheken vorhanden sind, die Drag & Drop und Animationen unterstützen, können diese warten, da das Ziehen und Ablegen von Elementen nach der ersten Darstellung der Seite erfolgt. Zu den weiteren Bereichen, die verzögert geladen werden können, gehören versteckte Inhalte (Inhalte, die nach einer Interaktion angezeigt werden) und Bilder im oberen Seitenbereich.

Es stehen Tools zur Verfügung, die Ihnen die Arbeit erleichtern: Der YUI Image Loader kann Bilder verzögert hinter der Falzlinie laden und das Dienstprogramm YUI Get bietet eine einfache Möglichkeit, JS und CSS einzubinden. Ein Beispiel hierfür ist die Yahoo!-Startseite, die Sie sich genauer ansehen können, indem Sie das Netzwerkfenster von Firebug öffnen.

Am besten richten Sie die Leistungsziele an anderen Best Practices der Webentwicklung aus, beispielsweise an der „progressiven Verbesserung“. Wenn der Client JavaScript unterstützt, kann dies das Benutzererlebnis verbessern. Sie müssen jedoch sicherstellen, dass die Seite ordnungsgemäß funktioniert, wenn JavaScript nicht unterstützt wird. Wenn Sie sichergestellt haben, dass Ihre Seite ordnungsgemäß funktioniert, können Sie sie mit einigen Lazy-Loading-Skripten verbessern, um einige ausgefallene Effekte wie Drag & Drop und Animationen zu unterstützen.

6. Komponenten vorladen

Vorladen scheint das Gegenteil von Lazy Loading zu sein, verfolgt aber tatsächlich andere Ziele. Durch das Vorladen von Komponenten können Sie die Leerlaufzeit des Browsers voll ausnutzen, um Komponenten (Bilder, Stile und Skripte) anzufordern, die zukünftig verwendet werden. Wenn der Benutzer die nächste Seite besucht, befinden sich die meisten Komponenten bereits im Cache, sodass die Seite für den Benutzer schneller geladen wird.

In tatsächlichen Anwendungen gibt es mehrere Arten des Vorladens:

1. Bedingungsloses Vorladen - Beginnen Sie so früh wie möglich mit dem Laden und holen Sie einige zusätzliche Komponenten ab. google.com ist ein gutes Beispiel für das Vorladen eines Sprite-Bilds. Dieses Sprite-Bild wird nicht für die Startseite von google.com benötigt, sondern für den Inhalt der Suchergebnisseite.
2. Bedingtes Vorladen – Erraten Sie anhand der Aktionen des Benutzers, wohin dieser springen wird, und laden Sie entsprechend vor. Nachdem Sie in das Eingabefeld search.yahoo.com getippt haben, können Sie sehen, wie das Laden dieser zusätzlichen Komponenten angefordert wird.
3. Vorab vorladen – Laden Sie neue Designs vorab herunter, bevor sie gestartet werden. Nach einer Neugestaltung hört man häufig: „Die neue Site ist toll, aber langsamer als vorher.“ Das liegt zum Teil daran, dass die Benutzer auf die vorherigen Seiten mit einem alten Cache zugegriffen haben, die neue Seite jedoch mit einem leeren Cache. Diese negativen Auswirkungen können gemildert werden, indem einige Komponenten vor dem Start des neuen Designs vorgeladen werden. Die alte Site kann die Leerlaufzeit des Browsers nutzen, um die von der neuen Site benötigten Bilder und Skripte anzufordern.

7. Reduzieren Sie die Anzahl der DOM-Elemente

Eine komplexe Seite bedeutet, dass mehr Bytes heruntergeladen werden müssen und der Zugriff auf den DOM mit JavaScript langsamer ist. Wenn Sie beispielsweise einen Ereignishandler hinzufügen möchten, besteht ein Unterschied zwischen der Ausführung einer Schleife über 500 DOM-Elemente auf einer Seite und der Ausführung einer Schleife über 5.000 DOM-Elemente.

Eine große Anzahl von DOM-Elementen ist ein Zeichen dafür, dass die Seite überflüssiges Markup enthält, das bereinigt werden muss. Verwenden Sie verschachtelte Tabellen für das Layout? Oder fügen Sie eine Reihe von <div>s hinzu, um ein Layoutproblem zu beheben? Möglicherweise sollte eine bessere semantische Auszeichnung verwendet werden.

YUI CSS-Dienstprogramme sind für das Layout sehr hilfreich: grids.css ist für das allgemeine Layout, fonts.css und reset.css können verwendet werden, um die Standardformatierung des Browsers zu entfernen. Dies ist eine gute Gelegenheit, mit dem Aufräumen zu beginnen und über Ihr Markup nachzudenken. Verwenden Sie beispielsweise ein <div> nur, wenn es semantisch sinnvoll ist, und nicht, weil es eine neue Zeile darstellt.

Die Anzahl der DOM-Elemente lässt sich leicht testen. Geben Sie dazu einfach in die Firebug-Konsole ein:

document.getElementsByTagName('*').length

Wie viele DOM-Elemente sind also zu viele? Beispielsweise ist die Yahoo!-Startseite eine recht unübersichtliche Seite mit weniger als 700 Elementen (HTML-Tags).

8. Komponenten nach Domänen trennen

Durch die Trennung der Komponenten werden parallele Downloads maximiert, es wird jedoch sichergestellt, dass aufgrund der Kosten für DNS-Lookups nicht mehr als 2–4 Domänen verwendet werden. Sie können beispielsweise HTML und dynamische Inhalte auf www.example.org bereitstellen und statische Komponenten in static1.example.org und static2.example.org aufteilen.

9. Verwenden Sie so wenig Iframes wie möglich

Mithilfe von iframe können Sie ein HTML-Dokument in das übergeordnete Dokument einfügen. Es ist wichtig, die Funktionsweise von iframe zu verstehen und es effizient zu nutzen.

Vorteile von <iframe>:

1. Langsame Einführung von Inhalten Dritter, wie Logos und Anzeigen
2. Sicherheits-Sandbox
3. Parallele Download-Skripte

Nachteile von <iframe>:

1. Kostspielig, selbst für ein leeres Iframe
2. Blockieren des Seitenladens
3. Nicht semantisch

10. Vermeiden Sie 404

HTTP-Anfragen sind teuer. Es macht keinen Sinn, eine HTTP-Anfrage zu stellen, um eine nutzlose Antwort zu erhalten (z. B. 404 Nicht gefunden). Dies verlangsamt nur die Benutzererfahrung, ohne einen Nutzen zu bringen.

Einige Websites verwenden hilfreiche 404-Fehlermeldungen – „Meinten Sie xxx?“. Das ist gut für die Benutzererfahrung, verschwendet aber auch Serverressourcen (wie Datenbanken usw.). Das Schlimmste ist, dass das externe JavaScript, auf das Sie verlinken, Fehler enthält und das Ergebnis eine 404-Fehlermeldung ist. Erstens blockiert ein solcher Download parallele Downloads. Zweitens versucht der Browser, den 404-Antworttext zu analysieren, und da es sich um JavaScript-Code handelt, muss er herausfinden, welche Teile davon verwendbar sind.

CSS-Teil

11. Vermeiden Sie die Verwendung von CSS-Ausdrücken

Die Verwendung von CSS-Ausdrücken zum dynamischen Festlegen von CSS-Eigenschaften ist eine wirksame, aber gefährliche Methode. Es wird seit IE5 unterstützt, seit IE8 jedoch nicht mehr empfohlen. Sie können beispielsweise CSS-Ausdrücke verwenden, um die Hintergrundfarbe stündlich wechselnd einzustellen:

Hintergrundfarbe: Ausdruck ((neues Datum ()).getHours ()%2? "#B8D4FF": "#F08A00");

12. Wählen Sie <link> und verzichten Sie auf @import

Wie bereits erwähnt, empfiehlt es sich, CSS ganz oben zu platzieren, um ein progressives Rendering zu erreichen.

Die Verwendung von @import im Internet Explorer hat dieselbe Auswirkung wie die Verwendung von <link> unten. Daher sollten Sie es am besten nicht verwenden.

13. Vermeiden Sie die Verwendung von Filtern

Mit dem proprietären AlphaImageLoader-Filter des IE kann das Problem halbtransparenter PNG-Bilder in Versionen vor IE7 behoben werden. Während des Bildladevorgangs blockiert dieser Filter das Rendern, verstopft den Browser, erhöht den Speicherverbrauch und wird auf jedes Element statt auf jedes Bild angewendet, sodass viele Probleme auftreten.

Der beste Ansatz besteht darin, AlphaImageLoader überhaupt nicht zu verwenden und stattdessen auf PNG8-Bilder umzusteigen, die im Internet Explorer gut unterstützt werden. Wenn Sie AlphaImageLoader verwenden müssen, sollten Sie den Unterstrich-Hack verwenden: _filter, um Auswirkungen auf Benutzer von IE7 und höher zu vermeiden.

14. Platzieren Sie Ihr Stylesheet ganz oben

Bei Untersuchungen zur Leistung bei Yahoo! stellten wir fest, dass das Einfügen von Stylesheets in den HEAD-Abschnitt des Dokuments dazu führte, dass die Seite scheinbar schneller geladen wurde. Dies liegt daran, dass durch die Platzierung des Stylesheets im Kopf eine progressive Darstellung der Seite ermöglicht wird.

Front-End-Ingenieure, denen die Leistung wichtig ist, möchten Seiten inkrementell rendern. Das heißt, wir möchten, dass der Browser den vorhandenen Inhalt so schnell wie möglich anzeigt, was insbesondere dann wichtig ist, wenn die Seite viele Inhalte enthält oder die Verbindungsgeschwindigkeit des Benutzers langsam ist. Die Bedeutung der Anzeige von Feedback (z. B. Fortschrittsindikatoren) für Benutzer wurde umfassend untersucht und dokumentiert. In unserem Fall ist die HTML-Seite der Fortschrittsindikator! Während der Browser nach und nach den Seitenkopf, die Navigationsleiste, das obere Logo usw. lädt, werden diese von den Benutzern, die auf das Laden der Seite warten, als Feedback verwendet, wodurch das allgemeine Benutzererlebnis verbessert wird.

js-Teil

15. Entfernen Sie doppelte Skripte

Das Vorhandensein doppelter Skriptdateien auf Ihren Seiten kann die Leistung auf unerwartete Weise beeinträchtigen. Bei einer Überprüfung der zehn wichtigsten Websites in den USA wurde festgestellt, dass nur zwei davon doppelte Skripte enthielten. Zwei Hauptgründe erhöhen die Wahrscheinlichkeit doppelter Skripte auf einer einzigen Seite: Teamgröße und Anzahl der Skripte. In diesem Fall erstellen doppelte Skripte unnötige HTTP-Anfragen und führen nutzlosen JavaScript-Code aus, was die Seitenleistung beeinträchtigt.

Der IE generiert unnötige HTTP-Anfragen, Firefox hingegen nicht. Wenn im Internet Explorer ein nicht zwischenspeicherbares externes Skript zweimal von einer Seite eingebunden wird, werden beim Laden der Seite zwei HTTP-Anfragen generiert. Auch wenn das Skript zwischengespeichert werden kann, generiert es eine zusätzliche HTTP-Anfrage, wenn der Benutzer die Seite neu lädt.

Abgesehen davon, dass sinnlose HTTP-Anfragen generiert werden, ist die mehrmalige Auswertung des Skripts eine Zeitverschwendung. Denn in Firefox und IE wird redundanter JavaScript-Code ausgeführt, unabhängig davon, ob das Skript zwischengespeichert werden kann.

Eine Möglichkeit, das versehentliche zweimalige Importieren desselben Skripts zu vermeiden, besteht darin, in Ihrem Vorlagensystem ein Skriptverwaltungsmodul zu implementieren. Die typische Methode zur Skripteinführung besteht in der Verwendung des SCRIPT-Tags auf der HTML-Seite:

 <script type="text/javascript" src="menu_1.0.17.js"></script>

16. DOM-Zugriff minimieren

Der Zugriff auf DOM-Elemente mit JavaScript ist langsam. Um Ihre Seite reaktionsfähiger zu machen, sollten Sie daher Folgendes tun:

1. Zwischenspeichern des Index der besuchten Elemente
2. Aktualisieren Sie Knoten zuerst „offline“ und fügen Sie sie dann dem DOM-Baum hinzu
3. Vermeiden Sie die Verwendung von JavaScript zum Beheben von Layoutproblemen

17. Verwenden Sie intelligente Event-Handler

Manchmal reagiert die Seite nicht, weil zu viele häufig ausgeführte Ereignishandler zu verschiedenen Elementen des DOM-Baums hinzugefügt werden. Aus diesem Grund empfiehlt sich die Verwendung der Ereignisdelegierung. Wenn Sie 10 Schaltflächen in einem Div haben, sollten Sie dem Div-Container nur einen Ereignishandler hinzufügen, nicht einen für jede Schaltfläche. Ereignisse können auftauchen, sodass Sie das Ereignis erfassen und feststellen können, welche Schaltfläche die Quelle des Ereignisses war.

18. Platzieren Sie das Skript unten

Das Skript blockiert parallele Downloads. Die offizielle HTTP/1.1-Dokumentation empfiehlt, dass der Browser nicht mehr als zwei Komponenten parallel für jeden Hostnamen herunterladen sollte. Wenn die Bilder von mehreren Hostnamen stammen, kann die Anzahl der parallelen Downloads zwei überschreiten. Während ein Skript heruntergeladen wird, startet der Browser keine weiteren Downloads, auch nicht auf einen anderen Hostnamen.

Manchmal ist es nicht einfach, das Skript nach unten zu verschieben. Wird das Skript beispielsweise mittels document.write in den Seiteninhalt eingefügt, lässt es sich nicht weiter nach unten verschieben. Möglicherweise gibt es auch Probleme mit dem Umfang, die in den meisten Fällen gelöst werden können.

Ein häufiger Vorschlag ist die Verwendung verzögerter Skripte. Skripte mit dem Attribut DEFER dürfen kein document.write enthalten und fordern den Browser auf, ihnen mitzuteilen, dass sie mit dem Rendern fortfahren können. Leider unterstützt Firefox das DEFER-Attribut nicht. Im Internet Explorer werden Skripts möglicherweise verschoben, jedoch nicht wie erwartet. Wenn das Skript verschoben werden kann, können wir es am unteren Ende der Seite platzieren und die Seite wird schneller geladen.

JavaScript, CSS

19. Halten Sie JavaScript und CSS fern

Viele Leistungsprinzipien drehen sich um die Verwaltung externer Komponenten. Bevor diese Bedenken jedoch aufkommen, sollten Sie eine grundlegendere Frage stellen: Sollen JavaScript und CSS in externen Dateien abgelegt oder direkt auf die Seite geschrieben werden?

Tatsächlich können Ihre Seiten durch die Verwendung externer Dateien schneller werden, da die JavaScript- und CSS-Dateien im Browser zwischengespeichert werden. Inline-JavaScript und CSS in einem HTML-Dokument werden jedes Mal erneut heruntergeladen, wenn das HTML-Dokument angefordert wird. Dadurch wird die Anzahl der erforderlichen HTTP-Anfragen reduziert, die Größe des HTML-Dokuments erhöht sich jedoch. Liegen JavaScript und CSS hingegen in externen Dateien vor und werden bereits vom Browser zwischengespeichert, haben wir das HTML-Dokument erfolgreich verkleinert, ohne die Anzahl der HTTP-Anfragen zu erhöhen.

20. Komprimieren Sie JavaScript und CSS

Bei der Komprimierung geht es speziell darum, unnötige Zeichen aus dem Code zu entfernen, um seine Größe zu verringern und so die Ladegeschwindigkeit zu erhöhen. Durch die Code-Minimierung werden alle Kommentare und unnötigen Leerzeichen (Leerzeichen, Zeilenumbrüche und Tabulatoren) entfernt. Wenn Sie dies in JavaScript tun, kann die Reaktionsfähigkeit verbessert werden, da die herunterzuladende Datei kleiner ist. Die beiden am häufigsten verwendeten Tools zur JavaScript-Codekomprimierung sind JSMin und YUI Compressor. YUI Compressor kann auch CSS komprimieren.

Bei der Verschleierung handelt es sich um eine optionale Maßnahme zur Quellcodeoptimierung, die komplexer ist als die Komprimierung. Daher ist der Verschleierungsprozess anfälliger für Fehler. In einer Umfrage unter den zehn größten US-Websites reduzierte sich die Größe durch Komprimierung um 21 %, während sie durch Verschleierung um 25 % reduzierte. Obwohl durch Verschleierung die Größe stärker reduziert wird, ist sie riskanter als die Komprimierung.

Zusätzlich zur Komprimierung externer Skripte und Stile können auch Inline-<script>- und <style>-Blöcke komprimiert werden. Selbst wenn GZIP aktiviert ist, kann durch vorheriges Komprimieren die Größe um 5 % oder mehr reduziert werden. Da JavaScript und CSS immer häufiger zum Einsatz kommen, kann es sinnvoll sein, den Code zu komprimieren.

Bild

21. Bilder optimieren

Versuchen Sie, Ihr GIF in PNG zu konvertieren, um zu sehen, ob das Platz spart. Führen Sie pngcrush (oder ein anderes PNG-Optimierungstool) für alle PNG-Bilder aus.

22. CSS-Sprites optimieren

1. Bei Sprite-Bildern führt die horizontale Anordnung im Allgemeinen zu einer kleineren endgültigen Dateigröße als die vertikale Anordnung.
2. Durch die Kombination ähnlicher Farben in einem Sprite-Bild kann die Farbanzahl gering gehalten werden, idealerweise im PNG8-Format mit weniger als 256 Farben.
3. „Mobilfreundlich“, lassen Sie nicht zu viel Platz im Sprite-Bild. Dies hat zwar keine nennenswerten Auswirkungen auf die Bilddateigröße, spart aber Speicher, der vom Benutzeragenten beim Dekomprimieren des Bildes in ein Pixmap verbraucht wird. Ein 100×100-Bild hat 10.000 Pixel, während ein 1000×1000-Bild 1 Million Pixel hat.

23. Bilder nicht mit HTML skalieren

Verwenden Sie keine unnötig großen Bilder, nur weil Sie die Breite und Höhe in HTML festlegen können. Bei Bedarf

<img width="100" height="100" src="mycat.jpg" alt="Meine Katze" />

Dann sollte das Bild selbst (mycat.jpg) 100 x 100 Pixel groß sein, anstatt das Bild auf 500 x 500 Pixel zu verkleinern.

24. Verwenden Sie ein kleines, zwischenspeicherbares favicon.ico (PS-Favoritensymbol)

favicon.ico ist ein Bild, das im Stammverzeichnis des Servers abgelegt ist. Es verursacht eine Menge Ärger, denn selbst wenn Sie es ignorieren, fordert der Browser es automatisch an. Daher ist es am besten, keine 404-Antwort „Nicht gefunden“ auszugeben. Und solange es sich auf demselben Server befindet, wird das Cookie bei jeder Anforderung gesendet. Darüber hinaus stört dieses Bild die Download-Reihenfolge. Wenn Sie beispielsweise im IE zusätzliche Komponenten in Onload anfordern, wird das Favicon zuerst heruntergeladen.

Um die Nachteile von favicon.ico zu mildern, sollten Sie Folgendes sicherstellen:

1. Klein genug, vorzugsweise unter 1K
2. Legen Sie einen geeigneten HTTP-Header mit Ablaufdatum fest (Sie können ihn nicht umbenennen, wenn Sie ihn später ändern möchten). Normalerweise ist es sicher, das Ablaufdatum auf einige Monate in der Zukunft festzulegen. Sie können sicherstellen, dass der Browser über die Änderung informiert ist, indem Sie das Datum der letzten Änderung der aktuellen favicon.ico überprüfen.

Dieses Portal verwendet Cookies zur Optimierung der Browserfunktion. Informieren Sie sich, wie wir Cookies verwenden und wie Sie Ihre Einstellungen ändern können.

25. Reduzieren Sie das Gewicht der Cookies

Cookies werden aus verschiedenen Gründen verwendet, beispielsweise zur Autorisierung und Personalisierung. Cookie-Informationen werden in HTTP-Headern zwischen Webservern und Browsern ausgetauscht. Es ist wichtig, das Cookie so klein wie möglich zu halten, um die Auswirkungen auf die Reaktionszeit des Benutzers zu minimieren.

1. Löschen Sie unnötige Cookies
2. Halten Sie Cookies so klein wie möglich, um die Auswirkungen auf die Reaktionszeit des Benutzers zu minimieren.
3. Achten Sie darauf, die richtige Domänenebene für Cookies festzulegen, um eine Beeinträchtigung anderer Subdomänen zu vermeiden.
4. Legen Sie ein geeignetes Ablaufdatum fest. Ein früheres Ablaufdatum oder kein Ablaufdatum kann Cookies schneller löschen und die Reaktionszeit des Benutzers verbessern.

26. Platzieren Sie Komponenten auf einer Domäne, die keine Cookies enthält

Wenn der Browser eine Anfrage für ein statisches Bild sendet, werden die Cookies ebenfalls mitgesendet und der Server benötigt diese Cookies überhaupt nicht. Sie verursachen daher nur sinnlosen Netzwerkverkehr und Sie sollten sicherstellen, dass Anforderungen für statische Komponenten keine Cookies enthalten. Sie können eine Subdomäne erstellen und dort alle statischen Komponenten bereitstellen.

Wenn der Domänenname www.example.org lautet, können Sie statische Komponenten auf static.example.org bereitstellen. Wenn jedoch Cookies auf den Top-Level-Domains example.org oder www.example.org gesetzt wurden, werden alle Anfragen an static.example.org diese Cookies enthalten. Sie können zu diesem Zeitpunkt einen neuen Domänennamen kaufen, alle statischen Komponenten darauf bereitstellen und diesen neuen Domänennamen frei von Cookies halten. Yahoo! verwendet yimg.com, YouTube ist ytimg.com, Amazon ist images-amazon.com und so weiter.

Ein weiterer Vorteil der Bereitstellung statischer Komponenten in einer Domäne ohne Cookies besteht darin, dass einige Proxys die Zwischenspeicherung von Komponenten mit Cookies möglicherweise ablehnen. Ein Hinweis ist jedoch zu beachten: Wenn Sie nicht wissen, ob Sie example.org oder www.example.org als Ihre Homepage verwenden sollen, bedenken Sie die Auswirkungen von Cookies. Wenn Sie „www“ weglassen, können Sie Cookies nur an *.example.org schreiben. Aus Leistungsgründen ist es daher am besten, die „www“-Subdomäne zu verwenden und Cookies an diese Subdomäne zu schreiben.

Mobile

27. Stellen Sie sicher, dass alle Komponenten kleiner als 25K sind

Diese Einschränkung liegt daran, dass das iPhone keine Komponenten zwischenspeichern kann, die größer als 25 KB sind. Beachten Sie, dass sich dies auf die unkomprimierte Größe bezieht. Deshalb ist es auch wichtig, den Inhalt selbst zu minimieren, da gzip allein möglicherweise nicht ausreicht.

28. Komponenten in ein zusammengesetztes Dokument packen

Indem Sie die Komponenten in ein zusammengesetztes Dokument wie eine E-Mail mit Anhängen packen, können Sie mehrere Komponenten mit einer einzigen HTTP-Anfrage abrufen (denken Sie daran: HTTP-Anfragen sind teuer). Wenn Sie diese Methode verwenden, müssen Sie zunächst prüfen, ob der Benutzeragent sie unterstützt (das iPhone unterstützt sie nicht).

Server

29.Gzip-Komponente

Front-End-Ingenieure können Wege finden, die zum Übertragen von HTTP-Anfragen und -Antworten über das Netzwerk benötigte Zeit erheblich zu verkürzen. Es besteht kein Zweifel, dass die Bandbreitengeschwindigkeit des Endbenutzers, der Netzwerkdienstanbieter, die Entfernung zu Peer-Austauschpunkten usw. allesamt außerhalb der Kontrolle des Entwicklungsteams liegen. Es gibt jedoch auch andere Faktoren, die die Reaktionszeit beeinflussen können, und durch Komprimierung kann die Reaktionszeit verbessert werden, indem die Größe der HTTP-Antwort reduziert wird.

Seit HTTP/1.1 verfügen Webclients über den HTTP-Anforderungsheader Accept-Encoding zur Unterstützung der Komprimierung.

Akzeptierte Kodierung: gzip, deflate

Wenn ein Webserver diesen Anforderungsheader sieht, komprimiert er die Antwort mit einer der vom Client aufgelisteten Methoden. Der Webserver benachrichtigt den Client über den Content-Encoding-Antwortheader.

Inhaltskodierung: gzip

Durch die größtmögliche Verwendung der GZIP-Komprimierung kann die Größe der Seite verringert werden. Dies ist auch der einfachste Weg, das Benutzererlebnis zu verbessern.

30. Lassen Sie das Bild-SRC-Attribut nicht leer

Bild mit leerem String Bilder mit einem leeren String-src-Attribut sind sehr häufig und kommen in zwei Hauptformen vor:

1. Reines HTML

<img src=””>

2. JavaScript

var img = neues Bild();
img.src = "";

Beide Formen verursachen das gleiche Problem: Der Browser sendet eine weitere Anfrage an den Server.

31. ETags konfigurieren

Entity-Tags (ETags) sind ein Mechanismus, der von Servern und Browsern verwendet wird, um zu bestimmen, ob eine Komponente im Browser-Cache mit einer Komponente auf dem Ursprungsserver übereinstimmt (eine „Entity“ ist eine Komponente: ein Bild, ein Skript, ein Stylesheet 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 eine bestimmte Version einer Komponente eindeutig identifiziert. Die einzige Formatbeschränkung besteht darin, dass die Zeichenfolge in Anführungszeichen eingeschlossen sein muss und der Ursprungsserver das ETag der Komponente mithilfe des ETags im Antwortheader angibt:

HTTP/1.1 200 OK
Letzte Änderung: Dienstag, 12. Dezember 2006, 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Inhaltslänge: 12195 

Wenn der Browser dann eine Komponente validieren muss, übergibt er den ETag unter Verwendung des Anforderungsheaders „If-None-Match“ an den Ursprungsserver zurück. Bei erfolgreicher Übereinstimmung der ETags wird ein Statuscode 304 zurückgegeben, wodurch der Antworttext um 12195 Bytes reduziert wird.

GET /i/yahoo.gif HTTP/1.1
      Gastgeber: us.yimg.com
      If-Modified-Since: Dienstag, 12. Dezember 2006, 03:03:59 GMT
      Wenn keine Übereinstimmung: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Nicht geändert

32. Verwenden Sie GET-Anfragen für Ajax

Das Yahoo! Mail-Team hat festgestellt, dass bei Verwendung von XMLHttpRequest die POST-Anforderung des Browsers in einem zweistufigen Prozess implementiert wird: zuerst wird der HTTP-Header gesendet, dann die Daten. Daher ist es am besten, eine GET-Anfrage zu verwenden, für die nur eine TCP-Nachricht gesendet werden muss (es sei denn, es sind viele Cookies vorhanden). Die maximale Länge einer IE-URL beträgt 2 KB. Wenn die zu sendenden Daten also 2 KB überschreiten, kann GET nicht verwendet werden.

Ein interessanter Nebeneffekt einer POST-Anfrage ist, dass genau wie bei einer GET-Anfrage keine Daten gesendet werden. Wie in der HTTP-Spezifikation beschrieben, wird eine GET-Anfrage zum Abrufen von Informationen verwendet. Die Semantik besteht also lediglich darin, Daten mithilfe einer GET-Anfrage anzufordern und nicht darin, Daten zu senden, die auf dem Server gespeichert werden müssen.

33. Puffer frühzeitig leeren

Wenn ein Benutzer eine Seite anfordert, benötigt der Server etwa 200 bis 500 Millisekunden, um die HTML-Seite zusammenzustellen. Während dieser Zeit wartet der Browser untätig auf das Eintreffen der Daten. PHP verfügt über eine Funktion „flush()“, mit der ein Teil der vorbereiteten HTML-Antwort an den Browser gesendet werden kann, sodass der Browser mit dem Abrufen von Komponenten beginnen kann, während der Rest im Hintergrund vorbereitet wird. Dies ist bei stark ausgelasteten Backends oder sehr „leichten“ Frontend-Seiten nützlich (PS: Der Vorteil ist am größten, wenn die Antwortzeit hauptsächlich im Hintergrund erfolgt).

Der ideale Ort zum Leeren des Puffers ist nach dem HEAD, da der HEAD-Teil des HTML normalerweise einfacher zu generieren ist und die Einbindung beliebiger CSS- und JavaScript-Dateien ermöglicht, wodurch der Browser mit dem parallelen Abrufen von Komponenten beginnen kann, während diese noch im Hintergrund verarbeitet werden.

Zum Beispiel:

 ... <!-- css, js -->
    </Kopf>
    ?>
    <Text>
      ... <!-- Inhalt -->

34. Verwenden Sie ein CDN (Content Delivery Network)

Auch die physische Entfernung zwischen Benutzer und Server beeinflusst die Reaktionszeit. Durch die Bereitstellung Ihrer Inhalte auf mehreren geografisch verteilten Servern können Ihre Benutzer Seiten schneller laden. Doch wie geht das konkret?

Der erste Schritt zur Implementierung geografisch verteilter Inhalte besteht darin, nicht zu versuchen, Ihre Webanwendung so umzugestalten, dass sie einer verteilten Struktur gerecht wird. Je nach Anwendung kann das Ändern der Architektur schwierige Aufgaben wie die Synchronisierung des Sitzungsstatus und die Replikation von Datenbanktransaktionen zwischen Servern mit sich bringen. Aufgrund dieser Schwierigkeit können Vorschläge zur Verkürzung der Distanz zwischen Benutzern und Inhalten verzögert oder einfach nicht angenommen werden.

Bedenken Sie, dass 80 bis 90 % der Reaktionszeit des Endbenutzers auf das Herunterladen von Seitenkomponenten entfallen: 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. Dadurch wird nicht nur die Reaktionszeit erheblich verkürzt, sondern auch die Vorteile von CDN können leichter aufgezeigt werden.

Ein Content Delivery Network (CDN) ist eine Gruppe von Webservern, die an verschiedenen geografischen Standorten verteilt sind und dazu dienen, den Benutzern Inhalte effizienter bereitzustellen. Normalerweise wird der für die Bereitstellung von Inhalten ausgewählte Server auf Grundlage der Netzwerkdistanz ausgewählt. Beispiel: Wählen Sie den Server mit den wenigsten Hops oder der schnellsten Reaktionszeit.

35. Expires- oder Cache-Control-HTTP-Header hinzufügen

Diese Regel hat zwei Aspekte:

1. Für statische Komponenten: Legen Sie als „Läuft ab“ einen Zeitpunkt in der Zukunft fest, damit dieser nie abläuft.
2. Redundante dynamische Komponenten: Verwenden Sie entsprechende Cache-Control-HTTP-Header, um Browsern bedingte Anfragen zu ermöglichen

Die Designs von Webseiten werden immer umfangreicher, das heißt, die Seiten enthalten mehr Skripte, Bilder und Flash. Ein neuer Besucher auf Ihrer Website muss möglicherweise noch mehrere HTTP -Anfragen einreichen. Durch die Verwendung von Ablaufdaten können Sie jedoch die Komponente zwischenbietbar machen, wodurch unnötige HTTP -Anfragen bei nachfolgenden Besuchen vermieden werden. Ausgeläuft HTTP -Header werden üblicherweise für Bilder verwendet, sollten jedoch für alle Komponenten verwendet werden, einschließlich Skripten, Stile und Flash -Komponenten.

Browser (und Proxies) verwenden Caches, um die Anzahl und Größe von HTTP -Anforderungen zu verringern, sodass die Seiten schneller geladen werden können. Der Webserver verwendet den HTTP -Antwortheader der Gültigkeit, um dem Client mitzuteilen, wie lange die verschiedenen Komponenten der Seite zwischengespeichert werden sollten. Mit einem Ablaufdatum in der fernen Zukunft teilt dem Browser mit, dass sich diese Antwort nicht vor dem 15. April 2010 ändern wird.

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

Wenn Sie Apache verwenden, verwenden Sie die Ablaufdefault -Anweisung, um das Ablaufdatum relativ zum aktuellen Datum festzulegen. Das folgende Beispiel legt die Gültigkeitsdauer von der Antragszeit auf 10 Jahre fest:

ExpiresDefault „Zugriff plus 10 Jahre“

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.