Heim >Web-Frontend >HTML-Tutorial >HTML-Gewichtsverlust, optimierte HTML-Tags zur Erstellung von Webseiten_HTML/Xhtml_Webseitenproduktion
HTML-Gewichtsverlust, optimierte HTML-Tags zur Erstellung von Webseiten_HTML/Xhtml_Webseitenproduktion
- WBOYOriginal
- 2016-05-16 16:42:431442Durchsuche
HTML 4
HTML (nicht XHTML), MIME-Typ ist text/html, sodass einige Tags weggelassen werden können. Mit HTML 4 DTD können Sie die folgenden Tags weglassen (diese sogenannten vermeidbaren Elemente sind hier durchgestrichen markiert)
<code><del><font face="Consolas" size="2"></area></font></del></code>
<code><del><font face="Consolas" size="2"></base></font></del></code>
<code><font face="Consolas" size="2"><body></font></code>
<code><font face="Consolas" size="2"></body></font></code>
<code><del><font face="Consolas" size="2"></br></font></del></code>
<code><del><font face="Consolas" size="2"></col></font></del></code>
<code><font face="Consolas" size="2"></colgroup></font></code>
<code><font face="Consolas" size="2"></dd></font></code>
<code><font face="Consolas" size="2"></dt></font></code>
<code><font face="Consolas" size="2"><head></font></code>
<code><font face="Consolas" size="2"></head></font></code>
<code><del><font face="Consolas" size="2"></hr></font></del></code>
<code><font face="Consolas" size="2"><html></font></code>
<code><font face="Consolas" size="2"></html></font></code>
<code><del><font face="Consolas" size="2"></img></font></del></code>
<code><del><font face="Consolas" size="2"></input></font></del></code>
<code><font face="Consolas" size="2"></li></font></code>
<code><del><font face="Consolas" size="2"></link></font></del></code>
<code><del><font face="Consolas" size="2"></meta></font></del></code>
<code><font face="Consolas" size="2"></option></font></code>
<code><font face="Consolas" size="2"></p></font></code>
<code><del><font face="Consolas" size="2"></param></font></del></code>
<code><font face="Consolas" size="2"><tbody></font></code>
<code><font face="Consolas" size="2"></tbody></font></code>
<code><font face="Consolas" size="2"></td></font></code>
<code><font face="Consolas" size="2"></tfoot></font></code>
<code><font face="Consolas" size="2"></th></font></code>
<code><font face="Consolas" size="2"></thead></font></code>
<code><font face="Consolas" size="2"></tr></font></code>
Ihr Code lautet beispielsweise
<code><font face="Consolas" size="2"><li>List item</li></font></code>
kann als
geschrieben werden<code><font face="Consolas" size="2"><li>List item</font></code>
Ein weiteres Beispiel ist, dass ein Absatz mit
enden sollte<code><font face="Consolas" size="2"></p></font></code>
Am Ende können Sie einfach
schreiben<code><font face="Consolas" size="2"><p>My paragraph</font></code>
Sie können sogar HTML, Head und Body entfernen (stellen Sie sicher, dass dies für Sie angenehm ist, bevor Sie es als Ihren Codierungsstandard übernehmen).
Nach dem Weglassen des Tags ist der HTML-Code weiterhin gültig und die Dateigröße wird reduziert. Bei typischen Seiten können Sie 5–20 % sparen.
HTML 5
Die ständige Weiterentwicklung von HTML 5 bietet einige Möglichkeiten, die Dateigröße zu reduzieren.
Zum Beispiel Seitendokumenttypdeklaration
<code><font face="Consolas" size="2"><!DOCTYPE html></font></code>
Vergleich
<code><font face="Consolas" size="2"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></font></code>
Anscheinend ist die DTD von HTML 5 kürzer.
HTML 5 ist einfacher zu verwenden und kürzer, wenn die Codierung für die Seite angegeben wird:
<code><font face="Consolas" size="2"><meta charset="utf-8"></font></code>
ersetzt
<code><font face="Consolas" size="2"><meta http-equiv="content-type" content="text/html; charset=utf-8"></font></code>
Normalerweise verarbeiten Browser HTML korrekt.
Außerdem können Sie im heutigen HTML 5 das Typattribut entfernen, das MIME-Typen deklariert, wie z. B.
<code><font face="Consolas" size="2">type="text/css"</font></code>oder
<code><font face="Consolas" size="2">type="text/javascript"</font></code>
Sie können
verwenden<code><font face="Consolas" size="2"><script></font></code>Ersatz
<code><font face="Consolas" size="2"><script type="text/javascript"></font></code>verwenden
<code><font face="Consolas" size="2"><style></font></code>Ersatz
<code><font face="Consolas" size="2"><style type="text/css"></font></code>
In allen Seitentypen (auch XHTHML) können Sie
weglassen<code><font face="Consolas" size="2">type="text/css"</font></code>
HTML 5 macht es einfacher.
Die gleichzeitige Verwendung aller oben genannten Methoden führt zu Dateieinsparungen von 10–20 % (oder sogar mehr), abhängig von Ihrem Codierungsstil und der Menge des Textinhalts auf der Seite. Der Code wird sauberer und Besucher gelangen schneller zum Inhalt der Website. Wir verwenden viele dieser Techniken im Privacy Center-Projekt und sparen so 20 % der ursprünglichen Dateigröße.