HTML-Optimierung beschleunigt Webseiten

Offensichtliches HTML, verstecktes „öffentliches Skript“
Der Schlüssel zur Reduzierung der Downloadzeit von Webseiten liegt darin, Wege zu finden, die Dateigröße zu reduzieren. Wenn mehrere Seiten gemeinsamen Inhalt haben, können Sie eine Trennung dieser gemeinsamen Teile in Erwägung ziehen. Beispielsweise können wir ein von mehreren HTML-Seiten verwendetes Skript in eine unabhängige JS-Datei schreiben und es dann auf der Seite wie folgt aufrufen:
<scriptsrc="meineDatei.js"></script>
So müssen häufig verwendete Dateien nur einmal heruntergeladen werden und wandern dann in den Puffer. Beim nächsten Aufruf der HTML-Seite mit der öffentlichen Datei verkürzt sich die Downloadzeit deutlich.
Stylesheet-Inhalte im Untergrund halten
CSS ist der HTML-Kommode und eine schöne Webseite kann ohne ihn nicht entstehen. Es gibt viele Möglichkeiten, in HTML-Seiten auf CSS zu verweisen, und unterschiedliche Methoden führen zu unterschiedlicher Effizienz. Normalerweise können wir den zwischen <style></style> definierten Stilsteuerungscode extrahieren, ihn in einer separaten CSS-Datei speichern und ihn dann mit dem <LINK>-Tag oder dem @import-Tag auf der HTML-Seite referenzieren:
<Stil>
@importurl("mysheet1.css");
</Stil>
Bitte beachten Sie zwei Punkte: 1. Das Tag <style> muss nicht in die CSS-Datei aufgenommen werden. 2. Die Tags @import und LINK müssen im HEAD-Abschnitt der HTML-Seite definiert werden.
Zwei Möglichkeiten zum Einsparen wertvollen Speicherplatzes <br /> Durch die Minimierung des von HTML-Seiten belegten Speicherplatzes können Sie das Herunterladen von Seiten effektiv beschleunigen. In diesem Zusammenhang müssen zwei Aspekte beachtet werden:
1. Verwenden Sie die gleiche Skriptsprache
HTML-Seiten kommen ohne die Unterstützung von Skriptprogrammen nicht aus. Oft binden wir mehrere Skriptsprachen in die Seiten ein, wie etwa JavaScript und VBScript. Ich frage mich jedoch, ob Ihnen aufgefallen ist, dass diese gemischte Nutzung den Seitenzugriff verlangsamt. Der Grund ist: Um mehrere Skriptcodes zu interpretieren und auszuführen, müssen mehrere Skript-Engines in den Speicher geladen werden. Versuchen Sie daher, zum Schreiben des Codes auf der Seite dieselbe Skriptsprache zu verwenden.
2. Verwenden Sie IFrames
Haben Sie schon einmal das <IFRAME>-Tag verwendet? Das ist eine wunderbare Funktion. Wenn Sie den Inhalt einer zweiten Seite in ein HTML-Dokument einbinden möchten, ist die übliche Methode die Verwendung des <FRAMESET>-Tags. Aber mit <IFRAME> wird alles einfach. Wenn Sie beispielsweise eine Dokumentvorschauseite entwickeln, können Sie links eine Reihe von Themen und rechts ein IFRAME platzieren, das das in der Vorschau anzuzeigende Dokument enthält. Wenn Sie mit der Maus über jeden Themenlink auf der linken Seite fahren, wird rechts ein neues IFRAME erstellt, um eine Vorschau des Dokuments anzuzeigen. Dadurch wird der Code effizienter, es kommt jedoch auch zu einer aufwändigen Verarbeitung und letztendlich zu einer langsamen Geschwindigkeit.
Verwenden Sie nur ein einziges IFRAME. Wenn die Maus auf ein neues Thema zeigt, ändern Sie einfach das SRC-Attribut des IFRAME-Elements. Auf diese Weise bleibt immer nur ein Vorschaudokument im Speicher.
Wählen Sie die besten Positionierungsattribute für die Animation aus . <br /> Wenn Sie täglich im Internet surfen, werden Sie sicherlich viele Animationseffekte sehen. Beispielsweise läuft ein süßes kleines Kaninchen auf der Seite hin und her ... Die Kerntechnologie zum Erreichen dieses Effekts ist die CCS-Positionierung. Normalerweise verwenden wir die Eigenschaften element.style.left und element.style.top, um die grafische Positionierung zu erreichen. Dies führt jedoch zu einigen Problemen: Die linke Eigenschaft gibt eine Zeichenfolge zurück, die die Maßeinheit enthält (z. B. 100px). Um die neuen Positionskoordinaten festzulegen, müssen Sie daher zuerst den String-Rückgabewert verarbeiten und ihn dann wie folgt zuweisen:
dimstringLeft,intLeft
stringLeft=element.stil.left
intLeft=parseInt(ZeichenfolgeLeft)
intLeft=intLeft 10
element.stil.left=intLeft;
Sie müssen das Gefühl haben, dass Sie für so eine kleine Sache einen so komplizierten Code schreiben müssen. Gibt es einen einfacheren Weg? Schauen Sie sich diese 4 Eigenschaften an: posLeft, posTop, posWidth und posHeight, die den Punktwerten der entsprechenden String-Rückgabewerte entsprechen. Ok, schreiben wir den Code mit diesen Eigenschaften neu, um dasselbe wie oben zu erreichen:
element.style.posLeft =10
Kleinerer Code, höhere Geschwindigkeit!
Schleifensteuerung mehrerer Animationen <br /> Wenn es um die Erstellung von Animationseffekten geht, ist natürlich der Einsatz von Timern unverzichtbar. Die übliche Methode besteht darin, window.setTimeout zu verwenden, um Elemente auf der Seite kontinuierlich zu lokalisieren. Müssen wir jedoch mehrere Timer einstellen, wenn auf der Seite mehrere Animationen angezeigt werden sollen? Die Antwort ist Nein! Der Grund ist einfach: Die Timerfunktion verbraucht viele wertvolle Systemressourcen. Wir können aber trotzdem mehrere Animationen auf der Seite steuern; der Trick besteht darin, eine Schleife zu verwenden. In der Schleife wird die Position der entsprechenden Animation entsprechend unterschiedlicher Variablenwerte gesteuert und in der gesamten Schleife wird nur ein Funktionsaufruf window.setTimeout() verwendet.
Sichtbarkeit ist schneller als Anzeige
Durch das Erscheinen und Verschwinden eines Bildes können interessante Effekte erzeugt werden. Dies lässt sich auf zwei Arten erreichen: durch die Verwendung der CSS-Eigenschaft „Sichtbarkeit“ oder der Eigenschaft „Anzeige“. Bei absolut positionierten Elementen haben Anzeige und Sichtbarkeit die gleiche Wirkung. Der Unterschied zwischen beiden besteht darin, dass auf „display:none“ eingestellte Elemente keinen Platz mehr im Dokumentfluss beanspruchen, während auf „visibility:hidden“ eingestellte Elemente weiterhin ihre ursprüngliche Position beibehalten.
Wenn Sie jedoch mit absolut positionierten Elementen arbeiten, ist die Verwendung der Sichtbarkeit schneller.
Fangen Sie klein an. <br /> Ein wichtiger Tipp zum Schreiben von DHTML-Webseiten lautet: Fangen Sie klein an. Wenn Sie zum ersten Mal eine DHTML-Seite schreiben, achten Sie darauf, nicht zu versuchen, alle Ihnen bekannten DHTML-Funktionen auf Ihrer Seite zu verwenden. Sie können immer nur eine einzige neue Funktion gleichzeitig nutzen und die daraus resultierenden Änderungen sorgfältig beobachten. Wenn Sie einen Leistungsabfall bemerken, können Sie schnell die Ursache dafür finden.
DEFER-Skript
DEFER ist ein unbesungener Held unter den leistungsstarken Funktionen von Skriptprogrammen. Sie haben es vielleicht noch nie verwendet, aber ich bin überzeugt, dass Sie nach dem Lesen dieser Einführung nicht mehr ohne leben können. Es teilt dem Browser mit, dass das Skriptsegment Code enthält, der nicht sofort ausgeführt werden muss, und kann in Verbindung mit dem SRC-Attribut auch dazu führen, dass diese Skripte im Hintergrund heruntergeladen werden, während der Inhalt im Vordergrund dem Benutzer normal angezeigt wird.
Abschließend seien noch zwei Punkte erwähnt:
1. Rufen Sie den Befehl „document.write“ nicht in einem Defer-Skriptsegment auf, da „document.write“ direkte Ausgabeeffekte erzeugt.
2. Fügen Sie im Defer-Skriptsegment außerdem keine globalen Variablen oder Funktionen ein, die vom sofort ausgeführten Skript verwendet werden sollen.
Behalten Sie die Groß-/Kleinschreibung derselben URL bei. <br /> Wir alle wissen, dass UNIX-Server zwischen Groß- und Kleinschreibung unterscheiden, aber wussten Sie, dass der Puffer von Internet Explorer auch Zeichenfolgen mit Groß- und Kleinschreibung unterschiedlich behandelt? Daher müssen Sie als Webentwickler darauf achten, dass die Groß- und Kleinschreibung der URL-Zeichenfolge desselben Links an verschiedenen Stellen einheitlich bleibt. Andernfalls werden verschiedene Dateisicherungen am gleichen Ort im Puffer des Browsers gespeichert, wodurch sich die Anzahl der Anfragen zum Herunterladen von Inhalten am gleichen Ort erhöht. Diese verringern zweifellos die Effizienz des Webzugriffs. Denken Sie also bitte daran: Achten Sie bei URLs am gleichen Ort darauf, dass die Groß- und Kleinschreibung der URL-Zeichenfolge auf verschiedenen Seiten einheitlich ist.

Geben Sie den Tags einen Anfang und ein Ende. <br /> Beim Schreiben unseres eigenen oder beim Anzeigen des HTML-Codes anderer Personen sind wir sicherlich schon einmal auf die Situation gestoßen, dass die Tags einen Anfang, aber kein Ende haben. Zum Beispiel:
Beispiel für ein Tag mit einem Kopf, aber ohne Schwanz
<UL>
<LI>Die erste
<LI>Die zweite
<LI>Der dritte
</UL>
Offensichtlich fehlen im obigen Code drei schließende Tags </LI>. Dies verhindert jedoch nicht die korrekte Ausführung. In HTML gibt es noch einige weitere solcher Tags, etwa FRAME, IMG und P.
Aber seien Sie bitte nicht faul und schreiben Sie das End-Tag vollständig. Dadurch wird nicht nur das HTML-Codeformat standardisiert, sondern auch die Anzeigegeschwindigkeit der Seite wird beschleunigt. Denn der Internet Explorer verbringt keine Zeit damit, zu ermitteln und zu berechnen, wo ein Absatz oder ein Listenelement endet.
<P>Beispiel für ein Head- und Tail-Tag</P>
<UL>
<LI>Erste</LI>
<LI>Der Zweite</LI>
<LI>Der Dritte</LI>
</UL>
OK, oben sind 10 Verarbeitungstechniken zur Beschleunigung von HTML-Seiten aufgeführt. Sie zu beschreiben ist einfach, aber nur wenn wir ihr Wesen wirklich verstehen und beherrschen und sie auf andere Situationen anwenden, können wir schnellere und bessere Programme schreiben.

<<:

>>: Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

HTML-Optimierung beschleunigt Webseiten

So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)

Verwendung des Linux Dig-Befehls

So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4

Schritte zum Ändern des MySQL-Zeichensatzes auf UTF8 unter Linux

So verwenden Sie .htaccess, um einer bestimmten IP den Zugriff auf die Website zu verbieten

Bringen Sie Ihnen den detaillierten Prozess der Installation von DOClever mit Docker Compose bei

So verwenden Sie den Fuser-Befehl im Linux-System

So verwenden Sie MySQL-Stresstest-Tools

Liste der allgemeinen MySql-Abfragebefehlsoperationen

Artikel empfehlen

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

Detaillierte Erklärung des JavaScript ES6-Moduls

Eine Untersuchung des JS-Operators im Problem

Tutorial zur Installation von MySQL8 auf Centos7

So löschen Sie Datensätze in MySQL automatisch vor einer bestimmten Zeit

Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen

Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)

Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Mehrere Möglichkeiten, das gepunktete Kästchen zu entfernen, das beim Klicken auf einen Link angezeigt wird

Nginx tp3.2.3 404 Problemlösung

So rufen Sie das unterbrochene System in Linux auf

Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

jQuery Treeview-Baumstrukturanwendung