So optimieren Sie die Webseitenleistung

Das Frontend ist riesig und umfasst HTML, CSS, Javascript, Bild, Flash und andere verschiedene Ressourcen. Die Frontend-Optimierung ist komplex und es gibt unterschiedliche Methoden für alle Aspekte der Ressourcen. Was ist also der Zweck der Front-End-Optimierung?

　1. Aus Benutzersicht kann die Optimierung dazu führen, dass Seiten schneller geladen werden, schneller auf Benutzervorgänge reagiert wird und den Benutzern ein benutzerfreundlicheres Erlebnis geboten wird.
　2. Aus Sicht des Dienstanbieters kann die Optimierung die Anzahl der Seitenanfragen reduzieren oder die von Anfragen belegte Bandbreite reduzieren, wodurch erhebliche Ressourcen eingespart werden können.
Kurz gesagt, eine ordnungsgemäße Optimierung kann nicht nur das Benutzererlebnis der Website verbessern, sondern auch eine erhebliche Ressourcenauslastung einsparen.
Es gibt viele Möglichkeiten, das Front-End zu optimieren, die je nach Granularität grob in zwei Kategorien unterteilt werden können. Die erste Kategorie ist die Optimierung auf Seitenebene, z. B. die Anzahl der HTTP-Anfragen und das nicht blockierende Laden von Skripten , Positionsoptimierung von Inline-Skripten usw.; die zweite Kategorie ist die Optimierung auf Codeebene, wie z. B. DOM-Operationsoptimierung in Javascript, CSS-Selektoroptimierung, Bildoptimierung, HTML-Strukturoptimierung usw. Darüber hinaus werden mit dem Ziel, das Input-Output-Verhältnis zu verbessern, die verschiedenen später erwähnten Optimierungsstrategien grob in der Reihenfolge vom großen zum kleinen Input-Output-Verhältnis angeordnet.
1. Optimierung auf Seitenebene
1. Reduzieren Sie die Anzahl der HTTP-Anfragen
Diese Strategie ist grundsätzlich allen Frontend-Leuten bekannt und auch die wichtigste und effektivste. Man sagt, dass HTTP-Anfragen reduziert werden sollten, aber was passiert, wenn es zu viele Anfragen gibt? Erstens verursacht jede Anfrage Kosten, einschließlich Zeit- und Ressourcenkosten. Eine vollständige Anfrage erfordert einen „langen“ und komplizierten Prozess der DNS-Adressierung, des Herstellens einer Verbindung mit dem Server, des Sendens von Daten, des Wartens auf die Antwort des Servers und des Empfangens von Daten. Der Zeitaufwand besteht darin, dass Benutzer warten müssen, bis der Prozess beendet ist, um die Ressource zu sehen oder zu „fühlen“. Da jede Anforderung an die Ressource Daten übertragen muss, ist Bandbreite erforderlich. Da es außerdem eine Obergrenze für die Anzahl gleichzeitiger Anfragen gibt, die der Browser stellen kann (Einzelheiten finden Sie hier), muss der Browser bei steigender Anzahl von Anfragen Anfragen in Stapeln stellen, was die Wartezeit des Benutzers verlängert und den Eindruck einer langsamen Geschwindigkeit erwecken, dass der Fortschrittsbalken des Browsers immer vorhanden ist, selbst wenn alle Ressourcen auf dem ersten Bildschirm, die der Benutzer sehen kann, angefordert wurden.
Zu den wichtigsten Möglichkeiten, die Anzahl der HTTP-Anfragen zu reduzieren, gehören:
(1) Vereinfachen Sie die Seite auf der Design- und Implementierungsebene.
Wenn Ihre Seite so einfach ist wie die Homepage von Baidu, gelten im Wesentlichen die folgenden Regeln unnötig. Am einfachsten ist es, die Seite einfach zu halten und den Ressourcenverbrauch zu reduzieren. Wenn nicht und Ihre Seite einen wunderschönen Skin benötigt, lesen Sie weiter unten.
　(2). Richtig eingestellter HTTP-Cache
Die Leistung des Caches ist leistungsstark und die richtigen Cache-Einstellungen können HTTP-Anfragen erheblich reduzieren. Wenn der Browser die Homepage von Youa als Beispiel nicht zwischenspeichert, werden insgesamt 78 Anfragen mit insgesamt mehr als 600.000 Daten ausgegeben (wie in Abbildung 1.1 dargestellt). Hat es zwischengespeichert, gibt es nur 10 Anfragen mit insgesamt mehr als 20.000 Daten (Abbildung 1.2). (Hier ist zu beachten, dass der Effekt anders ausfällt, wenn Sie die Seite direkt mit F5 aktualisieren. In diesem Fall ist die Anzahl der Anfragen immer noch gleich, aber der Anfrageserver für die zwischengespeicherte Ressource ist eine 304-Antwort. Nur die Der Header hat keinen Body, wodurch Bandbreite gespart werden kann.
Was ist eine sinnvolle Einstellung? Das Prinzip ist ganz einfach: Je mehr Sie zwischenspeichern können, desto besser. Beispielsweise können Bildressourcen, die sich selten ändern, direkt über Expires im HTTP-Header einen Header mit langem Ablauf festlegen. Ressourcen, die sich selten ändern, können jedoch „Last-Modifed“ zur Anforderungsüberprüfung verwenden. Behalten Sie Ressourcen so lange wie möglich im Cache. Die spezifischen Einstellungen und Prinzipien des HTTP-Cachings werden hier nicht im Detail beschrieben. Interessierte können sich auf die folgenden Artikel beziehen:
Beschreibung der Caching-Strategien im HTTP1.1-Protokoll
Fiddler HTTP Leistung Einführung in das Caching in
(3). Zusammenführen und Komprimieren von Ressourcen
Wenn möglich, führen Sie externe Skripte und Stile so weit wie möglich zusammen und führen Sie mehrere zu einem zusammen. Darüber hinaus können CSS, Javascript und Bilder mit entsprechenden Tools komprimiert werden. Nach der Komprimierung kann häufig viel Platz gespart werden.
　(4). CSS-Sprites
　 Das Zusammenführen von CSS-Bildern ist eine weitere gute Möglichkeit, die Anzahl der Anfragen zu reduzieren.
　(5). Inline-Bilder
　Daten verwenden: Das URL-Schema wird zum Einbetten von Bildern in Seiten oder CSS verwendet. Dies ist eine gute Methode, wenn Ressourcenverwaltungsprobleme nicht berücksichtigt werden. Wenn es in die Seite eingebettet ist, wird die Seite vergrößert und der Browser-Cache kann nicht verwendet werden. In CSS verwendete Bilder sind idealer.
　(6). Lazy Load Images (Ich verstehe den Inhalt dieses Abschnitts immer noch nicht)
Diese Strategie reduziert möglicherweise nicht wirklich die Anzahl der HTTP-Anfragen, kann aber unter bestimmten Bedingungen oder wenn die Seite gerade geladen wird, die Anzahl der HTTP-Anfragen reduzieren. Bei Bildern können Sie nur den ersten Bildschirm laden, wenn die Seite gerade geladen wird, und nachfolgende Bilder nur laden, wenn der Benutzer weiter zurückscrollt. Wenn sich der Benutzer auf diese Weise nur für den Inhalt des ersten Bildschirms interessiert, werden die restlichen Bildanfragen gespeichert. Ja Startseite Der bisherige Ansatz bestand darin, die Bildadressen nach dem ersten Bildschirm beim Laden im Textarea-Tag zwischenzuspeichern und sie dann „träge“ zu laden, wenn der Benutzer nach unten scrollt.

2. Platzieren Sie das externe Skript unten (laden Sie den Skriptinhalt, nachdem die Seiteninformationen geladen wurden).
Wie bereits erwähnt, kann der Browser gleichzeitig Anfragen stellen, was das Laden externer Ressourcen beschleunigt Link-Skripte blockieren beim Laden andere Ressourcen. Beispielsweise werden die Bilder, Stile und anderen Skripte dahinter blockiert und der Ladevorgang wird erst gestartet, wenn das Skript geladen ist. Wenn das Skript an einer relativ hohen Position platziert wird, wirkt sich dies auf die Ladegeschwindigkeit der gesamten Seite und somit auf das Benutzererlebnis aus. Es gibt viele Möglichkeiten, dieses Problem zu lösen Hier ist eine detailliertere Einführung (Hier ist die Übersetzung und Detailliertere Beispiele ), und die einfachste und zuverlässigste Methode besteht darin, das Skript so weit wie möglich nach hinten zu verschieben, um die Auswirkungen auf gleichzeitige Downloads zu reduzieren.
3. Führen Sie Inline-Skripte asynchron aus (tatsächlich ist das Prinzip dasselbe wie oben, um sicherzustellen, dass das Skript nach dem Seiteninhalt geladen wird.)
Die Auswirkungen von Inline-Skripten auf die Leistung sind noch schlimmer als die von externen Skripte. Wie externe Skripte blockieren Inline-Skripte auch gleichzeitige Anforderungen, wenn sie ausgeführt werden. Da der Browser außerdem Single-Threaded in der Seitenverarbeitung ist, wird die Seitenrendering-Arbeit verschoben, wenn das Inline-Skript ausgeführt wird, bevor die Seite gerendert wird . Kurz gesagt: Wenn das Inline-Skript ausgeführt wird, ist die Seite leer. Aus den beiden oben genannten Gründen wird empfohlen, Inline-Skripte asynchron auszuführen, deren Ausführung lange dauert. Es gibt viele asynchrone Methoden, z. B. die Verwendung des Defer-Attributs des Skriptelements (es gibt Kompatibilitätsprobleme und andere Probleme, z da document.write nicht verwendet werden kann), verwenden Sie setTimeout , zusätzlich in HTML5 eingeführt Der Mechanismus der Web Worker kann genau diese Art von Problem lösen.

　4. Lazy Load Javascript (Wird nur bei Bedarf geladen, Informationsinhalte werden unter normalen Umständen nicht geladen.)
Mit der Popularität von Javascript-Frameworks verwenden immer mehr Websites diesen Frame. Ein Framework enthält jedoch häufig viele funktionale Implementierungen, die nicht von jeder Seite benötigt werden. Das Herunterladen unnötiger Skripte ist eine Verschwendung von Ressourcen und verschwendet sowohl Bandbreite als auch Ausführungszeit. Derzeit gibt es zwei Ansätze, eine spezielle Mini-Version des Frameworks für Seiten mit besonders hohem Datenverkehr anzupassen, und der andere ist Lazy Load. YUI verwendet die zweite Methode. Bei der Implementierung von YUI wird zunächst nur das Kernmodul geladen, und andere Module können warten, bis sie benötigt werden.

5. Platzieren Sie CSS in HEAD
Wenn Sie CSS an anderen Stellen wie BODY platzieren, beginnt der Browser möglicherweise mit dem Rendern der Seite, bevor er das CSS herunterlädt und analysiert, was dazu führt, dass die Seite vom CSS springt. less-Status auf den CSS-Status um, was zu einer schlechten Benutzererfahrung führt. Darüber hinaus beginnen einige Browser erst mit dem Rendern der Seite, nachdem das CSS heruntergeladen wurde. Wenn das CSS an einer niedrigeren Position platziert wird, verzögert der Browser die Renderzeit.
6. Asynchroner Anforderungsrückruf (dh Extrahieren einiger Verhaltensstile und langsames Laden des Informationsinhalts)
Auf einigen Seiten kann es erforderlich sein, Skript-Tags zu verwenden, um Daten asynchron anzufordern. Ähnlich:
Javascript:
/*Callback-Funktion*/
function myCallback(info){
//hier etwas tun
}
HTML:

Von cb zurückgegebener Inhalt:
myCallback('Hello world!');
Das direkte Schreiben von 7. Reduzieren Sie unnötige HTTP-Sprünge.
Bei HTTP-Links, auf die in Verzeichnisform zugegriffen wird, ignorieren viele Leute, ob der Link ein „/“ am Ende hat. Wenn Ihr Server dies anders behandelt, sollten Sie dies auch tun Beachten Sie, dass es möglicherweise versteckte 301-Sprünge und redundante Anforderungen gibt. Einzelheiten finden Sie in der Abbildung unten. Auf den ersten Link wird ohne die Endung „/“ zugegriffen, sodass der Server einen Sprung hat.
8. Vermeiden Sie wiederholte Ressourcenanforderungen
Diese Situation ist hauptsächlich auf Nachlässigkeit zurückzuführen oder die Seite ist in mehrere Module aufgeteilt. Wenn dann in jedem Modul dieselbe Ressource angefordert wird, führt dies zu wiederholten Ressourcenanforderungen

　2. Optimierung auf Codeebene
　1. Javascript
　(1). DOM-Vorgänge sollten die leistungsintensivsten Vorgänge in Skripten sein, wie z. B. das Hinzufügen, Ändern und Löschen von DOM-Elementen oder Ändern von DOM-Sammlungen, die bearbeitet werden sollen. Wenn das Skript eine große Anzahl von DOM-Operationen enthält, müssen Sie auf die folgenden Punkte achten:
a. HTML-Sammlung (HTML-Sammler, gibt eine Array-Inhaltsinformation zurück)
Im Skript document.images, Dokument. Formulare: getElementsByTagName() gibt eine Sammlung vom Typ HTMLCollection zurück. Im täglichen Gebrauch wird es meist als Array verwendet, da es über ein Längenattribut verfügt und auf jedes Element auch über einen Index zugegriffen werden kann. Die Zugriffsleistung ist jedoch viel schlechter als die eines Arrays. Der Grund dafür ist, dass diese Sammlung kein statisches Ergebnis darstellt. Bei jedem Zugriff auf die Sammlung wird die Abfrage erneut ausgeführt Abfrageergebnisse. Der sogenannte „Zugriff auf eine Sammlung“ umfasst das Lesen der Längeneigenschaft der Sammlung und den Zugriff auf die Elemente in der Sammlung.
Wenn Sie die HTML-Sammlung durchlaufen müssen, versuchen Sie daher, sie vor dem Zugriff in ein Array zu konvertieren, um die Leistung zu verbessern. Auch wenn es nicht in ein Array konvertiert wird, greifen Sie bitte so wenig wie möglich darauf zu. Beim Durchlaufen können Sie beispielsweise das Längenattribut und die Mitglieder in lokalen Variablen speichern und dann die lokalen Variablen verwenden.
b. Reflow & Repaint
Zusätzlich zum oben genannten Punkt müssen DOM-Vorgänge auch Reflow und Repaint des Browsers berücksichtigen, da diese Ressourcen verbrauchen. Weitere Informationen finden Sie im folgenden Artikel:
Anleitung Browser-Repaint und Reflow reduzieren?
Internet Explorer verstehen Rendering-Verhalten

Hinweise zum HTML-Reflow

　(2). Verwenden Sie with
with(obj){ p = 1}; mit Vorsicht. Das Verhalten des Codeblocks ändert sich tatsächlich. Ausführungsumgebung Wenn Sie auf nicht-lokale Variablen im with-Codeblock zugreifen, wird bei obj nach oben gesucht. Daher ist die Verwendung von with gleichbedeutend mit dem Erhöhen die Länge der Scope-Kette. Jede Suche nach einer Bereichskette nimmt Zeit in Anspruch, und eine zu lange Bereichskette führt zu einer Verschlechterung der Suchleistung.
Sofern Sie nicht sicher sind, dass Sie nur auf die Attribute in obj im with-Code zugreifen, verwenden Sie with mit Vorsicht. Stattdessen können Sie lokale Variablen verwenden, um die Attribute zwischenzuspeichern, auf die zugegriffen werden muss.
　(3). Vermeiden Sie die Verwendung von eval und Function
　Jedes Mal, wenn der eval- oder Funktionskonstruktor auf den durch eine Zeichenfolge dargestellten Quellcode einwirkt, muss die Skript-Engine den Quellcode in ausführbaren Code konvertieren. Dies ist ein sehr ressourcenintensiver Vorgang – oft mehr als 100-mal langsamer als ein einfacher Funktionsaufruf.
Die eval-Funktion ist besonders ineffizient, da der Inhalt der an eval übergebenen Zeichenfolge nicht im Voraus bekannt ist. Daher interpretiert eval den zu verarbeitenden Code in seinem Kontext. Dies bedeutet, dass der Compiler den Kontext nicht optimieren kann Zur Laufzeit wird nur Code interpretiert. Dies hat große Auswirkungen auf die Leistung.
Der Funktionskonstruktor ist etwas besser als eval, da die Verwendung dieses Codes keine Auswirkungen auf den umgebenden Code hat, aber dennoch langsam ist.
Darüber hinaus ist die Verwendung von eval und Function für die Komprimierung durch Javascript-Komprimierungstools nicht förderlich.
(4). Bereichskettensuche reduzieren (dieser Aspekt soll einige inhaltsbezogene Probleme beheben)
Der vorherige Artikel befasste sich mit dem Problem der Bereichskettensuche, einem Problem, das in Schleifen besondere Aufmerksamkeit erfordert. Wenn Sie in einer Schleife auf eine Variable außerhalb dieses Bereichs zugreifen müssen, speichern Sie die Variable vor dem Durchlaufen mit einer lokalen Variablen und schreiben Sie diese Variable nach dem Durchlaufen neu. Dies ist besonders wichtig für globale Variablen, da sich globale Variablen im Gültigkeitsbereich befinden An der Spitze der Kette werden während des Zugriffs die meisten Suchanfragen durchgeführt.
Ineffizientes Schreiben:
// Globale Variable
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
/ /Jedes Mal, wenn Sie auf globalVar zugreifen, müssen Sie die Spitze der Bereichskette finden. In diesem Beispiel müssen Sie 100.000 Mal zugreifen
globalVar += i;
}
}
Effizienteres Schreiben :
//Globale Variable
var globalVar = 1;
function myCallback(info){
//Lokaler Variablencache globale Variable
var localVar = globalVar; = 100000; i--;){
//Der Zugriff auf lokale Variablen ist am schnellsten
localVar += i;
}
//In diesem Beispiel muss nur zweimal auf globale Variablen zugegriffen werden
in der Funktion müssen Sie nur den Wert des Inhalts in globalVar zu localVar im mittleren Bereich zuweisen
globalVar = localVar; die Verwendung von Verschlüssen.
　(5).Der Datenzugriff in Javascript umfasst direkte Mengen (Strings, reguläre Ausdrücke), Variablen, Objekteigenschaften und Arrays, wobei der Zugriff auf direkte Mengen und lokale Variablen der schnellste ist und Arrays erfordern einen größeren Overhead. Es wird empfohlen, Daten in lokalen Variablen abzulegen, wenn die folgenden Situationen auftreten:
a. Mehr als ein Mal auf eine Objekteigenschaft zugreifen Darüber hinaus sollte die Tiefensuche nach Objekten und Arrays so weit wie möglich reduzieren.
　(6). String-Spleißen
Es ist relativ ineffizient, das „+“-Zeichen zum Spleißen von Zeichenfolgen in Javascript zu verwenden, da bei jedem Lauf neuer Speicher geöffnet und neue String-Variablen generiert werden Das Spleißergebnis wird zugewiesen zu einer neuen Variablen. Ein effizienterer Ansatz besteht darin, die Join-Methode des Arrays zu verwenden, dh die zu verbindenden Zeichenfolgen in das Array einzufügen und schließlich die Join-Methode aufzurufen, um das Ergebnis zu erhalten. Da die Verwendung von Arrays jedoch auch einen gewissen Overhead mit sich bringt, können Sie die Verwendung dieser Methode in Betracht ziehen, wenn viele Zeichenfolgen gespleißt werden müssen.

Eine ausführlichere Einführung in die Javascript-Optimierung finden Sie unter:
Write Efficient Javascript (PPT)

Efficient JavaScript

　2. CSS-Selektoren In den Augen der meisten Menschen analysieren Browser CSS-Selektoren von links nach rechts, wie z. Die Effizienz wird sehr hoch sein, da die erste ID-Auswahl grundsätzlich den Suchbereich einschränkt, der Browser den Selektor jedoch tatsächlich von rechts nach links analysiert. Wie beim obigen Selektor muss der Browser durchlaufen, um die Vorfahrenknoten jedes A-Tags zu finden, und die Effizienz ist nicht so hoch wie bisher angenommen. Gemäß diesem Verhaltensmerkmal des Browsers müssen beim Schreiben von Selektoren viele Dinge beachtet werden. Jemand hat sie bereits einzeln aufgelistet. Einzelheiten finden Sie hier
.
　3. HTML
Die Optimierung von HTML selbst erregt mittlerweile immer mehr Aufmerksamkeit. Weitere Informationen finden Sie in diesem Artikel Zusammenfassender Artikel

.

　4. Bildkomprimierung
　Bildkomprimierung ist eine technische Aktivität, aber heutzutage gibt es viele Tools in diesem Bereich, die häufig gute Ergebnisse bringen. Die spezifischen Komprimierungsprinzipien und -methoden finden Sie in Kapitel 10 „Noch schnellere Websites“. Es gibt eine sehr ausführliche Einführung. Wenn Sie interessiert sind, können Sie sie lesen.
Zusammenfassung
Dieser Artikel fasst die verschiedenen Methoden der Front-End-Optimierung aus den beiden Granularitäten Seitenebene und Codeebene zusammen. Diese Methoden sind im Wesentlichen das, was Front-End-Entwickler während des Entwicklungsprozesses lernen und üben können, außer In Darüber hinaus sollte die vollständige Front-End-Optimierung auch viele andere Möglichkeiten umfassen, wie z. B. CDN, Gzip, mehrere Domänennamen, Server ohne Cookies usw. Da die Bedienbarkeit für Entwickler nicht gut ist, werde ich sie hier nicht im Detail beschreiben Bitte beachten Sie diese „goldenen Regeln“ von Yahoo und Google

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die Webseitenleistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!