Zusammenfassung: Ob bei der Arbeit oder in einem Vorstellungsgespräch, die Optimierung der Web-Frontend-Leistung ist sehr wichtig. Welche Aspekte müssen wir also mit der Optimierung beginnen? Sie können die 34 Catch-Rules von Yahoo für die Front-End-Optimierung befolgen, aber jetzt sind es 35, also kann man sagen, dass es sich um Yahoos Catch-35 für die Front-End-Optimierung handelt. Es wurde klassifiziert, was gut ist. Auf diese Weise haben wir eine klarere Richtung für die Optimierung.
Inhaltsteil 1. Minimieren Sie die Anzahl der HTTP-Anfragen80 % der Antwortzeit des Endbenutzers werden im Frontend verbracht, und die meiste Zeit wird mit dem Herunterladen der verschiedenen Komponenten auf der Seite verbracht: Bilder, Stylesheets, Skripte, Flash usw. Durch die Reduzierung der Anzahl der Komponenten verringert sich zwangsläufig die Anzahl der von der Seite übermittelten HTTP-Anforderungen. 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 Antwortzeiten zu verkürzen? Nun, es gibt tatsächlich eine Möglichkeit, Ihren Kuchen zu haben und ihn auch zu essen.
Das Zusammenführen von Dateien reduziert die Anzahl der Anfragen, indem alle Skripte in einer Datei zusammengefasst werden. 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 die CSS-Eigenschaften „Hintergrundbild“ und „Hintergrundposition“, um den anzuzeigenden Teil zu positionieren. Durch die Bildzuordnung können mehrere Bilder zu einem einzigen Bild kombiniert werden. Die Gesamtgröße bleibt gleich, verringert jedoch die Anzahl der Anforderungen und beschleunigt das Laden der Seite. Die Bildzuordnung ist nur dann sinnvoll, wenn das Bild fortlaufend auf der Seite angezeigt wird, beispielsweise in einer Navigationsleiste. Das Festlegen von Koordinaten für eine Bildkarte ist langweilig und fehleranfällig, und die Verwendung von Bildkarten zur Navigation ist nicht einfach, daher wird diese Methode nicht empfohlen. Inline-Bilder (Base64-kodiert) verwenden das URL-Muster „data:“, um Bilder in die Seite einzubetten. Dadurch wird die Größe der HTML-Datei erhöht. Das Einfügen von Inline-Bildern in ein (zwischengespeichertes) Stylesheet ist eine gute Idee und verhindert erfolgreich, dass die Seite zu schwer wird. Allerdings unterstützen aktuelle Mainstream-Browser Inline-Bilder nicht gut.Die Reduzierung der Anzahl der HTTP-Anfragen für eine Seite ist ein wichtiger Ausgangspunkt, um die Geschwindigkeit des ersten Besuchs der Website zu verbessern.
2. Reduzieren Sie DNS-SuchenDas Domain Name System stellt eine Zuordnung zwischen Hostnamen und IP-Adressen her, ähnlich wie die Zuordnung zwischen Namen und Nummern in einem Telefonbuch. Wenn Sie www.yahoo.com im Browser eingeben, kontaktiert der Browser den DNS-Resolver, um die IP-Adresse des Servers zurückzugeben. DNS hat seinen Preis: Es dauert 20 bis 120 Millisekunden, um die IP-Adresse für einen bestimmten Hostnamen zu finden. Der Browser kann nichts vom Hostnamen herunterladen, bis die DNS-Suche abgeschlossen ist.
DNS-Suchvorgänge werden effizienter auf einem speziellen Caching-Server des ISP (Internet Service Provider) oder des lokalen Netzwerks des Benutzers zwischengespeichert, können aber auch auf dem Computer des einzelnen Benutzers zwischengespeichert werden. DNS-Informationen werden im DNS-Cache des Betriebssystems (dem DNS-Clientdienst unter Microsoft Windows) gespeichert. Die meisten Browser verfügen über einen eigenen Cache, der unabhängig vom Betriebssystem ist. Solange der Browser diesen Eintrag in seinem Cache behält, fragt er das Betriebssystem nicht nach DNS ab.
IE speichert DNS-Suchvorgänge standardmäßig 30 Minuten lang im Cache, wie in der Registrierungseinstellung „DnsCacheTimeout“ angegeben. Firefox speichert eine Minute lang im Cache, was mit dem Konfigurationselement network.dnsCacheExpiration festgelegt werden kann. (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-Suchen der Anzahl verschiedener Hostnamen auf der Seite, einschließlich Seiten-URLs, Bildern, Skriptdateien, Stylesheets, Flash-Objekten und anderen Durch die Reduzierung unterschiedlicher Hostnamen können DNS-Suchvorgänge reduziert werden.
Durch die Reduzierung der Anzahl verschiedener Hostnamen verringert sich auch die Anzahl der Komponenten, die eine Seite parallel herunterladen kann. Durch die Vermeidung von DNS-Suchen wird die Antwortzeit verkürzt, während durch die Reduzierung der Anzahl paralleler Downloads die Antwortzeit erhöht wird. Meine Regel besteht darin, die Komponenten auf zwei bis vier Hostnamen zu verteilen, was einen Kompromiss zwischen der Reduzierung von DNS-Suchen und der Ermöglichung einer hohen Anzahl gleichzeitiger Downloads darstellt.
3. Vermeiden Sie WeiterleitungenWeiterleitungen verwenden die Statuscodes 301 und 302. Hier ist ein HTTP-Header mit einem 301-Statuscode:
HTTP/1.1 301 Permanent verschobenStandort: http://example.com/newuriContent-Type: text/html
Der Browser springt automatisch zu der im Feld „Standort“ angegebenen URL. Alle für die Umleitung erforderlichen Informationen befinden sich im HTTP-Header und der Antworttext ist normalerweise leer. Tatsächlich stellen auch zusätzliche HTTP-Header wie Expires und Cache-Control Umleitungen dar. Es gibt andere Möglichkeiten zur Weiterleitung: Meta-Tags aktualisieren und JavaScript. Wenn Sie jedoch eine Weiterleitung durchführen müssen, verwenden Sie am besten den Standard-HTTP-Statuscode 3xx, vor allem, damit die Zurück-Schaltfläche ordnungsgemäß funktioniert.
Beachten Sie, dass Weiterleitungen die Benutzererfahrung verlangsamen können. Das Einfügen einer Weiterleitung zwischen dem Benutzer und dem HTML-Dokument führt dazu, dass alles auf der Seite nicht gerendert wird und die Komponenten erst dann heruntergeladen werden, wenn das HTML-Dokument bereitgestellt wird Browser.
Es gibt eine häufige Weiterleitung, die äußerst ressourcenverschwendend ist und Webentwicklern im Allgemeinen nicht bewusst ist, dass in der URL am Ende ein Schrägstrich fehlt. Wenn Sie beispielsweise zu http://astrology.yahoo.com/astrology springen, wird eine 301-Antwort zurückgegeben, die zu http://astrology.yahoo.com/astrology/ weiterleitet (beachten Sie den abschließenden Schrägstrich). In Apache können Sie Alias-, mod_rewrite- oder DirectorySlash-Anweisungen verwenden, um unnötige Umleitungen 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.) eine gewisse Verarbeitung durchführen. . 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 verwendet wird, weil sich der Domänenname ändert, können Sie einen CNAME (einen DNS-Eintrag erstellen, der auf einen anderen Domänennamen als Alias verweist) in Kombination mit der Alias- oder mod_rewrite-Direktive erstellen.
4. Machen Sie Ajax zwischenspeicherbarEiner der Vorteile von Ajax besteht darin, dass es dem Benutzer sofortiges Feedback geben kann, da es Informationen asynchron vom Backend-Server anfordern kann. Allerdings gibt es bei Ajax keine Garantie dafür, dass es Benutzern nicht langweilig wird, während sie auf die Rückkehr asynchroner JavaScript- und XML-Antworten warten. In vielen Anwendungen hängt die Wartefähigkeit des Benutzers davon ab, wie Ajax verwendet wird. In einem webbasierten E-Mail-Client konzentrieren sich Benutzer beispielsweise weiterhin auf die von Ajax-Anfragen zurückgegebenen Ergebnisse, um E-Mail-Nachrichten zu finden, die ihren Suchkriterien entsprechen. Es ist wichtig, sich daran zu erinnern, dass asynchron nicht sofort bedeutet.
Um die Leistung zu verbessern, ist die Optimierung dieser Ajax-Antworten von entscheidender Bedeutung. Die wichtigste Möglichkeit zur Verbesserung der Ajax-Leistung besteht darin, die Antwort zwischenspeicherbar zu machen, wie unter „Hinzufügen von Expires- oder Cache-Control-HTTP-Headern“ beschrieben. Für Ajax gelten folgende zusätzliche Regeln:
Schauen wir uns ein Beispiel eines Web 2.0-E-Mail-Clients an, der Ajax verwendet, um das Adressbuch des Benutzers für die Autovervollständigungsfunktion herunterzuladen. Wenn der Benutzer sein Adressbuch seit der letzten Verwendung nicht geändert hat und die Ajax-Antwort zwischenspeicherbar ist und einen nicht abgelaufenen HTTP-Header „Expires“ oder „Cache-Control“ aufweist, kann das vorherige Adressbuch aus dem Cache gelesen werden. Dem Browser muss mitgeteilt werden, ob er die zuvor zwischengespeicherte Adressbuchantwort weiterhin verwenden oder eine neue anfordern soll. Dies kann erreicht werden, indem der Ajax-URL des Adressbuchs ein Zeitstempel hinzugefügt wird, der den Zeitpunkt der letzten Änderung des Adressbuchs des Benutzers angibt, zum Beispiel &t=1190241612. Wenn das Adressbuch seit dem letzten Download nicht verändert wurde und der Zeitstempel unverändert bleibt, wird das Adressbuch direkt aus dem Browser-Cache gelesen und so ein zusätzlicher HTTP-Roundtrip vermieden. Wenn der Benutzer das Adressbuch geändert hat, stellt der Zeitstempel außerdem sicher, dass die neue URL nicht mit der zwischengespeicherten Antwort übereinstimmt und der Browser den neuen Adressbucheintrag anfordert.
Auch wenn Ajax-Antworten dynamisch erstellt werden und möglicherweise nur einem einzelnen Benutzer zur Verfügung stehen, können sie zwischengespeichert werden, wodurch Ihre Web 2.0-Anwendung schneller wird.
5. Verzögertes Laden von KomponentenSchauen Sie sich die Seite genauer an und fragen Sie sich: Was ist überhaupt notwendig, damit die Seite gerendert wird? Der Rest kann warten.
JavaScript ist eine ideale Wahl für die Trennung vor und nach dem Onload-Ereignis. Wenn Sie beispielsweise über JavaScript-Code und Bibliotheken verfügen, die Drag-and-Drop und Animationen unterstützen, können diese warten, da das Drag-and-Drop-Element nach dem ersten Rendern der Seite erfolgt. 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 dabei helfen, Ihren Arbeitsaufwand zu reduzieren: YUI Image Loader kann reduzierte Bilder verzögert laden, und das Dienstprogramm YUI Get ist eine einfache Möglichkeit, JS und CSS einzubinden. Die Yahoo!-Homepage ist ein Beispiel. Sie können das Netzwerkfenster von Firebug öffnen und einen genaueren Blick darauf werfen.
Am besten stimmen Sie die Leistungsziele mit anderen Best Practices für die Webentwicklung ab, beispielsweise mit der progressiven Verbesserung. Wenn der Client JavaScript unterstützt, kann die Benutzererfahrung verbessert werden. Sie müssen jedoch sicherstellen, dass die Seite ordnungsgemäß funktioniert, wenn JavaScript nicht unterstützt wird. 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.
6. Komponenten vorspannen
Preloading scheint das Gegenteil von Lazy Loading zu sein, verfolgt aber tatsächlich andere Ziele. 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 der Praxis gibt es folgende Arten der Vorspannung:
Eine komplexe Seite bedeutet, dass mehr Bytes heruntergeladen werden müssen und der Zugriff auf das DOM mit JavaScript langsamer ist. Wenn Sie beispielsweise einen Ereignishandler hinzufügen möchten, besteht ein Unterschied zwischen dem Durchlaufen von 500 DOM-Elementen auf der Seite und dem Durchlaufen von 5.000 DOM-Elementen.
Eine große Anzahl von DOM-Elementen ist ein Zeichen dafür, dass auf der Seite irrelevantes Markup vorhanden ist, das bereinigt werden muss. Verwenden Sie verschachtelte Tabellen für das Layout? Oder haben Sie eine Reihe von <div>s hinzugefügt, nur um das Layoutproblem zu beheben? Möglicherweise sollte ein besseres semantisches Markup verwendet werden.
YUI-CSS-Dienstprogramme sind für das Layout sehr hilfreich: „grids.css“ ist für das Gesamtlayout und „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 und Nachdenken über Ihr Markup zu beginnen, z. B. die Verwendung von <div> nur dann, 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 einfach Folgendes in die Firebug-Konsole ein:
document.getElementsByTagName('*').lengthWie viele DOM-Elemente sind also zu viele? Sie können auf andere, ähnlich gut gekennzeichnete Seiten verweisen. Beispielsweise ist die Yahoo!-Homepage eine ziemlich aktive Seite, die jedoch weniger als 700 Elemente (HTML-Tags) enthält.
8. Domänenübergreifende Trennung von KomponentenDurch die Trennung von Komponenten können parallele Downloads maximiert werden. Stellen Sie jedoch sicher, dass Sie nicht mehr als zwei bis vier Domänen verwenden, da die DNS-Suche mit Nachteilen verbunden ist. Beispielsweise können Sie HTML und dynamische Inhalte unter www.example.org bereitstellen und statische Komponenten in static1.example.org und static2.example.org aufteilen.
9. Verwenden Sie Iframes so wenig wie möglichSie können iframe verwenden, um ein HTML-Dokument in ein übergeordnetes Dokument einzufügen. Es ist wichtig, die Funktionsweise von iframe zu verstehen und es effizient zu verwenden.
Vorteile von <iframe>:
Nachteile von <iframe>:
HTTP-Anfragen sind teuer. Es ist nicht erforderlich, eine HTTP-Anfrage zu verwenden, um eine nutzlose Antwort zu erhalten (z. B. 404 Nicht gefunden). Dies verlangsamt nur die Benutzererfahrung, ohne dass dies einen Nutzen bringt.
Einige Websites verwenden die hilfreiche 404 – Meinen Sie xxx? , Dies ist zwar vorteilhaft für die Benutzererfahrung, verschwendet aber auch Serverressourcen (z. B. Datenbanken usw.). Das Schlimmste ist, dass das externe JavaScript, auf das Sie verlinken, einen Fehler aufweist und das Ergebnis ein 404-Fehler ist. Erstens blockiert dieser Download parallele Downloads. Zweitens versucht der Browser, den 404-Antworttext zu analysieren, da es sich um JavaScript-Code handelt, und muss herausfinden, welche Teile davon verfügbar sind.
CSS-Teil 11. Vermeiden Sie die Verwendung von CSS-AusdrückenDie Verwendung von CSS-Ausdrücken zum dynamischen Festlegen von CSS-Eigenschaften ist eine leistungsstarke und gefährliche Methode. Unterstützt von IE5, aber ab IE8 veraltet. Sie können beispielsweise einen CSS-Ausdruck verwenden, um die Hintergrundfarbe so festzulegen, dass sie stündlich wechselt:
Hintergrundfarbe: expression( (new Date()).getHours()%2 ? #B8D4FF : #F08A00 );12. Wählen Sie <Link>, um @import zu verwerfen
Eine bewährte Methode wurde bereits erwähnt: Um ein progressives Rendering zu erreichen, sollte CSS oben platziert werden.
Die Verwendung von @import im IE hat den gleichen Effekt wie die Verwendung von <link> unten, daher ist es am besten, es nicht zu verwenden.
13. Vermeiden Sie die Verwendung von FilternDer proprietäre AlphaImageLoader-Filter von IE kann verwendet werden, um das Problem durchscheinender PNG-Bilder in Versionen vor IE7 zu beheben. 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 besteht darin, AlphaImageLoader einfach nicht zu verwenden und stattdessen problemlos auf die Verwendung von PNG8-Bildern umzusteigen, die im IE gut unterstützt werden. Wenn Sie AlphaImageLoader verwenden müssen, sollten Sie den Unterstrich hack:_filter verwenden, um Auswirkungen auf Benutzer von IE7 und höher zu vermeiden.
14. Platzieren Sie das Stylesheet obenAls wir die Leistung bei Yahoo! untersuchten, stellten wir fest, dass das Platzieren von Stylesheets im HEAD-Abschnitt des Dokuments dazu führte, dass die Seite schneller geladen wurde. Dies liegt daran, dass die Seite durch Platzieren des Stylesheets im Kopf schrittweise gerendert werden kann.
Front-End-Ingenieure, denen die Leistung am Herzen liegt, 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 umfassend 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 von Benutzern, die auf das Laden der Seite warten, als Feedback verwendet, was die allgemeine Benutzererfahrung verbessern kann.
js Teil 15. Entfernen Sie doppelte SkripteSeiten mit doppelten Skriptdateien können die Leistung stärker beeinträchtigen, als Sie denken. Bei einer Überprüfung der Top-10-Websites in den Vereinigten Staaten wurde festgestellt, dass nur zwei Websites doppelte Skripte enthielten. Zwei Hauptgründe erhöhen die Wahrscheinlichkeit, dass doppelte Skripte auf einer einzelnen Seite erscheinen: 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 generiert unnötige HTTP-Anfragen, Firefox jedoch nicht. Wenn im IE ein nicht zwischenspeicherbares externes Skript zweimal von der Seite eingeführt wird, generiert es beim Laden der Seite zwei HTTP-Anfragen. Auch wenn das Skript zwischenspeicherbar ist, generiert es zusätzliche HTTP-Anfragen, wenn der Benutzer die Seite neu lädt.
Die mehrmalige Auswertung des Skripts generiert nicht nur bedeutungslose HTTP-Anfragen, sondern kostet auch Zeit. Denn unabhängig davon, ob das Skript zwischenspeicherbar ist oder nicht, wird in Firefox und IE redundanter JavaScript-Code ausgeführt.
Eine Möglichkeit, das versehentliche zweimalige Importieren desselben Skripts zu vermeiden, besteht darin, ein Skriptverwaltungsmodul im Vorlagensystem zu implementieren. Eine typische Möglichkeit, Skripte einzuführen, ist die Verwendung von SCRIPT-Tags in HTML-Seiten:
<script type=text/javascript src=menu_1.0.17.js></script>16. DOM-Zugriff minimieren
Der Zugriff auf DOM-Elemente mit JavaScript ist sehr langsam. Um die Reaktionsfähigkeit der Seite zu verbessern, sollten Sie Folgendes tun:
Manchmal hat man das Gefühl, dass die Seite nicht reaktionsfähig genug ist, weil zu viele häufig ausgeführte Event-Handler zu verschiedenen Elementen des DOM-Baums hinzugefügt wurden. Aus diesem Grund wird die Event-Delegation empfohlen. Wenn ein Div 10 Schaltflächen enthält, sollten Sie nur einen Event-Handler zum Div-Container hinzufügen, statt einen für jede Schaltfläche. Es können Ereignisse auftreten, sodass Sie das Ereignis erfassen und wissen können, welche Schaltfläche die Ursache des Ereignisses ist.
18. Platzieren Sie das Skript untenDas Skript blockiert parallele Downloads. In der offiziellen HTTP/1.1-Dokumentation wird empfohlen, dass der Browser nicht mehr als zwei Komponenten pro Hostname gleichzeitig herunterlädt. Wenn das Image von mehreren Hostnamen stammt, kann die Anzahl der parallelen Downloads zwei überschreiten. 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 weiter 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 besteht darin, verzögerte Skripte mit dem DEFER-Attribut zu verwenden, was bedeutet, dass sie document.write nicht enthalten können und den Browser auffordern, ihnen mitzuteilen, dass sie mit dem Rendern fortfahren können. Leider unterstützt Firefox das DEFER-Attribut nicht. Im IE wird das Skript möglicherweise verzögert, jedoch nicht wie erwartet. Wenn das Skript verzögert werden kann, können wir es an den unteren Rand der Seite verschieben und die Seite wird schneller geladen.
Javascript, CSS 19. Halten Sie JavaScript und CSS außen vorViele Leistungsprinzipien betreffen die Verwaltung externer Komponenten. Bevor diese Bedenken jedoch auftauchen, sollten Sie eine grundlegendere Frage stellen: Sollen JavaScript und CSS in externen Dateien platziert oder direkt auf die Seite geschrieben werden?
Tatsächlich kann die Verwendung externer Dateien die Seite schneller machen, 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, aber die Größe des HTML-Dokuments erhöht. Wenn sich JavaScript und CSS hingegen in externen Dateien befinden und vom Browser zwischengespeichert wurden, haben wir das HTML-Dokument erfolgreich verkleinert, ohne die Anzahl der HTTP-Anfragen zu erhöhen.
20. Minimieren Sie JavaScript und CSSDurch die Komprimierung werden unnötige Zeichen gezielt aus dem Code entfernt, um die Größe zu reduzieren und so die Ladegeschwindigkeit zu verbessern. Codeminimierung bedeutet, alle Kommentare und unnötigen Leerzeichen (Leerzeichen, Zeilenumbrüche und Tabulatoren) zu entfernen. Dies in JavaScript zu tun, kann die Reaktionsfähigkeit verbessern, da die herunterzuladende Datei kleiner ist. Die beiden am häufigsten verwendeten JavaScript-Codekomprimierungstools sind JSMin und YUI Compressor. Der YUI-Kompressor kann auch CSS komprimieren.
Verschleierung ist eine optionale Maßnahme zur Optimierung des Quellcodes, die komplexer ist als die Komprimierung, sodass der Verschleierungsprozess auch eher zu Fehlern führt. In einer Umfrage unter den zehn besten Websites in den Vereinigten Staaten kann die Größe durch Komprimierung um 21 % und durch Verschleierung um 25 % reduziert werden. Obwohl die Verschleierung ein höheres Maß an Reduzierung bietet, ist sie riskanter als die Komprimierung.
Neben der Komprimierung externer Skripte und Stile können auch Inline-<script>- und <style>-Blöcke komprimiert werden. Selbst wenn das gzip-Modul aktiviert ist, kann die vorherige Komprimierung die Größe um 5 % oder mehr reduzieren. JavaScript und CSS werden immer häufiger verwendet, daher hat die Komprimierung von Code einen guten Effekt.
Bild 21. Bilder optimierenVersuchen Sie, das GIF-Format in das PNG-Format zu konvertieren, und prüfen Sie, ob dadurch Platz gespart wird. Führen Sie pngcrush (oder ein anderes PNG-Optimierungstool) für alle PNG-Bilder aus
22. Optimieren Sie CSS SpriteVerwenden Sie keine größeren Bilder als nötig, nur weil Sie Breite und Höhe in HTML festlegen können. wenn nötig
<img width=100 height=100 src=mycat.jpg Host: us.yimg.com If-Modified-Since: Di, 12. Dezember 2006 03:03:59 GMT If-None-Match: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 Nicht geändert32. Verwenden Sie eine GET-Anfrage für Ajax
Das Yahoo! Mailbox-Team hat herausgefunden, dass bei Verwendung von XMLHttpRequest die POST-Anfrage des Browsers durch einen zweistufigen Prozess implementiert wird: zuerst das Senden des HTTP-Headers und dann das Senden der Daten. Daher ist es am besten, eine GET-Anfrage zu verwenden, die nur eine TCP-Nachricht senden muss (es sei denn, es sind zu viele Cookies vorhanden). Die maximale URL-Länge von IE beträgt 2 KB. Wenn die zu sendenden Daten 2 KB überschreiten, kann GET nicht verwendet werden.
Ein interessanter Nebeneffekt von POST-Anfragen ist, dass im Gegensatz zu GET-Anfragen keine Daten tatsächlich gesendet werden. Wie in der HTTP-Dokumentation beschrieben, werden GET-Anfragen zum Abrufen von Informationen verwendet. Seine Semantik besteht also lediglich darin, GET-Anfragen zum Anfordern von Daten zu verwenden, und nicht darin, Daten zu senden, die an den Server gespeichert werden müssen.
33. Löschen Sie den Puffer so früh wie möglichWenn ein Benutzer eine Seite anfordert, benötigt der Server etwa 200 bis 500 Millisekunden, um die HTML-Seite zusammenzustellen. Während dieser Zeit ist der Browser im Leerlauf und wartet auf das Eintreffen der Daten. In PHP gibt es eine Funktion „flush()“, mit der Sie einen Teil der vorbereiteten HTML-Antwort an den Browser senden können, sodass der Browser mit dem Abrufen der Komponenten beginnen kann, während der verbleibende Teil im Hintergrund vorbereitet wird im sehr geschäftigen Hintergrund oder im sehr hellen Frontend (PS Mit anderen Worten: Der Vorteil kommt am besten zum Ausdruck, wenn die Reaktionszeit hauptsächlich im Hintergrund liegt).
Der ideale Ort zum Löschen des Puffers ist nach dem HEAD, da der HEAD-Teil des HTML-Codes normalerweise einfacher zu generieren ist und die Einführung beliebiger CSS- und JavaScript-Dateien ermöglicht, sodass der Browser parallel mit dem Abrufen von Komponenten beginnen kann, während der Hintergrund noch verarbeitet wird .
Zum Beispiel:
... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->34. Verwenden Sie ein CDN (Content Delivery Network)
Auch die physische Entfernung des Benutzers vom Server hat Einfluss auf die Antwortzeit. Durch die Bereitstellung von Inhalten auf mehreren geografisch verteilten Servern können Benutzer Seiten schneller laden. Aber wie geht das?
Der erste Schritt zum Erreichen geografisch verteilter Inhalte ist: Versuchen Sie nicht, Ihre Webanwendung 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 80 bis 90 % der Reaktionszeit eines Endbenutzers für das Herunterladen von Seitenkomponenten aufgewendet werden: Bilder, Stile, Skripte, Flash usw. Dies ist eine goldene Regel für die 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 Demonstration des Beitrags des CDN.
Ein Content Delivery Network (CDN) ist eine Gruppe von Webservern, die an verschiedenen geografischen Standorten verteilt sind, um den Benutzern Inhalte effizienter bereitzustellen. Typischerweise basiert die Wahl des für die Bereitstellung von Inhalten ausgewählten Servers auf einem Maß für die Netzwerkentfernung. Beispiel: Wählen Sie den Server mit der geringsten Anzahl an Hops oder der schnellsten Antwortzeit.
35. Fügen Sie den HTTP-Header „Expires“ oder „Cache-Control“ hinzuDiese Regel hat zwei Aspekte:
Das Webdesign wird immer umfangreicher, was bedeutet, dass die Seite mehr Skripte, Bilder und Flash enthält. Neue Besucher der Website müssen möglicherweise noch einige HTTP-Anfragen senden, aber durch die Verwendung eines Ablaufdatums wird die Komponente zwischenspeicherbar, wodurch unnötige HTTP-Anfragen bei nachfolgenden Browsersitzungen vermieden werden. Ablauf-HTTP-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, sodass Seiten schneller geladen werden. Der Webserver verwendet den Expiration-HTTP-Antwortheader, um dem Client mitzuteilen, wie lange jede Komponente der Seite zwischengespeichert werden soll. Durch die Verwendung einer Zeit in ferner Zukunft als Ablaufdatum wird dem Browser mitgeteilt, dass sich diese Antwort vor dem 15. April 2010 nicht ändern wird.
Gültig bis: Do, 15. April 2010, 20:00:00 GMT
Wenn Sie den Apache-Server verwenden, verwenden Sie die ExpiresDefault-Direktive, um das Ablaufdatum relativ zum aktuellen Datum festzulegen. Das folgende Beispiel legt einen Gültigkeitszeitraum von 10 Jahren ab dem Anforderungszeitpunkt fest:
Läuft ab: Standardzugriff plus 10 Jahre
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.