不可不知的HTML優化技巧_HTML/Xhtml_網頁製作

如何提升Web頁面的效能，許多開發人員從多方面來下手如JavaScript、影像最佳化、伺服器配置，檔案壓縮或是調整CSS。

很顯然HTML 已經達到了一個瓶頸，儘管它是開發Web 介面必備的核心語言。 HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。

如何有效的降低HTML 程式碼的複雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹瞭如何編寫簡練，清晰的HTML 程式碼，能夠使得頁面加載更為迅速，且能在多種設備中運作良好。

在設計和開發過程中需要遵循以下原則：

• 結構分離：使用HTML 增加結構，而不是樣式內容；
  保持整潔：為工作流程添加程式碼驗證工具；使用工具或樣式精靈維護程式碼結構和格式
  學習新語言：取得元素結構和語意標記。
  確保可存取： 使用ARIA 屬性和Fallback 屬性等
  測試： 使網站在多種裝置中能夠良好運行，可使用emulators和效能工具。

HTML,CSS 與JavaScript三者的關係

HTML 是用來調整頁面結構和內容的標記語言。 HTML 不能用於修飾樣式內容，也不能在頭標籤中輸入文字內容，使程式碼變得冗長和複雜，相反地使用CSS 來修飾佈局元素和外觀比較合適。 HTML元素預設的外觀是由瀏覽器預設的樣式表定義的，如在Chrome中h1標籤元素會渲染成32px的Times 粗體。

三條通用設計規則：

• 使用HTML 建構頁面結構，CSS修飾頁面呈現，JavaScript實作頁面功能。 CSS ZenGarden 很好地展示了行為分離。
  如果能用CSS或JavaScript實作就少用HTML程式碼。
  將CSS和JavaScript檔案與HTML 分開存放。這可有助於快取和調試。 

文件結構方面也可以做最佳化，如下：

1、使用HTML5 文件類型，以下是空白文件：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.   
4. head>  
5.  title>Recipes: pestoRecipes: pestoRecipes: pesto title
>
6.    head
>
7.   
8.    body
>
9.   
10.      h1>PestoPesto 🎜>>
11.   
12.      p>Pesto.p>  
13.   
14. body>  
15. html>  
16.   

2、在文件起始位置引用CSS文件，如下：

XML/HTML Code複製內容到剪貼簿

1. head>  
2.   title>My pesto recipe>     
3.   
link rel rel==rel> 🎜> href="/css/global.css">
4.   link rel rel==rel> 🎜> href="css/local.css"
>
5.   
6. head>  
7.   

使用這兩種方法，瀏覽器會在解析HTML程式碼之前將CSS資訊準備好。因此有助於提升頁面載入效能。

在頁面底部body結束標籤之前輸入JavaScript程式碼，這有助於提升頁面載入的速度，因為瀏覽器在解析JavaScript程式碼之前將頁面載入完成，使用JavaScript會對頁面元素產生正面的影響。

XML/HTML Code複製內容到剪貼簿

1. body>  
2.   
3.   ...   
4.   
5.   script src=src== global.js"
>
6.      script src=src
=
7. = .js"
>
8.      
9. body
>

  

  

使用Defer和async屬性，腳本元素具有async 屬性無法保證會依序執行。 可在JavaScript程式碼中新增Handlers。千萬別加到HTML內聯程式碼中，例如下面的程式碼則容易導致錯誤且不易於維護：

index.html: XML/HTML Code複製內容到剪貼簿

1. 頭>  
2.      
3.   ...   
4.   
5.   腳本 src .js">  
  
7. 頭>  
  
9. body onload=onload=onload=
onload
10. =
onload
11. =
onload
12. =
13. >        ...         按鈕 onclick
>Foo
按鈕
15. >
 🎜>
16. >       ...   
17.   

身體

>

     

 

1. 下面的寫法比較好： index.html: XML/HTML 程式碼將內容複製到剪貼簿
頭
4. >
  
5.      ...   
6.   
7. 頭>  
8.   
10. 身體>
11.         ...         按鈕 id=
12. id=
=
13. 🎜>>
Foo
按鈕
15. > > >      ...   
16.   
17.   腳本 src
.js"
18. >
  

  

身體>      js/local.js: JavaScript 程式碼 將內容複製到剪切板

1. init();   
2. var fooButton =   
3.     document.querySelector('#foo');   
4. fooButton.onclick = handleFoo();  

驗證

最佳化網頁的一種方法就是瀏覽器可處理非法的HTML 程式碼。合法的HTML程式碼很容易調試，且佔記憶體少，耗費資源少，易於解析和渲染運行起來更快。非法的HTML程式碼讓實作響應式設計變得異常困難。

當使用模板時，合法的HTML代碼顯得異常重要，經常會發生模板單獨運行良好，當與其他模組集成時就報各種各樣的錯誤，因此一定要保證HTML代碼的質量，可採取以下措施：

• 在工作流程中加入驗證功能：使用驗證外掛程式如HTMLHint或SublineLinter幫助你偵測程式碼錯誤。
  使用HTML5文件類型
  確保HTML的層次結構易於維護，並且避免元素巢狀處於左開狀態。
  保證添加各元素的結束標籤。
  刪除不必要的程式碼 ；沒有必要為自關閉的元素添加結束標籤；Boolean 屬性不需要賦值，如果存在則為True;

代碼格式

格式一致性讓HTML程式碼易於閱讀，理解，最佳化，除錯。

語意標記

語意指意義相關的事物，HTML 可從頁面內容看出語意：元素和屬性的命名某種程度上表達了內容的角色和功能。 HTML5 引進了新的語意元素，如

，

及

。

選擇合適的元素來編寫程式碼可保證程式碼的易讀性：

• 使用

  (

  ,

  …)表示標題，

  或

  實作清單；
  注意使用
  標籤前應加上

  標籤；
  選擇適當的HTML5語意元素如

  ，

  ,

  ,

  ；
  使用

  描述Body 文本，HTML5 語意元素可以形成內容，反之不成立。
  使用和標籤取代和標籤。
  使用元素，輸入類型，佔位符及其他屬性來強制驗證。
  將文字和元素混合，並作為另一個元素的子元素，會導致佈局錯誤。

例如：

XML/HTML Code複製內容到剪貼簿

1. div>Name: >Name:  🎜> type="text" id id"name">div>
  

換種寫法會比較好：

   1: 

   2:    Name:  3 : 

 
佈局

要提高HTML程式碼的效能，請遵循HTML 程式碼以實現功能和為目標，而不是樣式。

• 使用

  元素修飾文本，而不是佈局；預設

  是自動提供邊緣，而且其他樣式也是瀏覽器預設提供的。 避免使用
  分行，可以使用block元素或CSS顯示屬性來代替。
  避免使用

  ---

  來增加水平線，可使用CSS的border-bottom 來代替。
  不到關鍵時刻不要使用div標籤。
  盡量少用Tables來版面。
  可以多使用Flex Box
  使用CSS 調整邊距等。
  

CSS

雖然本文說明的是如何最佳化HTML，以下介紹了一些使用css的基本技能：

• 避免內嵌css最多使用ID類別 一次
  當涉及多個元素時，可使用Class來實現。
  

以上就是本文介紹的最佳化HTML程式碼的技巧，一個高品質高效能的網站，往往取決於對細節的處理