Die HTML -Optimierung beschleunigt Webseiten

Der Schlüssel zur Reduzierung der Download -Zeit der Webseiten liegt darin, die Dateigröße zu reduzieren. Wenn mehrere Seiten einige Zutateninhalte teilen, können Sie diese gemeinsamen Teile separat trennen. Zum Beispiel: Wir können Skripte schreiben, die von mehreren HTML -Seiten in unabhängige .js -Dateien verwendet werden, und rufen sie dann auf der Seite wie folgt auf:

<scriptSrc = myFile.js> </script>

Auf diese Weise muss die öffentliche Datei nur einmal heruntergeladen werden und dann in den Puffer eintritt. Wenn ich das nächste Mal die HTML -Seite anrief, die die öffentliche Datei enthält, wird die Download -Zeit erheblich reduziert.

CSS ist ein HTML-Kleid, und eine schöne Webseite kann nicht ohne sie sein. Es gibt viele Möglichkeiten, CSS auf HTML -Seiten zu verweisen, und die Effizienz verschiedener Methoden ist unterschiedlich. Normalerweise können wir den zwischen <style> </style> definierten Stilkontrollcode extrahieren, ihn in einer separaten .css -Datei speichern und dann auf der HTML -Seite im <Link> -Tag- oder @Import -Tag verweisen:

<Styles>

@Importurl (MySheet1.css);

</style>

Bitte beachten Sie 2 Punkte: 1. Das <style> -Tag muss nicht in der .css -Datei aufgenommen werden. 2. @import und Link -Tags sollten im Kopfteil der HTML -Seite definiert werden.

Das Minimieren des Speicherplatzes, der von HTML -Seiten besetzt ist, ist eine effektive Möglichkeit, die Seiten -Downloads zu beschleunigen. In dieser Hinsicht gibt es zwei Probleme, auf die man sich beachten muss:

HTML -Seiten können nicht von der Unterstützung von Skriptprogrammen getrennt werden. Wir haben oft mehrere Skriptsprachen in die Seiten wie JavaScript und VBScript eingebettet. Ich weiß jedoch nicht, ob Sie es bemerken: Eine solche Mischung verlangsamt die Zugangsgeschwindigkeit von Seiten. Der Grund dafür ist, dass mehrere Skriptmotoren im Speicher geladen werden müssen, um mehrere Skriptcodes zu interpretieren und auszuführen. Bitte versuchen Sie, Code in derselben Skriptsprache auf der Seite zu schreiben.

Haben Sie das <Iframe> -Tag verwendet? Es ist eine sehr wunderbare Funktion. Wenn Sie den Inhalt der zweiten Seite in ein HTML -Dokument einbeziehen möchten, können Sie das <Rameet> -Tag üblich verwenden. Aber mit <Iframe> wird alles einfach. Um beispielsweise eine Vorschau -Seite für Dokumente zu entwickeln, können Sie eine Reihe von Themen links und einen Iframe rechts platzieren, der das zu einer Vorschau zugeschnittene Dokument enthält. Wenn die Maus links jeden Themenlink übergeht, erstellen Sie auf der rechten Seite einen neuen Iframe, um das Dokument anzunehmen. Dabei ist die Code -Effizienz zweifellos effizient, führt gleichzeitig zu einer starken Verarbeitung und letztendlich langsamer Geschwindigkeit.

Verwenden Sie nur einen einzelnen Iframe. Wenn die Maus auf ein neues Thema zeigt, müssen Sie nur das SRC -Attribut des Iframe -Elements ändern. Auf diese Weise verbleibt jederzeit nur ein Vorschau -Dokument im Speicher.

Wenn Sie jeden Tag online auf der Seite durchsuchen, werden Sie auf jeden Fall viele Animationseffekte sehen. Zum Beispiel geht ein süßes kleines Kaninchen auf der Seite hin und her ... die Kerntechnologie, um diesen Effekt zu erzielen, ist die CCS -Positionierung. Normalerweise verwenden wir Element.Style.Left und Element.Style.Top, um den Zweck der grafischen Positionierung zu erreichen. Dies erzeugt jedoch einige Probleme: Die linke Eigenschaft gibt eine Zeichenfolge zurück und enthält die Messeinheit (wie 100px). Um eine neue Positionskoordinate festzulegen, müssen Sie zuerst den Rückgabewert der Zeichenfolge verarbeiten, bevor Sie den Wert wie folgt zuweisen können:

Dimstringleft, Intleft

Stringleft = element.style.left

Intleft = ParseInt (Stringleft)

Intleft = Intleft 10

element.style.left = intleft;

Sie werden auf jeden Fall das Gefühl haben, dass Sie einen so komplexen Code schreiben müssen, um so etwas zu tun. Gibt es einen prägnanteren Weg? Schauen Sie sich diese 4 Eigenschaften an: Posft, Postop, Poswidth und Posheight, die der Anzahl der Punkte des entsprechenden Zeichenfolgerendite entsprechen. OK, verwenden Sie diese Eigenschaften, um den Code umzuschreiben, um die vom obigen Code implementierten Funktionen zu implementieren:

element.style.posleft = 10

Der Code ist kürzer, aber schneller!

Wenn es um Animationseffekte geht, ist die Verwendung von Timern natürlich untrennbar miteinander verbunden. Die übliche Methode besteht darin, das Fenster zu verwenden. Wenn jedoch mehrere Animationen auf der Seite angezeigt werden müssen, müssen Sie mehrere Timer einstellen? Die Antwort lautet nein! Der Grund ist einfach: Die Timer -Funktion verbraucht viele wertvolle Systemressourcen. Wir können jedoch immer noch mehrere Animationen auf der Seite steuern, und der Trick besteht darin, eine Schleife zu verwenden. Steuern Sie in der Schleife die Position der entsprechenden Animation nach verschiedenen Variablenwerten, nur ein Fenster. Settimeout () Funktionsaufruf wird in der gesamten Schleife verwendet.

Lassen Sie das Bild erscheinen und erscheinen gelegentlich interessante Effekte. Es gibt zwei Möglichkeiten, dies zu erreichen: Verwenden Sie das Sichtbarkeitsattribut oder das CSS -Attribut von CSS. Für absolute Positionselemente haben Diplay und Sichtbarkeit den gleichen Effekt. Der Unterschied zwischen den beiden besteht darin, dass das auf Display festgelegte Element: None den Raum des Dokumentstroms nicht mehr einnimmt, während das auf die Sichtbarkeit festgelegte Element: Hidden weiterhin in seiner ursprünglichen Position bleiben.

Wenn Sie sich jedoch mit Elementen in absoluter Position befassen möchten, ist die Verwendung der Sichtbarkeit schneller.

Ein wichtiger Tipp zum Schreiben einer DHTML -Webseite ist: Small. Wenn Sie erstmals eine DHTML -Seite schreiben, sollten Sie nicht alle DHTML -Funktionen verwenden, die Sie auf der Seite kennen. Es können nur eine einzige neue Funktion gleichzeitig verwendet werden, und die daraus resultierenden Änderungen können sorgfältig beobachtet werden. Wenn Sie feststellen, dass diese Leistung abgenommen hat, können Sie schnell herausfinden, warum.

Defer ist ein unbesungener Held unter den mächtigen Funktionen von Skriptprogrammen. Sie haben es vielleicht nie benutzt, aber nachdem Sie die Einführung hier gelesen haben, glaube ich, dass Sie ohne sie nicht leben können. Es gibt dem Browser mit, dass das Skriptsegment Code enthält, der nicht sofort ausgeführt werden muss, und in Verbindung mit dem SRC -Attribut können diese Skripte auch im Hintergrund heruntergeladen werden, und der Inhalt des Vordergrunds wird dem Benutzer normal angezeigt.

1. Rufen Sie den Befehl document.write nicht im Skriptblock auf Defer-Typ auf, da document.write einen direkten Ausgangseffekt erzeugt.

2. Darüber hinaus geben Sie keine globalen Variablen oder Funktionen an, mit der das Skript sofort im Skriptblock auf Defer -Skript ausgeführt werden kann.

Wir alle wissen, dass UNIX -Server in Fall sensibel sind, aber haben Sie wissen, dass die Puffer des Internet -Explorers auch die Fallstrings unterschiedlich behandeln. Daher müssen Sie als Webentwickler daran denken, die Fallkonsistenz von URL -Zeichenfolgen desselben Links an verschiedenen Orten beizubehalten. Andernfalls werden Backups verschiedener Dateien am selben Standort im Puffer des Browsers gespeichert, wodurch auch die Anzahl der Anfragen zum Herunterladen von Inhalten an demselben Ort erhöht wird. All dies reduziert zweifellos die Effizienz des Webzugriffs. Denken Sie also bitte daran: URLs am selben Ort halten Sie die Fallkonsistenz von URL -Zeichenfolgen auf verschiedenen Seiten.

Beim Schreiben oder Betrachten des HTML -Codes anderer Menschen selbst müssen wir auf Situationen gestoßen sein, in denen die Markierungen kein Ende haben. Zum Beispiel:

<p> Beispiel mit Kopf und keine Schwanzspuren

<ul>

<li> die erste

<li> die zweite

<li> der dritte

</Ul>

Offensichtlich fehlen drei </li> End -Tags im obigen Code. Dies verhindert jedoch nicht, dass es ordnungsgemäß ausgeführt wird. In HTML gibt es einige solche Tags wie Frame, IMG und P.

Aber bitte sei nicht faul. Bitte schreiben Sie die Endmarke intakt. Dies macht nicht nur den HTML -Code -Format Standard, sondern beschleunigt auch die Anzeigegeschwindigkeit der Seite. Weil Internet Explorer keine Zeit damit verweist, zu beurteilen und zu berechnen, wo der Absatz oder der Listenelement endet.

<p> Beispiel mit Kopf- und Schwanzmarkierungen </p>

<ul>

<li> Erstens </li>

<li> Zweiter </li>

<li> dritter </li>

</Ul>

OK, in den oben genannten Listen 10 Verarbeitungstechniken zum Beschleunigen von HTML -Seiten. Es ist einfach, diese zu beschreiben, aber nur indem Sie die Essenz des einen oder anderen Beispiels wirklich verstehen und beherrschen und aus dem einen oder anderen Beispiel lernen können, können Sie schnellere und bessere Programme schreiben.