Heim > Artikel > Web-Frontend > So optimieren Sie HTML, um die Leistung von Webseiten zu verbessern
So optimieren Sie HTML, um die Leistung von Webseiten zu verbessern
- 小云云Original
- 2017-11-20 09:18:562819Durchsuche
Es gibt viele Möglichkeiten, die Leistung von Webseiten zu verbessern. Zusätzlich zur Verwendung von js oder der Anpassung der Serverkonfiguration und von CSS können wir die Leistung von Webseiten tatsächlich durch HTML verbessern.
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 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 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
Dokumentstruktur dokumentieren
HTML5-Dokumenttyp verwenden:
XML/HTML-Code zum Kopieren von Inhalten in die Zwischenablage
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
Verweisen Sie auf die CSS-Datei oben auf der Seite, z. B. im Head-Element:
CSS-Code kopiert den Inhalt in die Zwischenablage
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
Auf diese Weise kann der Browser Analysieren Sie die HTML-Preload-Stile, ohne ein überladenes Seitenlayout zu erzeugen.
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 das JavaScript geladen wird:
JavaScript-Code kopiert Inhalte in die Zwischenablage
<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 zu pflegen, zum Beispiel:
XML/HTML-Code Inhalt in die Zwischenablage kopieren
index.html:
<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
Das ist viel besser:
JavaScript-Code kopiert Inhalte in die Zwischenablage
<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();
合法的HTMLEiner der Hauptfaktoren für den Erfolg Der Nachteil von Webseiten besteht darin, dass der Browser mit ungültigem HTML umgehen kann. 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.
XML/HTML-Code Inhalt in die Zwischenablage kopieren
<div id="foobar"> ... </div> <!-- foobar ends -->
Bitte stellen Sie sicher, dass Sie nach dem nicht selbstschließenden Element ein schließendes Tag hinzufügen. Folgendes funktioniert beispielsweise auch:
XML/HTML-Code kopieren Inhalte in die Zwischenablage
<p>Pesto is good to eat... <p>...and pesto is easy to make.
Aber die folgende Schreibmethode kann Fehler vermeiden und die Absatzhierarchie deutlicher machen:
<p>Pesto is good to eat...</p> <p>...and pesto is easy to make.</p>
items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。
XML/HTML Code复制内容到剪贴板
<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
有一点你必须注意video和audio元素。他们不是自封闭的：
XML/HTML Code复制内容到剪贴板
2f1326fc2f646a8faff2bb58dc66418c
<video src="foo.webm" />
9b6785e5cb2693150f7d9cd2f51aefeb
<video src="foo.webm"> <p>Video element not supported.</p> </video>
相反，通过删除不必要的代码HTML页面会变得更干净
没有必要为自封闭元素添加"/"，像img等
设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），
video，它是没有任何属性的
XML/HTML Code复制内容到剪贴板
<video src="foo.webm">
下面两种更好
XML/HTML Code复制内容到剪贴板
<video src="foo.webm" autoplay="false" controls="false"> <video src="foo.webm" autoplay="true" controls="true">
这种可读性更强
XML/HTML Code复制内容到剪贴板
<video src="foo.webm" autoplay controls>
stylet和script标签不需要type属性；默认就是css和javascript
优化协议地址更好（去除置http或https，它会根据当前协议自动配)
XML/HTML Code复制内容到剪贴板
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
增强可读性，如，第一眼看上去就像是个标题
XML/HTML Code复制内容到剪贴板
<h2><a href="/contact">Contact</a><h2>
而这种则像个链接
<a href="/contact"><h2>Contact</h1></a>
应该使用小写
XML/HTML Code复制内容到剪贴板
<A HREF="/">Home</A>
大小写混合看上去更恶心
XML/HTML Code复制内容到剪贴板
<H2>Pesto</h2>
语义标记
“语义”意思是跟含义相关
HTML应该标记有意义的内容：元素和描述的内容相符。
HTML5引入了一些新的‘语义元素’像 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d 和 c787b9a589a3ece771e842a6176cf8e9。
使用正确的元素表达正确的内容对于可访问性是有帮助的。
使用4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355代表标题， ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6代表lists
注意23c3de37f2f9ebcb477c4a90aac6fffd的标题应该以4a249f0d628e2318394fd9b75b4636b1开始
使用1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9 and 15221ee8cba27fc1d7a26c47a001eb9b
使用e388a4556c0f65e1904146cc1a846bee写正文
使用907fae80ddef53131f3292ee4f81644b 和 8e99a69fbe029cd4e2b854e244eab143 代替 5a8028ccc7a7e27417bff9f05adf5932 和 a4b561c25d9afb9ac8dc4d70affff419 表示强调
表单使用2e1cf0710519d5598b1f0f14c36ba674元素，input 类型
混合文字和元素会导至布局的问题
XML/HTML Code复制内容到剪贴板
<div>Name: <input type="text"></div>
最好用下面的表示
XML/HTML Code复制内容到剪贴板
<div><label>Name:</label><input type="text"></div>
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用e388a4556c0f65e1904146cc1a846bee元素代表文本，而不是用来布局。
避免使用0c6dc11e160d3b678d68754cc175188a来换行，使用块级元素和CSS来代替。
避免使用水平分隔线f32b48428a809b51f04d3228cdf461fa。使用CSS的border样式来控制。
不要使用不必要的DIV。W3C对DIV的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在DIV中放置不必要的块级元素。将一个list放到div中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
XML/HTML Code复制内容到剪贴板
743c50a7387311514c3debdf2b2f5314
<ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <li class="ingredient">Garlic</li> </ul>
e183d76c645fd696b46e29069992c16d
<ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>
以上就是如何通过优化HTML代码来提高网页性能的方法，希望对大家有帮助。
相关推荐：
Das obige ist der detaillierte Inhalt vonSo optimieren Sie HTML, um die Leistung von Webseiten zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!