Startseite>Webdesign-Tutorial>HTML-Tutorial

Eine kurze Diskussion über die grundlegenden Regeln zur Leistungsoptimierung von Webseiten

Autor：Eve Cole Aktualisierungszeit：2025-03-12 06:32:01

Einige Optimierungsregeln für Browser-Webseiten

Seitenoptimierung

Statische Ressourcenkomprimierung

Verwenden Sie Konstruktionstools (Webpack, Gulp), um statische Webseitenressourcen wie Bilder, Skripte und Stile entsprechend zu komprimieren.

CSS-Sprite-Bilder, Base64-Inline-Bilder

Führen Sie die kleinen Symbole auf der Website zu einem Bild zusammen, verwenden Sie CSS, um die entsprechenden Symbole entsprechend zu positionieren und abzufangen.

Stile oben und Skripte unten

Bei der Seite handelt es sich um einen schrittweisen Rendering-Prozess. Wenn Sie den Stil oben anbringen, kann die Seite dem Benutzer schneller angezeigt werden. Wenn Sie das Tag <script> oben anbringen, wird das Herunterladen von Ressourcen hinter der Seite blockiert.

Verwenden Sie CSS und JS für externe Links

Mehrere Seiten verweisen auf öffentliche statische Ressourcen und die Wiederverwendung von Ressourcen reduziert zusätzliche http-Anfragen.

Vermeiden Sie Bilder mit leerem Quellcode

Vermeiden Sie unnötige http-Anfragen. 

 <!-- Bilder mit leerem src initiieren weiterhin http-Anfragen--><img src= style="margin: 0px; padding: 0px; Gliederung: keine; Zeilenhöhe: 25,2px; Schriftgröße: 14px; Breite: 660px; Überlauf: versteckt; klar: beide Schriftarten: Tahoma, Arial, Microsoft YaHei; 
 <!-- Die tatsächliche Bildgröße beträgt 600 x 300, was in HTML auf 200 x 100 skaliert wird --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; Umriss: keine; Zeilenhöhe: 25,2 Pixel; Breite: 660 Pixel; versteckt; klar: beide; Schriftfamilie: Tahoma, Arial, Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokument</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
 Im Beispiel sind CSS- und JS-Dateien vorinstalliert und werden sofort aufgerufen, sobald sie in nachfolgenden Seitenrenderings verwendet werden.
 Sie können den Typ angeben, um verschiedene Arten von Ressourcen zu laden. 
  1.  Stil
  2.  Skript
  3.  Video
  4.  Audio-
  5.  Bild
  6.  Schriftart
  7.  dokumentieren
  8.  ...
 Mit dieser Methode können Ressourcen auch domänenübergreifend vorab geladen werden, indem das Attribut „crossorigin“ festgelegt wird. 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>
 CSS
 Wähler
 Die Priorität der Selektoren von hoch nach niedrig ist: 
  1.  ID-Auswahl
  2.  Klassenselektor
  3.  Tag-Selektor
  4.  angrenzender Selektor 
 h1 + p{ margin-top: 15px }
 Wählt den Absatz aus, der unmittelbar nach dem h1-Element erscheint. Die h1- und p-Elemente haben ein gemeinsames übergeordnetes Element.
 Kinderauswahl 
 h1 > stark {Farbe:rot;}
 Nachkommenselektor 
 h1 em {Farbe:rot;}
 Wildcard-Selektor
 Attributselektor 
 *[title] {color:red;}img[alt] {border: 5px solid red;}
 Pseudo-Klassenselektor
 Erfahrungen mit der Selektornutzung: 
  1.  Priorisieren Sie Klassenselektoren, die mehrschichtige Etikettenselektoren ersetzen können.
  2.  Verwenden Sie den ID-Selektor mit Vorsicht. Obwohl er effizient ist, ist er auf der Seite eindeutig und nicht förderlich für die Teamzusammenarbeit und -wartung.
  3.  Nutzen Sie die Selektorvererbung sinnvoll.
  4.  Vermeiden Sie CSS-Ausdrücke.
 Reduzieren Sie die Auswahlebene
 Basierend auf der Priorität des vorherigen Selektors sollten Sie versuchen, mehrere Ebenen der Selektorverschachtelung zu vermeiden, vorzugsweise nicht mehr als drei Ebenen. 
 .container .text .logo{ color: red }/*Ändern zu*/.container .text-logo{ color: red }
 Optimieren Sie Seitenstildateien und entfernen Sie nicht verwendete Stile
 Der Browser führt einen redundanten Stilabgleich durch, was sich auf die Renderzeit auswirkt. Darüber hinaus beeinträchtigen zu große Stildateien auch die Ladegeschwindigkeit.
 Verwenden Sie CSS-Vererbung, um die Codegröße zu reduzieren
 Mithilfe der vererbbaren Eigenschaften von CSS legt das übergeordnete Element den Stil fest, und die untergeordneten Elemente müssen ihn nicht erneut festlegen.
 Zu den allgemeinen vererbbaren Attributen gehören: Farbe, Schriftgröße, Schriftfamilie usw.; zu den nicht vererbbaren Attributen gehören: Position, Anzeige, Gleitkomma usw.
 Wenn der Attributwert 0 ist, wird keine Einheit hinzugefügt.
 Wenn der CSS-Attributwert 0 ist, kann keine Einheit hinzugefügt werden, um die Codemenge zu reduzieren. 
 .text{ width: 0px; height: 0px;
 JavaScript
 Verwenden Sie die Ereignisdelegation
 Verwenden Sie die Ereignisdelegierung, um Ereignisse an mehrere ähnliche DOM-Elemente zu binden. 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // Unvernünftiger Weg: Klickereignis an jedes Element binden $('#container .list').on('click', function() { var text = $(this).text(); console. log(text); });//Ereignisdelegationsmethode: Verwenden Sie den Ereignis-Bubbling-Mechanismus, um Ereignisse an das übergeordnete Element zu delegieren $('#container').on('click', '.list', function() { var text = $(this ).Text(); console.log(text);
 Es ist zu beachten, dass das Ereignis bei Verwendung der Ereignisdelegierung zwar an das Dokument delegiert werden kann, dies jedoch unangemessen ist. Zum einen führt es leicht zu einer Fehleinschätzung des Ereignisses und zum anderen ist die Sucheffizienz der Bereichskette gering. Als Delegat sollte das nächstgelegene übergeordnete Element ausgewählt werden.
 Neben einer besseren Leistung entfällt durch die Verwendung der Ereignisdelegierung auch die Notwendigkeit, Ereignisse an dynamisch erstellte DOM-Elemente zu binden.
 DOMContentLoaded
 Sie können mit der Verarbeitung des DOM-Baums beginnen, nachdem die DOM-Elemente geladen wurden (DOMContentLoaded), anstatt zu warten, bis alle Bildressourcen heruntergeladen sind. 
 // Natives Javascript document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM vollständig geladen und analysiert);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// Vereinfachte Version von $(document).ready()$(function() { console.log(ready!);});
 Vorladen und verzögertes Laden
 Vorspannung
 Nutzen Sie die Leerlaufzeit des Browsers, um Ressourcen vorab zu laden, die möglicherweise in Zukunft verwendet werden, z. B. Bilder, Stile und Skripte.
 Bedingungslose Vorspannung
 Sobald Onload ausgelöst wird, werden in Zukunft benötigte Ressourcen sofort abgerufen.
 Bildressourcen sind vorinstalliert. (3 Möglichkeiten, das Vorladen von Bildern zu implementieren).
 Vorladen basierend auf dem Benutzerverhalten
 Beurteilen Sie die möglichen Vorgänge des Benutzerverhaltens und laden Sie Ressourcen vor, die möglicherweise in Zukunft benötigt werden. 
  1.  Wenn der Benutzer in das Sucheingabefeld eingibt, werden Ressourcen, die auf der Suchergebnisseite verwendet werden können, vorab geladen;
  2.  Wenn der Benutzer einen Tab bedient, wird standardmäßig einer davon angezeigt. Wenn er auf andere Optionen klickt, können die Ressourcen, die in Zukunft verwendet werden, zuerst geladen werden, wenn er mit der Maus darüber fährt.
 Faules Laden
 Mit Ausnahme des Inhalts oder der Komponenten, die für die Seiteninitialisierung erforderlich sind, kann alles andere träge geladen werden, z. B. js-Bibliotheken, die Bilder ausschneiden, Bilder, die nicht im sichtbaren Bereich liegen usw.
 Bilder werden verzögert geladen. (Bestimmen Sie, ob sich das Bild im sichtbaren Bereich befindet. Wenn ja, weisen Sie dem Bild den tatsächlichen Pfad zu.)
 Vermeiden Sie eine globale Suche
 Jede nicht-lokale Variable, die mehr als einmal in einer Funktion verwendet wird, sollte als lokale Variable gespeichert werden. 
 function updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg); msg.innerHTML = Aktualisierung abgeschlossen.;}
 Die globale Variable document wird in der obigen Funktion häufig verwendet, insbesondere in der for-Schleife. Daher ist es eine bessere Lösung, globale Dokumentvariablen als lokale Variablen zu speichern und sie dann zu verwenden. 
 function updateUI(){ var doc = document; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + image + i; } var msg = doc.getElementById(msg); msg.innerHTML = Update abgeschlossen.;}
 Beachten Sie, dass im JavaScript-Code jede Variable, die nicht mit var deklariert wird, zu einer globalen Variablen wird und eine unsachgemäße Verwendung zu Leistungsproblemen führt.
 Vermeiden Sie unnötige Attributabfragen
 Die Verwendung von Variablen und Arrays ist effizienter als der Zugriff auf Eigenschaften eines Objekts, da das Objekt die Prototypenkette nach einer Eigenschaft mit diesem Namen durchsuchen muss. 
 //Verwenden Sie Array-Var-Werte = [5, 10];Var-Summe = Werte[0] + Werte[1];alert(Summe);//Verwenden Sie Objekt-Var-Werte = { erster: 5, zweiter: 10 };var sum = Values.first + Values.second;alert(sum);
 Im obigen Code werden Objekteigenschaften zur Berechnung verwendet. Das ein- oder zweimalige Durchsuchen von Eigenschaften verursacht keine Leistungsprobleme. Wenn jedoch mehrere Suchvorgänge erforderlich sind, beispielsweise in einer Schleife, wird die Leistung beeinträchtigt.
 Wenn Sie nach mehreren Attributen suchen, um einen einzelnen Wert zu erhalten, wie zum Beispiel: 
 var query = window.location.href.substring(window.location.href.indexOf(?));
 Unnötige Attributsuchen sollten reduziert werden und window.location.href sollte als Variable zwischengespeichert werden. 
 var url = window.location.href;var query = url.substring(url.indexOf(?));
 Funktionsdrosselung
 Angenommen, es gibt ein Suchfeld, binden Sie das Ereignis onkeyup an das Suchfeld, sodass jedes Mal, wenn die Maus bewegt wird, eine Anfrage gesendet wird. Durch den Einsatz von Drosselungsfunktionen kann sichergestellt werden, dass mehrere aufeinanderfolgende Operationen des Benutzers innerhalb einer vorgegebenen Eingabezeit nur eine Anfrage auslösen. 
 <Eingabetyp=Text-ID=Eingabewert= /> 
 // Ereignis binden document.getElementById('input').addEventListener('keyup', function() {drossel(search);}, false);// Logikfunktion function search() { console.log('search. . .');}// Drosselfunktion function damper(method, context) { clearTimeout(method.tId = setTimeout(function() { method.call(context); }, 300);}
 Die Einsatzszenarien der Drosselungsfunktion sind nicht auf das Suchfeld beschränkt. Beispielsweise sollte die Drosselungsfunktion zur Verbesserung der Leistung verwendet werden.
 Minimieren Sie die Anzahl der Anweisungen
 Die Anzahl der Anweisungen ist ebenfalls ein Faktor, der die Geschwindigkeit der Operationsausführung beeinflusst.
 Kombinieren Sie mehrere Variablendeklarationen zu einer Variablendeklaration 
 // Mehrere var-Deklarationen verwenden var count = 5; var value = [1,2,3]; // Nach der Verbesserung, var count = 5, color = blue , Werte = [1,2,3], jetzt = neues Datum();
 Eine verbesserte Version besteht darin, nur eine durch Kommas getrennte Var-Deklaration zu verwenden. Wenn viele Variablen vorhanden sind, ist die Verwendung nur einer Variablendeklaration viel schneller als die separate Deklaration einzelner Variablen.
 Verwendung von Arrays und Objektliteralen
 Verwenden Sie Array- und Objektliterale anstelle einer Anweisung-für-Anweisung-Zuweisung. 
 var-Werte = new Array();values[0] = 123;values[1] = 456;values[2] = 789;//Nach der Verbesserung, var-Werte = [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alarm(this.name);};//Nach der Verbesserung var person = { name : Jack, Alter : 28, sayName : function(){ alarm(this.name }};
 String-Optimierung
 String-Verkettung
 Frühe Browser haben die Art und Weise, Zeichenfolgen mit dem Pluszeichen zu verketten, nicht optimiert. Da Zeichenfolgen unveränderlich sind, bedeutet dies, dass Zwischenzeichenfolgen zum Speichern von Ergebnissen verwendet werden. Daher ist die häufige Erstellung und Zerstörung von Zeichenfolgen der Grund für ihre Ineffizienz. 
 var text = Hallo;text+= ;text+= Welt!;
 Fügen Sie die Zeichenfolge zum Array hinzu und rufen Sie dann die Join-Methode des Arrays auf, um sie in eine Zeichenfolge umzuwandeln, wodurch die Verwendung des Additionsoperators vermieden wird. 
 var arr = [], i = 0;arr[i++] = Hallo;arr[i++] = ;arr[i++] = World!;var text = arr.join('');
 Moderne Browser verfügen über eine optimierte Zeichenfolge-Plus-Zeichen-Verkettung, sodass in den meisten Fällen der Additionsoperator immer noch die erste Wahl ist.
 Reduzieren Sie Reflows und Neuzeichnungen
 Beim Browser-Rendering-Prozess sind Reflow und Redraw beteiligt, ein leistungsintensiver Prozess. Sie sollten darauf achten, die Aktionen zu reduzieren, die Reflow und Redraw während Skriptvorgängen auslösen. 
  1.  Reflow: Die geometrischen Eigenschaften des Elements haben sich geändert und der Rendering-Baum muss neu erstellt werden. Der Vorgang des Änderns des Rendering-Baums wird als Reflow bezeichnet.
  2.  Neu zeichnen: Die geometrische Größe des Elements hat sich nicht geändert, aber der CSS-Stil (Hintergrundfarbe oder Farbe) eines Elements hat sich geändert.
 Welche Vorgänge lösen Reflow oder Redraw aus? 
  1.  Fenstergröße ändern
  2.  Schriftart ändern
  3.  Stylesheets hinzufügen oder entfernen
  4.  Inhaltsänderungen, beispielsweise wenn der Benutzer Text in das Feld <input/> eingibt
  5.  Klassenattribute manipulieren
  6.  Skripte zum Bearbeiten von DOM (Hinzufügen, Löschen oder Ändern von DOM-Elementen)
  7.  Berechnen Sie die Eigenschaften offsetWidth und offsetHeight
  8.  Legen Sie den Wert des Stilattributs fest
 Wie kann man Reflow und Neuzeichnen reduzieren und die Leistung einer Webseite verbessern?
 1. Skriptmanipulation von DOM-Elementen 
  1.  Stellen Sie das DOM-Element auf display:none ein. Während des Einstellungsvorgangs wird ein Reflow ausgelöst. Sie können ihn jedoch später nach Belieben ändern und nach der Änderung anzeigen.
  2.  Klonen Sie das Element vor dem Betrieb in den Speicher und ersetzen Sie das Element nach der Änderung erneut.
 2. Ändern Sie den Stil des Elements 
  1.  Versuchen Sie, Batch-Änderungen vorzunehmen, anstatt sie einzeln zu ändern.
  2.  Legen Sie im Voraus die ID und die Klasse fest und legen Sie dann den Klassennamen des Elements fest.
 3. Wenn Sie einem Element eine Animation hinzufügen, stellen Sie den CSS-Stil des Elements auf position:fixed oder position:absolute ein. Das Element verursacht keinen Reflow, nachdem es den Dokumentfluss verlässt.
 4. Verwenden Sie die Drosselfunktion (bereits oben erwähnt), wenn Sie die Fenstergröße anpassen, Eingaben in das Eingabefeld machen, auf der Seite scrollen usw.
 HTTP
 Browser-Cache
 Die richtige Einstellung des Browser-Cache ist eines der wichtigsten Mittel zur Webseitenoptimierung.
 Ablaufdatum und Cache-Kontrolle
 Expires kommt von HTTP1.0 und Cache-Control kommt von HTTP1.1. Wenn beide gleichzeitig festgelegt sind, überschreibt Cache-Control Expires. 
  1.  Expires gibt das tatsächliche Ablaufdatum und nicht die Anzahl der Sekunden an. Aber Expires hat einige Probleme, wie zum Beispiel, dass die Serverzeit nicht synchronisiert oder ungenau ist. Daher ist es besser, die Ablaufzeit anhand der verbleibenden Sekunden als der absoluten Zeit auszudrücken.
  2.  Cache-Control kann den maximalen Alterswert in Sekunden festlegen und die Cache-Ablaufzeit angeben. Beispiel: Cache-Control: max-age=3600.
 ETag und Last-Modified
 Sowohl ETag als auch Last-Modified werden vom Server in den Antwortheadern zurückgegeben. ETag hat eine höhere Priorität als Last-Modified, was bedeutet, dass der Server den Wert von ETag priorisiert. 
  1.  ETag ist ein beliebiges an das Dokument angehängtes Tag, bei dem es sich um die Seriennummer oder Versionsnummer des Dokuments oder um die Überprüfung des Dokumentinhalts usw. handeln kann. Wenn sich das Dokument ändert, ändert sich auch der ETag-Wert. Mit ETag verwandt ist If-None-Match. Wenn der Browser eine Anfrage initiiert, trägt er den ETag-Wert im Feld If-None-Match und sendet ihn an den Server.
  2.  Last-Modified ist der Zeitpunkt, zu dem das Dokument zuletzt auf der Serverseite geändert wurde. Mit Last-Modified verwandt ist If-Modified-Since. Wenn der Browser eine Anfrage initiiert, trägt er den Wert von Last-Modified im Feld If-Modified-Since und sendet ihn an den Server.
 Starkes Caching und ausgehandeltes Caching
 Die Cache-Typen sind starker Cache und ausgehandelter Cache. Der Unterschied zwischen den beiden besteht darin, dass der starke Cache keine Anfrage an den Server sendet, der ausgehandelte Cache jedoch eine Anfrage sendet. Wenn die Übereinstimmung erfolgreich ist, wird 304 Nicht geändert zurückgegeben. Wenn die Übereinstimmung nicht erfolgreich ist, wird sie zurückgegeben 200; Der Browser überprüft zuerst den starken Cache. Wenn der starke Cache fehlschlägt, führt er eine Verhandlungs-Cache-Überprüfung durch.
 So konfigurieren Sie den Browser-Cache 
  1.  Fügen Sie Expires und Cache-Control zur Rückgabeantwort des Webservers hinzu.
  2.  Konfigurieren Sie Ablauffristen und Cache-Kontrolle in der Nginx- oder Apache-Konfigurationsdatei.
 Warum HTTP-Anfragen reduzieren?
 Maßnahmen zur Reduzierung von HTTP-Anfragen machen einen großen Teil der Leistungsoptimierung aus, wie zum Beispiel: Verwendung von CSS-Sprite-Bildern zum Ersetzen mehrerer Bildanforderungen, Vermeidung leerer SRC-Bilder, Verwendung von Inline-Bildern, Verwendung von CSS und JS für externe Links, Caching usw.
 Der Prozess von der Eingabe der URL bis zum Abschluss des Ladens der Seite umfasst Folgendes: 
  1.  DNS-Auflösung
  2.  TCP-Verbindung
  3.  HTTP-Anfrage und -Antwort
  4.  Der Browser rendert die Seite
  5.  enge Verbindung
 Eine vollständige HTTP-Anfrage muss diese Prozesse durchlaufen, was zeitaufwändig und ressourcenintensiv ist, sodass es notwendig wird, die Anzahl der Anfragen zu reduzieren.
 Referenzen:
 „Erweiterter Leitfaden zum Aufbau leistungsstarker Websites im Vergleich zum Aufbau leistungsstarker Websites“
 „Best Practices zur Beschleunigung Ihrer Website“
 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.
Ähnliche Artikel