Schreiben Sie leistungsstarke HTML-Webanwendungen-HTML-Tutorial-php.cn

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. Jede HTML-Seite der Top-100-Websites ist meist 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 führt nicht zu einer wesentlichen Verbesserung der Parsing-Zeit – HTML ist jedoch ein entscheidender Faktor für die Erstellung extrem schneller Webseiten, die Anpassung an verschiedene Geräte und den Erfolg.

Schreiben Sie leistungsstarke HTML-Webanwendungen

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 leicht zu debuggen ist und pflegen.

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 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 Construction (Compilation) System Competition

Dokumentstruktur des Dokuments

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>

Nach dem Login kopieren

Zitieren Sie die CSS-Datei oben auf der Seite. wie zum Beispiel im Head-Element:

<head>
  <title>My pesto recipe</title>
  <link rel="/css/global.css">
  <link rel="css/local.css">
</head>

Nach dem Login kopieren

Auf diese Weise kann der Browser den Stil vorab laden, bevor er den HTML-Code analysiert, ohne ein verwirrendes Seitenlayout darzustellen.

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

<body>
  ...
  <script src="/js/global.js">
  <script src="js/local.js">
</body>

Nach dem Login kopieren

Ereignisbehandlung in JavaScript hinzufügen. Fügen Sie es nicht in HTML hinzu. Dies ist sehr schwer zu pflegen, wie zum Beispiel:

index.html:
<head>
  ...
  <script src="js/local.js">
</head>
<body onload="init()">
  ...
  <button onclick="handleFoo()">Foo</button>
  ...
</body>

Nach dem Login kopieren

Das ist viel besser:

<head>
  ...
</head>
<body>
  ...
  <button id="foo">Foo</button>
  ...
  <script src="js/local.js">
</body>

Nach dem Login kopieren

js/local.js:

init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();

Nach dem Login kopieren

Legal HTML

Ein wesentlicher Faktor für den Erfolg von Webseiten ist, dass Browser mit ungültigem HTML umgehen können. Browser verfügen außerdem über einige standardisierte Regeln für die Darstellung ungültigen Codes.

Dies ist jedoch kein Grund für Sie, es aufzugeben. Gültiges HTML ist einfacher zu debuggen, weist tendenziell kleinere Dateigrößen auf, ist schneller und verbraucht weniger Ressourcen, da es schneller gerendert wird. Ungültiges HTML erschwert die Implementierung von responsivem Design.

Bei der Verwendung von Vorlagen ist es besonders wichtig, gültiges HTML zu schreiben.

Validieren Sie HTML in Ihrem BUILD-System: Verwenden Sie Validierungs-Plugins wie HTMLHint und SublimeLinter, um die Syntax Ihres HTML zu überprüfen.

Verwenden Sie den Dokumenttyp HTML5.

Achten Sie darauf, dass Ihr HTML hierarchisch bleibt: Verschachteln Sie Elemente korrekt und stellen Sie sicher, dass es keine nicht geschlossenen Elemente gibt. Es hilft Debuggern, Kommentare hinzuzufügen.

<div id="foobar">
...
</div> <!-- foobar ends -->

Nach dem Login kopieren

Stellen Sie sicher, dass Sie nach dem nicht selbstschließenden Element ein schließendes Tag hinzufügen. Folgendes funktioniert beispielsweise auch:

<p>Pesto is good to eat...
<p>...and pesto is easy to make.

Nach dem Login kopieren

Die folgende Schreibweise kann dies jedoch vermeiden Fehler und Absatzhierarchie Offensichtlicher:

<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>

Nach dem Login kopieren

Das Element „items“ (li) muss nicht geschlossen werden. Einige sehr kluge Programmierer werden es auf jeden Fall so schreiben geschlossen sein.

<ul>
  <li>Basil
  <li>Pine nuts
  <li>Garlic
</ul>

Nach dem Login kopieren

　　有一点你必须注意video和audio元素。他们不是自封闭的：

<!-- 错误: liable to cause layout grief -->
<video src="foo.webm" />
<!-- 正确 -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

Nach dem Login kopieren

　　相反，通过删除不必要的代码HTML页面会变得更干净

　　没有必要为自封闭元素添加"/"，像img等

　　设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

　　video，它是没有任何属性的

<video src="foo.webm">

Nach dem Login kopieren

　　下面两种更好

<video src="foo.webm" autoplay="false" controls="false">
<video src="foo.webm" autoplay="true" controls="true">

Nach dem Login kopieren

　　这种可读性更强

<video src="foo.webm" autoplay controls>

Nach dem Login kopieren

　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

Nach dem Login kopieren

　　增强可读性，如，第一眼看上去就像是个标题

<h2><a href="/contact">Contact</a><h2>

Nach dem Login kopieren

　　而这种则像个链接

<a href="/contact"><h2>Contact</h1></a>

Nach dem Login kopieren

　　应该使用小写

<A HREF="/">Home</A>

Nach dem Login kopieren

　　大小写混合看上去更恶心

<H2>Pesto</h2>

Nach dem Login kopieren

语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像