Heim > Artikel > Web-Frontend > So schreiben Sie leistungsstarke HTML-Webseiten
So schreiben Sie leistungsstarke HTML-Webseiten
- 巴扎黑Original
- 2017-03-19 17:29:211316Durchsuche
Wie können Sie die Leistung einer 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.
In diesem Artikel erfahren Sie, wie Sie prägnantes und klares 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:
HTML wird verwendet, um die Struktur auszudrücken, und CSS wird verwendet, 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
Dokumentdokumentstruktur
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>
Zitieren Sie die CSS-Datei oben auf der Seite, beispielsweise im Head-Element:
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
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:
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
Ereignisbehandlung in JavaScript hinzufügen. Fügen Sie es nicht in HTML hinzu. Dies ist sehr schwer aufrechtzuerhalten, wie zum Beispiel:
index.html: <head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
Das ist viel besser:
<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();
Legales 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.
Aber das ist 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.
<p id="foobar"> ... </p> <!-- foobar ends -->
Stellen Sie sicher, dass Sie nach nicht selbstschließenden Elementen ein schließendes Tag hinzufügen. Folgendes funktioniert beispielsweise auch:
<p>Pesto is good to eat... <p>...and pesto is easy to make.
Aber die folgende Schreibweise kann Fehler vermeiden und die Absatzhierarchie deutlicher machen:
<p>Pesto is good to eat...</p> <p>...and pesto is easy to make.</p>
Das items-Element (li) muss nicht geschlossen werden. Einige sehr kluge Programmierer schreiben es jedoch so.
<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
Eine Sache, auf die Sie achten müssen, sind die Video- und Audioelemente. Sie sind nicht selbstisoliert:
<!-- 错误: liable to cause layout grief --> <video src="foo.webm" /> <!-- 正确 --> <video src="foo.webm"> <p>Video element not supported.</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
hinzuzufügen Das Festlegen von Attributen hat keinen Wert (in diesem Fall wird es nicht automatisch abgespielt und es gibt keine Steuerelemente),
Video, es hat keine Attribute
<video src="foo.webm">
Die folgenden beiden sind besser
<video src="foo.webm" autoplay="false" controls="false"> <video src="foo.webm" autoplay="true" controls="true">
Das ist besser lesbar
<video src="foo.webm" autoplay controls>
Stylet- und Skript-Tags erfordern kein Typattribut; die Standardeinstellung ist CSS und Javascript
Es ist besser, die Protokolladresse zu optimieren (Einstellung http oder https entfernen, sie wird automatisch entsprechend dem aktuellen Protokoll konfiguriert)
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
Verbessern Sie die Lesbarkeit, zum Beispiel sieht es auf den ersten Blick wie ein Titel aus
<h2><a href="/contact">Contact</a><h2>
而这种则像个链接
<a href="/contact"><h2>Contact</h1></a>
应该使用小写
<A HREF="/">Home</A>
大小写混合看上去更恶心
<H2>Pesto</h2>
语义标记
“语义”意思是跟含义相关
HTML应该标记有意义的内容：元素和描述的内容相符。
HTML5引入了一些新的‘语义元素’像
使用正确的元素表达正确的内容对于可访问性是有帮助的。
使用
,代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( -->
<ul>
<li class="ingredient">Basil</li>
<li class="ingredient">Pine nuts</li>
<li class="ingredient">Garlic</li>
</ul>
<!-- 更好 :) -->
<ul class="ingredients">
<li>Basil</li>
<li>Pine nuts</li>
<li>Garlic</li>
</ul>
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
Das obige ist der detaillierte Inhalt vonSo schreiben Sie leistungsstarke HTML-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( -->
<ul>
<li class="ingredient">Basil</li>
<li class="ingredient">Pine nuts</li>
<li class="ingredient">Garlic</li>
</ul>
<!-- 更好 :) -->
<ul class="ingredients">
<li>Basil</li>
<li>Pine nuts</li>
<li>Garlic</li>
</ul>
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
Das obige ist der detaillierte Inhalt vonSo schreiben Sie leistungsstarke HTML-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
- 代表lists
注意
使用
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( --> <ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <li class="ingredient">Garlic</li> </ul> <!-- 更好 :) --> <ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
Das obige ist der detaillierte Inhalt vonSo schreiben Sie leistungsstarke HTML-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Hinweise zur Verwendung von Pre-Tag-StilenNächster Artikel：Hinweise zur Verwendung von Pre-Tag-Stilen