Heim > Artikel > Web-Frontend > Tipps zur HTML-Optimierung
Tipps zur HTML-Optimierung
- 高洛峰Original
- 2017-02-27 10:39:31795Durchsuche
Um die Leistung von Webseiten zu verbessern, gehen viele Entwickler von vielen Aspekten aus, wie zum Beispiel JavaScript, Bildoptimierung, Serverkonfiguration, Dateikomprimierung oder 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 von HTML-Code und die Anzahl der Seitenelemente effektiv reduziert. Dieser Artikel löst hauptsächlich dieses Problem. Er stellt vor, wie man aus vielerlei Hinsicht prägnanten und klaren HTML-Code schreibt, der das Laden der Seite beschleunigen kann . und kann auf einer Vielzahl von Geräten gut ausgeführt werden.
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.
Behalten Sie es bei sauber: für die Arbeit Code-Validierungstools zum Fluss hinzufügen; Codestruktur und -formatierung mithilfe von Tools oder Stilassistenten beibehalten
Eine 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 der Seite 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 allgemeine Designregeln:
Verwenden Sie HTML zum Erstellen der Seitenstruktur, CSS zum Ändern der Seitendarstellung und JavaScript zum Implementieren der Seitenfunktion. 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.
Die Dokumentstruktur kann auch wie folgt optimiert werden:
1. Verwenden Sie den HTML5-Dokumenttyp:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
2. Verweisen Sie wie folgt auf die CSS-Datei am Anfang des Dokuments:
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>
Mit diesen beiden Methoden analysiert der Browser die CSS-Informationen vor dem Parsen des HTML-Codes Machen Sie sich bereit. 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 Seitenelemente.
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
Bei Verwendung von Defer- und Async-Attributen kann nicht garantiert werden, 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 nicht einfach zu warten:
index.html:
<head>
...
<script src="js/local.js">
</head>
<body onload="init()">
...
<button onclick="handleFoo()">Foo</button>
...
</body>
unten Die Schreibmethode ist besser:
index.html:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();
Überprüfen
Eine Möglichkeit zur Optimierung Ihrer Webseiten besteht darin, dass Ihr Browser illegalen HTML-Code verarbeiten kann. 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 der legale HTML-Code äußerst wichtig. Es kommt häufig vor, dass Vorlagen bei der Integration mit anderen Modulen gut funktionieren. Daher muss die Qualität des HTML-Codes gewährleistet sein die folgenden Maßnahmen:
Fügen Sie Ihrem Workflow Validierungsfunktionen hinzu: Verwenden Sie Validierungs-Plug-Ins 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.
Unnötigen Code entfernen; es ist nicht erforderlich, schließende Tags für selbstschließende Elemente hinzuzufügen; ihnen muss kein Wert zugewiesen werden und sie sind wahr, wenn sie vorhanden sind;
Codeformat
Die Formatkonsistenz erleichtert das Lesen, Verstehen, Optimieren und Debuggen von HTML-Code.
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 die Rolle und Funktion des Inhalts für eine bestimmte Person aus Ausmaß. HTML5 führt neue semantische Elemente wie 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d ein.
Die Auswahl der richtigen Elemente zum Schreiben Ihres Codes stellt die Lesbarkeit Ihres Codes sicher:
使用4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355…)表示标题，ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6实现列表；
注意使用23c3de37f2f9ebcb477c4a90aac6fffd 标签之前应添加4a249f0d628e2318394fd9b75b4636b1标签；
选择合适的HTML5语义元素如1aa9e5d373740b65a0cc8f0a02150c53，c37f8231a37e88427e62669260f0074d,c787b9a589a3ece771e842a6176cf8e9,15221ee8cba27fc1d7a26c47a001eb9b；
使用e388a4556c0f65e1904146cc1a846bee描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143标签替代5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419标签。
使用2e1cf0710519d5598b1f0f14c36ba674元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误。
例如：
<p>Name: <input type="text" id="name"></p>
换种写法会更好：
1: e388a4556c0f65e1904146cc1a846bee
2: 62f4dd80875f0d2585fe00dc94f97b94Name:8c1ecd4bb896b2264e0711597d40766cb8ecd12412814ff6993a9b9f10fe1177
3: 94b3e26ee717c64999d7867364b1b4a3
布局
要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。
使用e388a4556c0f65e1904146cc1a846bee元素修饰文本，而不是布局；默认e388a4556c0f65e1904146cc1a846bee是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用0c6dc11e160d3b678d68754cc175188a分行，可以使用block元素或CSS显示属性来代替。
避免使用f32b48428a809b51f04d3228cdf461fa来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用p标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。
CSS
虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：
避免内联css
最多使用ID类 一次
当涉及多个元素时，可使用Class来实现。
以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理
更多HTML优化技巧相关文章请关注PHP中文网！