Optimieren Sie den HTML-Code, um das Laden von Webseiten zu beschleunigen

Müssen Webentwickler komplexe Komponententechnologien beherrschen, um den Zugriff auf HTML-Seiten zu beschleunigen? Die Antwort lautet: Nicht unbedingt! Tatsächlich gibt es viele Techniken für HTML und DHTML, die einfach und benutzerfreundlich sind. Unabhängig davon, ob Sie ein hochqualifizierter Veteran oder ein Neuling in der Programmierung sind, ist es wichtig, diese zu verstehen.

Offensichtlich HTML, verstecktes „Common Script“

Der Schlüssel zur Reduzierung der Downloadzeit von Webseiten liegt darin, zu versuchen, die Dateigröße zu reduzieren. Wenn mehrere Seiten bestimmte Komponenteninhalte gemeinsam nutzen, können Sie erwägen, diese gemeinsamen Teile separat zu trennen. Beispiel: Wir können ein Skriptprogramm, das von mehreren HTML-Seiten verwendet wird, in eine unabhängige .js-Datei schreiben und es dann auf der Seite wie folgt aufrufen:

07e8890b109f087a56f323d63eee2cbb< ;/script>

Auf diese Weise muss die öffentliche Datei nur einmal heruntergeladen und dann in den Puffer eingegeben werden. Beim nächsten erneuten Aufruf der HTML-Seite mit der öffentlichen Datei verkürzt sich die Downloadzeit deutlich.

Lassen Sie den Stylesheet-Inhalt im Untergrund arbeiten

CSS ist ein HTML-Dekorator, auf den eine schöne Webseite nicht verzichten kann. Es gibt viele Möglichkeiten, CSS in HTML-Seiten zu referenzieren, und unterschiedliche Methoden führen zu unterschiedlichen Effizienzen. Normalerweise können wir den zwischen c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 definierten Stilsteuerungscode extrahieren, ihn in einer separaten CSS-Datei speichern und dann das 3e76e57fc5dd9b761bdd2082385f4936-Tag in der HTML-Seite verwenden.

c9ccee2e6ea535a969eb3f532ad9fe89

@import url("mysheet1.css");

531ac245ce3e4fe3d50054a55f265927 Bitte beachten Sie zwei Punkte: 1. Es ist nicht erforderlich, das Tag c9ccee2e6ea535a969eb3f532ad9fe89 in die CSS-Datei aufzunehmen. 2. Die Tags @import und LINK müssen im HEAD-Abschnitt der HTML-Seite definiert werden.


Zwei Möglichkeiten, wertvollen Speicher zu sparen

Die Minimierung des von HTML-Seiten belegten Speicherplatzes ist eine effektive Möglichkeit, das Herunterladen von Seiten zu beschleunigen. In diesem Zusammenhang müssen zwei Probleme beachtet werden:
1. Verwenden Sie dieselbe Skriptsprache

HTML-Seiten können nicht von der Unterstützung von Skriptprogrammen getrennt werden. Wir betten häufig mehrere Arten von Skripten ein in die Seite einbinden. Allerdings frage ich mich, ob Sie es bemerkt haben: Diese gemischte Nutzung verlangsamt die Zugriffsgeschwindigkeit der Seite. Der Grund dafür ist: Um mehrere Skriptcodes zu interpretieren und auszuführen, müssen mehrere Skript-Engines in den Speicher geladen werden. Versuchen Sie daher bitte, zum Schreiben des Codes auf der Seite dieselbe Skriptsprache zu verwenden.

2. IFrame geschickt nutzen

Haben Sie schon einmal den 36879df9ec853b781d355f37a71b3fa0-Tag verwendet? Es ist eine sehr schöne Funktion. Wenn Sie den Inhalt der zweiten Seite in ein HTML-Dokument einbinden möchten, ist die übliche Methode die Verwendung des 16a3272e017844f82176ca6782b05081-Tags. Aber mit 36879df9ec853b781d355f37a71b3fa0 wird alles einfacher. Um beispielsweise eine Dokumentvorschauseite zu entwickeln, können Sie links eine Reihe von Themen und rechts einen IFRAME platzieren, der das anzuzeigende Dokument enthält. Wenn Sie mit der Maus über jeden Themenlink auf der linken Seite fahren, entsteht ein neuer IFRAME Vorschau des Dokuments. Dadurch ist die Codeeffizienz zweifellos effizient, aber gleichzeitig führt dies zu einer hohen Verarbeitungsintensität und letztendlich zu einer langsamen Geschwindigkeit.

Egal, wir haben eine Lösung: Verwenden Sie einfach einen einzigen IFRAME. Wenn die Maus auf ein neues Thema zeigt, müssen Sie nur das SRC-Attribut des IFRAME-Elements ändern. Dadurch verbleibt immer nur ein Vorschaudokument im Speicher.


Wählen Sie die Animationspositionierungsattribute aus

Wenn Sie jeden Tag im Internet surfen, werden Sie auf jeden Fall viele Animationseffekte sehen. Zum Beispiel läuft ein süßer kleiner Hase auf der Seite hin und her ... Die Kerntechnologie zur Erzielung dieses Effekts ist die CCS-Positionierung. Normalerweise verwenden wir die beiden Eigenschaften element.style.left und element.style.top, um den Zweck der grafischen Positionierung zu erreichen. Dies führt jedoch zu einigen Problemen: Das linke Attribut gibt eine Zeichenfolge zurück und enthält die Maßeinheit (z. B. 100 Pixel). Um eine neue Positionskoordinate festzulegen, müssen Sie daher zunächst den String-Rückgabewert verarbeiten und ihn dann wie folgt zuweisen:
dim stringLeft, intLeft

stringLeft = style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;Sie müssen das Gefühl haben, dass es notwendig ist, so komplizierten Code zu schreiben, um so etwas zu tun. Natürlich! Bitte schauen Sie sich diese 4 Eigenschaften an: posLeft, posTop, posWidth und posHeight, die dem Punktwert des entsprechenden String-Rückgabewerts entsprechen. Okay, verwenden Sie diese Attribute, um den Code neu zu schreiben, um die durch den obigen Code implementierte Funktion zu implementieren:

element.style.posLeft += 10

Der Code ist kürzer und schneller!

Schleifensteuerung mehrerer Animationen

Wenn es um die Erstellung von Animationseffekten geht, ist der Einsatz von Timern natürlich untrennbar miteinander verbunden. Die übliche Methode besteht darin, window.setTimeout zu verwenden, um Elemente kontinuierlich auf der Seite zu positionieren. Wenn jedoch mehrere Animationen auf der Seite angezeigt werden sollen, müssen dann mehrere Timer eingestellt werden? Die Antwort ist Nein! Der Grund ist einfach: Die Timer-Funktion 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 anhand verschiedener Variablenwerte gesteuert. In der gesamten Schleife wird nur ein Funktionsaufruf window.setTimeout() verwendet.

Sichtbarkeit ist schneller als Anzeige

Durch das Erscheinen und Verschwinden von Bildern können interessante Effekte erzielt werden: Verwenden Sie das CSS-Sichtbarkeitsattribut oder das Anzeigeattribut. Bei absolut positionierten Elementen haben Dialog und Sichtbarkeit den gleichen Effekt. Der Unterschied zwischen den beiden besteht darin, dass das auf display:none gesetzte Element nicht mehr den Platz im Dokumentfluss einnimmt, während das auf Visibility:hidden gesetzte Element weiterhin seine ursprüngliche Position behält.

Wenn Sie jedoch mit absolut positionierten Elementen umgehen möchten, ist die Verwendung der Sichtbarkeit schneller.

Klein anfangen

Ein wichtiger Tipp beim Schreiben von DHTML-Webseiten ist: Fangen Sie klein an. Wenn Sie zum ersten Mal eine DHTML-Seite schreiben, versuchen Sie nicht, alle Ihnen bekannten DHTML-Funktionen auf der Seite zu verwenden. Sie können jeweils nur eine neue Funktion verwenden und die daraus resultierenden Änderungen sorgfältig beobachten. Wenn Sie einen Leistungsabfall bemerken, können Sie schnell herausfinden, warum.

DEFER von Skripten

DEFER ist ein „unbesungener Held“ unter den leistungsstarken Funktionen von Skriptprogrammen. Sie haben es vielleicht noch nie benutzt, aber nachdem Sie die Einführung hier gelesen haben, glaube ich, dass Sie nicht ohne es 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 und der Inhalt im Vordergrund angezeigt wird dem Benutzer normal angezeigt.

Abschließend beachten Sie bitte zwei Punkte:

1. Rufen Sie den Befehl document.write nicht in einem Skriptsegment vom Typ „Defer“ auf, da document.write direkte Ausgabeeffekte erzeugt.

2. Fügen Sie außerdem keine globalen Variablen oder Funktionen, die vom Skript zur sofortigen Ausführung verwendet werden, in das Segment des Verzögerungsskripts ein.

Behalten Sie die Konsistenz der Groß- und Kleinschreibung für dieselbe URL bei

Wir alle wissen, dass bei UNIX-Servern die Groß- und Kleinschreibung beachtet wird, aber wussten Sie schon: Die Puffer des Internet Explorers werden auch unterschiedlich behandelt. Großbuchstaben und Kleinbuchstaben. Daher müssen Sie als Webentwickler daran denken, die Groß- und Kleinschreibung von URL-Strings für denselben Link an verschiedenen Stellen konsistent zu halten. Andernfalls werden unterschiedliche Dateisicherungen desselben Speicherorts im Puffer des Browsers gespeichert, wodurch sich auch die Anzahl der Anfragen zum Herunterladen von Inhalten vom selben Speicherort erhöht. Diese verringern zweifellos die Effizienz des Webzugriffs. Denken Sie also bitte daran: Achten Sie bei URLs am selben Ort darauf, dass die Groß-/Kleinschreibung der URL-Zeichenfolge auf verschiedenen Seiten konsistent bleibt.

Wenn die Etiketten den Anfang und das Ende haben
Beim Schreiben oder Anzeigen des HTML-Codes anderer müssen wir auf den schwanzlosen Schwanz gestoßen sein. Beispiel:
Offensichtlich fehlen im obigen Code drei schließende Tags cbf331b4cac0bfbcf2a714e444b23b14 Dies verhindert jedoch nicht die korrekte Ausführung. In HTML gibt es weitere solche Tags wie FRAME, IMG und P.

  <P>有头无尾标记举例 
     <UL> 
     <LI>第一个
     <LI>第二个
     <LI>第三个
     </UL>

Aber bitte seien Sie nicht faul, schreiben Sie bitte das Schluss-Tag vollständig. Dadurch wird nicht nur das HTML-Codeformat standardisiert, sondern auch die Anzeigegeschwindigkeit der Seite beschleunigt. Weil Internet Explorer keine Zeit damit verschwendet, herauszufinden, wo ein Absatz oder ein Listenelement endet.
OK, oben sind 10 Verarbeitungstechniken zur Beschleunigung von HTML-Seiten aufgeführt. Es ist sehr einfach, diese zu beschreiben, aber nur wenn Sie das Wesentliche wirklich verstehen und beherrschen und Schlussfolgerungen aus einem Beispiel ziehen, können Sie schnellere und bessere Programme schreiben.

 <P>有头有尾标记举例</P> 
     <UL> 
     <LI>第一个</LI> 
     <LI>第二个</LI> 
     <LI>第三个</LI> 
     </UL>

Das obige ist der detaillierte Inhalt vonOptimieren Sie den HTML-Code, um das Laden von Webseiten zu beschleunigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!