Heim >Web-Frontend >HTML-Tutorial >Unverzichtbare Kenntnisse zur HTML-Optimierung_HTML/Xhtml_Webseitenerstellung
Unverzichtbare Kenntnisse zur HTML-Optimierung_HTML/Xhtml_Webseitenerstellung
- WBOYOriginal
- 2016-05-16 16:36:061546Durchsuche
Um die Leistung von Webseiten zu verbessern, gehen viele Entwickler von vielen Aspekten aus, wie zum Beispiel JavaScript, Bildoptimierung, Serverkonfiguration, Dateikomprimierung oder der Anpassung von CSS.
Es ist klar, dass HTML einen Engpass erreicht hat, obwohl es eine wesentliche Kernsprache für die Entwicklung von Webschnittstellen ist. Auch die Belastung durch HTML-Seiten wird immer größer. Die meisten Seiten benötigen durchschnittlich 40 KB Speicherplatz. Einige große Websites enthalten beispielsweise Tausende von HTML-Elementen und die Seitengröße ist größer.
Wie man die Komplexität des HTML-Codes und die Anzahl der Seitenelemente effektiv reduziert. In diesem Artikel wird hauptsächlich erläutert, wie man aus vielerlei Hinsicht prägnanten und klaren HTML-Code schreibt, der das Laden der Seite beschleunigen und Works ermöglichen kann gut auf mehreren Geräten.
Die folgenden Grundsätze müssen während des Design- und Entwicklungsprozesses befolgt werden :
-
Strukturelle Trennung: Verwenden Sie HTML, um Struktur hinzuzufügen, nicht den Stil des Inhalts.
Sorgen Sie für Ordnung: Fügen Sie Code-Überprüfungstools zum Workflow hinzu. Verwenden Sie Tools oder Stilassistenten, um die Codestruktur und das Format beizubehalten Neue Sprache lernen: Elementstruktur und semantisches Markup abrufen.
Sorgen Sie für Barrierefreiheit: Verwenden Sie ARIA-Attribute, Fallback-Attribute usw.
Test: Stellen Sie sicher, dass die Website auf mehreren Geräten gut läuft, verwenden Sie Emulatoren und Leistungstools.
Die Beziehung zwischen HTML, CSS und JavaScript
HTML ist eine Auszeichnungssprache, die zur Anpassung der Struktur und des Inhalts von Seiten verwendet wird. HTML kann nicht zum Ändern von Stilinhalten verwendet werden, und Sie können auch keinen Textinhalt in den Header-Tag eingeben, wodurch der Code langwierig und komplex wird. Stattdessen ist es sinnvoller, CSS zum Ändern von Layoutelementen und Erscheinungsbild zu verwenden. Das Standard-Erscheinungsbild von HTML-Elementen wird durch das Standard-Stylesheet des Browsers definiert. In Chrome wird das h1-Tag-Element beispielsweise in einer 32-Pixel-Fettschrift dargestellt.Drei universelle Designregeln:
-
Verwenden Sie HTML zum Erstellen der Seitenstruktur, CSS zum Ändern der Seitendarstellung und JavaScript zum Implementieren der Seitenfunktionen. CSS ZenGarden demonstriert die Verhaltenstrennung sehr gut. Verwenden Sie weniger HTML-Code, wenn dieser mit CSS oder JavaScript implementiert werden kann.
Speichern Sie CSS- und JavaScript-Dateien getrennt von HTML. Dies kann beim Caching und Debuggen hilfreich sein.
1. Verwenden Sie den HTML5-Dokumenttyp. Das Folgende ist eine leere Datei:
- >
- <html>
- <Kopf>
- <Titel>Rezepte: Pesto Titel>
- Kopf>
- <Körper>
- <h1>Pestoh1>
- <p>Pesto ist gut!p>
- Körper>
- html>
- <Kopf>
- <Titel>Mein Pesto-Rezept Titel>
- <link rel="stylesheet" href="/css/global.css">
- <link rel="stylesheet" href="css/local.css">
- Kopf>
Mit diesen beiden Methoden bereitet der Browser die CSS-Informationen vor, bevor er den HTML-Code analysiert. Dies trägt dazu bei, die Leistung beim Laden von Seiten zu verbessern.
Geben Sie JavaScript-Code vor dem schließenden Body-Tag am Ende der Seite ein. Dies trägt zur Verbesserung der Seitenladegeschwindigkeit bei, da der Browser die Seite lädt, bevor der JavaScript-Code analysiert wird, was sich positiv auf die Seitenelemente auswirkt .
- <Körper>
- ...
- <script src="/js /global.js">
- <script src="js/ local.js">
- Körper>
Verwenden Sie Defer- und Async-Attribute. Es ist nicht garantiert, dass Skriptelemente mit Async-Attributen in der richtigen Reihenfolge ausgeführt werden.
Handler können im JavaScript-Code hinzugefügt werden. Fügen Sie es niemals zum HTML-Inline-Code hinzu. Der folgende Code kann beispielsweise leicht zu Fehlern führen und ist schwer zu warten:
index.html:
- <Kopf>
- ...
- <script src="js/ local.js">
- Kopf>
- <body onload="init( )">
- ...
- <button onclick="handleFoo( )">FooSchaltfläche>
- ...
- Körper>
下面的写法比较好：
index.html:
- <Kopf>
- ...
- Kopf>
- <Körper>
- ...
- <Schaltfläche id="foo" >FooSchaltfläche>
- ...
- <script src="js/ local.js">
- Körper>
js/local.js:
- init();
- var fooButton =
- document.querySelector('#foo'
- fooButton.onclick = handleFoo();
Eine Möglichkeit zur Optimierung Ihrer Webseiten besteht darin, dass Ihr Browser illegalen HTML-Code verarbeitet. Legaler HTML-Code lässt sich leicht debuggen, benötigt weniger Speicher, verbraucht weniger Ressourcen, lässt sich leicht analysieren, rendern und wird schneller ausgeführt. Unzulässiger HTML-Code erschwert die Umsetzung von Responsive Design enorm.
Bei der Verwendung von Vorlagen ist es äußerst wichtig, dass Vorlagen alleine gut funktionieren, bei der Integration mit anderen Modulen jedoch verschiedene Fehler gemeldet werden. Daher muss die Qualität des HTML-Codes sichergestellt werden folgende Maßnahmen:
- Fügen Sie Validierungsfunktionen zu Ihrem Workflow hinzu: Verwenden Sie Validierungs-Plugins wie HTMLHint oder SublineLinter, um Codefehler zu erkennen. HTML5-Dokumenttyp verwenden Stellen Sie sicher, dass die hierarchische Struktur von HTML leicht zu pflegen ist, und vermeiden Sie die Verschachtelung von Elementen in einem geöffneten Zustand.
Achten Sie darauf, das schließende Tag jedes Elements hinzuzufügen.
Entfernen Sie unnötigen Code. Es ist nicht erforderlich, schließende Tags für selbstschließende Elemente hinzuzufügen. Sie müssen keinen Wert erhalten und sind wahr, wenn sie vorhanden sind
Codeformat
Semantische Tags
Semantik bezieht sich auf bedeutungsbezogene Dinge. HTML kann die Semantik aus dem Inhalt der Seite erkennen: Die Benennung von Elementen und Attributen drückt in gewissem Maße die Rolle und Funktion des Inhalts aus. HTML5 führt neue semantische Elemente wie