編寫高性能HTML應(yīng)用有哪一些點(diǎn)需要注意
發(fā)表時(shí)間：2023-09-19 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)砭帉懜咝阅蹾TML應(yīng)用有哪些點(diǎn)需要注意，編寫高性能HTML應(yīng)用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。你怎么能提高網(wǎng)頁(yè)性能？ 大多數(shù)開發(fā)者會(huì)通過JavaScript和圖片來優(yōu)化，通過服務(wù)器配置，壓縮文件和合并文件 - 甚至調(diào)整CSS（合并小圖片）�！ 】蓱z的HTML老是被...
這次給大家?guī)砭帉懜咝阅蹾TML應(yīng)用有哪些點(diǎn)需要注意，編寫高性能HTML應(yīng)用的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
你怎么能提高網(wǎng)頁(yè)性能？
大多數(shù)開發(fā)者會(huì)通過JavaScript和圖片來優(yōu)化，通過服務(wù)器配置，壓縮文件和合并文件 - 甚至調(diào)整CSS（合并小圖片）。
可憐的HTML老是被忽視，盡管它一直是網(wǎng)絡(luò)的核心語(yǔ)言。
HTML正在變得越來越大。排名前100的網(wǎng)站每個(gè)HTML頁(yè)面大多在40K左右。亞馬遜和雅虎使用上千個(gè)HTML頁(yè)面。在youtube.com主頁(yè)面，HTML元素高達(dá)3500個(gè)。
減少的HTML復(fù)雜性和一個(gè)頁(yè)面的元素?cái)?shù)量并不會(huì)明顯提高解析時(shí)間 - 但HTML是構(gòu)建極速網(wǎng)頁(yè)，和適應(yīng)不同設(shè)備并影響成功的一個(gè)關(guān)鍵性的因素。
在本文中，您將了解如何編寫簡(jiǎn)潔干凈的HTML，使您能夠創(chuàng)建快速加載并支持多種設(shè)備的網(wǎng)站，將易于調(diào)試和維護(hù)。
寫代碼的方法并不是只有一種-尤其是HTML。這里只是講解一般經(jīng)驗(yàn)，但并不是唯一正確的選擇。
HTML, CSS 和 JavaScript
HTML是一種標(biāo)記語(yǔ)言，用于表示結(jié)構(gòu)和內(nèi)容。
HTML不應(yīng)被用來顯示風(fēng)格和樣式。不要為了顯得“更大”把文字寫在標(biāo)題標(biāo)簽（h1~h6）中，或只是為了縮進(jìn)而使用blockquotes元素。相反，使用CSS來改變?cè)氐耐庥^和布局。
HTML元素的默認(rèn)外觀是通過瀏覽器的默認(rèn)樣式實(shí)現(xiàn)的：Firefox，Internet Explorer和Opera均不一樣。例如，在Chrome中默認(rèn)h1元素呈現(xiàn)為32px的大小。
三個(gè)基本原則：
使用HTML表示結(jié)構(gòu)，CSS用來表現(xiàn)不同樣式的風(fēng)格和主題。JavaScript來響應(yīng)用戶行為。
使用HTML，必要時(shí)借助CSS，并且在不得己時(shí)再添加JavaScript。例如：在許多情況下，你可能使用HTML表單進(jìn)行驗(yàn)證，使用CSS或SVG來實(shí)現(xiàn)動(dòng)畫。
將CSS和JavaScript從你的HTML代碼中分離。讓他們能夠緩存，這使代碼更易于調(diào)試。在生產(chǎn)中，CSS和JavaScript是可以壓縮合并的，應(yīng)該作為你Build系統(tǒng)的一部分。 注* 參見 JavaScript構(gòu)建（編繹）系統(tǒng)大比拼
Document文檔結(jié)構(gòu)
使用 HTML5的document type:
<!DOCTYPE html>
<html>
<head>
<title>Recipes: pesto</title>
</head>
<body>
<h1>Pesto</h1>
<p>Pesto is good!</p>
</body>
</html>
在頁(yè)面最頭部引用CSS文件，如在head元素中：
<head>
<title>My pesto recipe</title>
<link rel="/css/global.css">
<link rel="css/local.css">
</head>
這樣，瀏覽器就可以在解析HTML前預(yù)先加載樣式而不會(huì)呈現(xiàn)一個(gè)混亂的頁(yè)面布局。
把JavaScript放在頁(yè)面的最底部, 在body封閉之前。這將提高頁(yè)面渲染時(shí)間，因?yàn)闉g覽器可以在JavaScript裝載前將頁(yè)面渲染出來:
<body>
...
<script src="/js/global.js">
<script src="js/local.js">
</body>
在JavaScript添加事件處理。 不要在HTML中添加。這樣非常難以維護(hù)，比如:
index.html:
<head>
...
<script src="js/local.js">
</head>
<body onload="init()">
...
<button onclick="handleFoo()">Foo</button>
...
</body>
這樣就好多了:
<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(); 合法的HTML
Web網(wǎng)頁(yè)成功的一個(gè)主要因素就是瀏覽器可以處理無效的HTML。瀏覽器還有一些如何呈現(xiàn)無效代碼的標(biāo)準(zhǔn)化規(guī)則。
但是，這不你放任的理由。有效的HTML更容易調(diào)試，往往文件更小，速度更快，占用資源更少，因?yàn)樗鼈冧秩靖�。無效的HTML讓響應(yīng)式設(shè)計(jì)難以實(shí)施。
使用模板的時(shí)候?qū)懹行У腍TML是特別重要的。
在你的BUILD系統(tǒng)中驗(yàn)證HTML：使用驗(yàn)證插件，如HTMLHint和SublimeLinter來檢查你HTML的語(yǔ)法。
使用HTML5文檔類型。
請(qǐng)務(wù)必保持HTML的層次：正確嵌套元素，確保沒有任何未關(guān)閉的元素。它可以幫助調(diào)試者添加注釋。
<p id="foobar">
...
</p> <!-- foobar ends -->
請(qǐng)務(wù)必在非自封閉的元素后加上結(jié)束標(biāo)簽，比如，下面的也可以工作：
<p>Pesto is good to eat...
<p>...and pesto is easy to make.
但是下面的寫法可以避免錯(cuò)誤，段落層次更加明顯:
<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>
items元素（li）并不是必須封閉的，有些非常聰明的的程序員會(huì)寫成這樣，無論如何，list元素(ul)是必須封閉的。
<ul>
<li>Basil
<li>Pine nuts
<li>Garlic
</ul>
有一點(diǎn)你必須注意video和audio元素。他們不是自封閉的：
<!-- 錯(cuò)誤: liable to cause layout grief -->
<video src="foo.webm" />
<!-- 正確 -->
<video src="foo.webm">
<p>Video element not supported.</p>
</video>
相反，通過刪除不必要的代碼HTML頁(yè)面會(huì)變得更干凈
沒有必要為自封閉元素添加"/"，像img等
設(shè)置屬性是沒有值的，如果不加屬性的話（這種情況下，它不會(huì)自動(dòng)播放，沒有控制控件），
video，它是沒有任何屬性的
<video src="foo.webm">
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
怎樣用HTML和CSS做出大白
在XHTML中的標(biāo)題標(biāo)簽與段落標(biāo)簽有哪些使用方法
怎樣編寫靈活、穩(wěn)定、高質(zhì)量的HTML和css代碼
以上就是編寫高性能HTML應(yīng)用有哪些點(diǎn)需要注意的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
