Einige Vorschläge zum Schreiben leistungsstarker HTML-Anwendungen_HTML/Xhtml

Wie können Sie die Leistung Ihrer Webseite verbessern?

Die meisten Entwickler optimieren durch JavaScript und Bilder, durch Serverkonfiguration, Komprimieren von Dateien und Zusammenführen von Dateien – sogar durch Anpassen von CSS (Zusammenführen kleiner Bilder).

Schlechtes HTML wird immer ignoriert, obwohl es schon immer die Kernsprache des Internets war.

HTML wird immer größer. Die meisten HTML-Seiten der Top-100-Websites sind etwa 40 KB groß. Amazon und Yahoo verwenden Tausende von HTML-Seiten. Auf der Hauptseite von youtube.com gibt es bis zu 3.500 HTML-Elemente.

Die Reduzierung der Komplexität von HTML und der Anzahl der Elemente auf einer Seite verbessert die Parsing-Zeit nicht wesentlich – HTML ist jedoch ein entscheidender Faktor für die Erstellung extrem schneller Webseiten, die Anpassung an verschiedene Geräte und den Erfolg.
In diesem Artikel erfahren Sie, wie Sie prägnantes und sauberes HTML schreiben, sodass Sie eine Website erstellen können, die schnell lädt, mehrere Geräte unterstützt und einfach zu debuggen und zu warten ist.

Es gibt keine einheitliche Möglichkeit, Code zu schreiben – insbesondere HTML. Dies ist nur eine allgemeine Erfahrung, aber es ist nicht die einzig richtige Wahl.
HTML, CSS und JavaScript

HTML ist eine Auszeichnungssprache, die zur Darstellung von Struktur und Inhalt verwendet wird.

HTML sollte nicht zur Darstellung von Stilen und Stilen verwendet werden. Fügen Sie keinen Text in Titel-Tags (h1~h6) ein, um „größer“ zu wirken, und verwenden Sie keine Blockquotes-Elemente nur zum Einrücken. Verwenden Sie stattdessen CSS, um das Erscheinungsbild und Layout von Elementen zu ändern.

Das Standard-Erscheinungsbild von HTML-Elementen wird durch die Standardstile des Browsers erreicht: Firefox, Internet Explorer und Opera sind alle unterschiedlich. Beispielsweise wird in Chrome das h1-Element standardmäßig auf eine Größe von 32 Pixel gerendert.

Drei Grundprinzipien:

Verwenden Sie HTML, um die Struktur auszudrücken, und CSS, um verschiedene Stile und Themen auszudrücken. JavaScript, um auf Benutzeraktionen zu reagieren.

Verwenden Sie bei Bedarf HTML, CSS und bei Bedarf JavaScript. Beispiel: In vielen Fällen verwenden Sie möglicherweise HTML-Formulare zur Validierung und CSS oder SVG für Animationen.

Trennen Sie CSS und JavaScript von Ihrem HTML-Code. Dadurch, dass sie zwischenspeicherbar sind, lässt sich der Code einfacher debuggen. In der Produktion können CSS und JavaScript minimiert und zusammengeführt werden und sollten in Ihr Build-System integriert werden. Hinweis* Siehe JavaScript-Konstruktions-(Kompilierungs-)Systemwettbewerb
Dokumentenstruktur

HTML5-Dokumenttyp verwenden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html>
<Kopf>
<Titel>Rezepte: Pesto Titel>
Kopf>
<Körper>
<h1>Pestoh1>
<p>Pesto ist gut!p>
Körper>
html>

Zitieren Sie die CSS-Datei oben auf der Seite, beispielsweise im Head-Element:

CSS-CodeInhalt in die Zwischenablage kopieren

Mein Pesto-Rezept

"/css/global.css"

> "css/local.css"

Auf diese Weise kann der Browser die Stile vorab laden, bevor er den HTML-Code analysiert, ohne dass ein verwirrendes Seitenlayout entsteht.

Platzieren Sie JavaScript ganz unten auf der Seite, bevor der Textkörper geschlossen wird. Dies verkürzt die Renderzeit der Seite, da der Browser die Seite rendern kann, bevor das JavaScript geladen wird:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

...
"foo">Foo
...
"js/local.js">
　　js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();

　合法的HTML

　　Web网页成功的一个主要因素就是浏览器可以处理无效的HTML.浏览器还有一些如何呈现无效代码的标准化规则.

　　但是,这不你放任的理由.有效的HTML更容易调试,往往文件更小,速度更快,占用资源更少因为它们渲染更快.无效的HTML让响应式设计难以实施.

　　使用模板的时候写有效的HTML是特别重要的.

　　在你的BUILD系统中验证HTML：使用验证插件,如HTMLHint和SublimeLinter来检查你HTML的语法.

　　使用HTML5文档类型.

　　请务必保持HTML的层次:正确嵌套元素,确保没有任何未关闭的元素.它可以帮助调试者添加注释.

XML/HTML-Code复制内容到剪贴板

<div id="foobar" >
...
div>
<video src="foo. webm" />
<video src="foo. webm">
<p>Videoelement nicht unterstützt.p>
Video>

Im Gegenteil, die HTML-Seite wird sauberer, indem unnötiger Code entfernt wird

Es ist nicht erforderlich, „/“ zu selbstschließenden Elementen wie img usw. hinzuzufügen.

Das Festlegen von Attributen hat keinen Wert, wenn keine Attribute hinzugefügt werden (in diesem Fall wird es nicht automatisch abgespielt und es gibt keine Steuerungssteuerung),

Video, es hat keine Attribute

XML/HTML-CodeInhalt in die Zwischenablage kopieren