如何提升Web頁面的效能，許多開發人員從多方面來下手如JavaScript、影像最佳化、伺服器配置，檔案壓縮或是調整CSS。
很顯然HTML 已經達到了一個瓶頸，儘管它是開發Web 介面必備的核心語言。 HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。
如何有效的降低HTML 程式碼的複雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹瞭如何編寫簡練，清晰的HTML 程式碼，能夠使得頁面加載更為迅速，且能在多種設備中運作良好。
在設計和開發過程中需要遵循以下原則 ：
結構分離：使用HTML 增加結構，而不是樣式內容；
HTML,CSS 與JavaScript三者 的關係
HTML 是用來調整頁面結構和內容的標記語言。 HTML 不能用於修飾樣式內容，也不能在頭標籤中輸入文字內容，使程式碼變得冗長和複雜，相反地使用CSS 來修飾佈局元素和外觀比較合適。 HTML元素預設的外觀是由瀏覽器預設的樣式表定義的，如在Chrome中h1標籤元素會渲染成32px的Times 粗體。
三條通用設計規則：
使用HTML 建構頁面結構，CSS修飾頁面呈現，JavaScript實作頁面功能。 CSS ZenGarden 很好地展示了行為分離。
文件結構方面也可以做最佳化，如下：
1、使用HTML5 文件類型，以下是空白文件：
XML/HTML Code 複製內容到剪貼簿
html >
html >
head >
title > Recipes: pesto Recipes: pesto title >
head
>
body >
h1 > Pesto 🎜> >
p
2、在文件起始位置引用CSS文件，如下：
XML/HTML Code
複製內容到剪貼簿
head >
title > My pesto recipe>
link rel rel = =rel > 🎜> = rel href = "css/local.css"
>
head >
使用這兩種方法，瀏覽器會在解析HTML程式碼之前將CSS資訊準備好。因此有助於提升頁面載入效能。
在頁面底部body結束標籤之前輸入JavaScript程式碼，這有助於提升頁面載入的速度，因為瀏覽器在解析JavaScript程式碼之前將頁面載入完成，使用JavaScript會對頁面元素產生正面的影響。
XML/HTML Code 複製內容到剪貼簿
body >
...
script src = src = = global.js" >
script src = src == .js"
>
body
使用Defer和async屬性，腳本元素具有async 屬性無法保證會依序執行。
可在JavaScript程式碼中新增Handlers。千萬別加到HTML內聯程式碼中，例如下面的程式碼則容易導致錯誤且不易於維護：
index.html:
XML/HTML Code複製內容到剪貼簿
頭 >
...
腳本 src .js" >
頭 >
body onload = onload = onload = = = = >
> Foo> >
身體
>
下面的寫法比較好：
index.html:
XML/HTML 程式碼 將內容複製到剪貼簿
>
身體
id = 🎜>>
Foo
> > >
...
腳本 src .js">
身體>
js/local.js:
JavaScript 程式碼 將內容複製到剪切板
init();
var fooButton =
document.querySelector( '#foo' );
fooButton.onclick = handleFoo();
驗證
最佳化網頁的一種方法就是瀏覽器可處理非法的HTML 程式碼。合法的HTML程式碼很容易調試，且佔記憶體少，耗費資源少，易於解析和渲染運行起來更快。非法的HTML程式碼讓實作響應式設計變得異常困難。
當使用模板時，合法的HTML代碼顯得異常重要，經常會發生模板單獨運行良好，當與其他模組集成時就報各種各樣的錯誤，因此一定要保證HTML代碼的質量，可採取以下措施：
在工作流程中加入驗證功能：使用驗證外掛程式如HTMLHint或SublineLinter幫助你偵測程式碼錯誤。
代碼格式
格式一致性讓HTML程式碼易於閱讀，理解，最佳化，除錯。
語意標記
語意指意義相關的事物，HTML 可從頁面內容看出語意：元素和屬性的命名某種程度上表達了內容的角色和功能。 HTML5 引進了新的語意元素，如
選擇合適的元素來編寫程式碼可保證程式碼的易讀性：
使用(,…)表示標題，
實作清單； 標籤前應加上標籤；，,,；描述Body 文本，HTML5 語意元素可以形成內容，反之不成立。 和標籤取代和標籤。 元素，輸入類型，佔位符及其他屬性來強制驗證。
例如：
XML/HTML Code 複製內容到剪貼簿
div > Name: >Name:
換種寫法會比較好：
1:
Name:
要提高HTML程式碼的效能，請遵循HTML 程式碼以實現功能和為目標，而不是樣式。
使用元素修飾文本，而不是佈局；預設
是自動提供邊緣，而且其他樣式也是瀏覽器預設提供的。 避免使用
CSS
雖然本文說明的是如何最佳化HTML，以下介紹了一些使用css的基本技能：
避免內嵌css最多使用ID類別 一次
以上就是本文介紹的最佳化HTML程式碼的技巧，一個高品質高效能的網站，往往取決於對細節的處理
