摘要：之所以寫這篇文章，就是為了告訴你如何寫出干凈整潔的代碼，能夠讓你的網頁在許多設備上都能快速正常的加載運行。在這個過程中，你能夠學會如何搭建易于維護和的網站以及。無論如何，盡量避免同時在和，或者和添加。

  
個人翻譯，歡迎轉載！

  英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/

  第一次翻譯國外的博文，有什么意見和建議歡迎提出！

看到這個問題時，大多數開發者會想到圖片優化、JavaScript優化、服務器配置升級、文件壓縮甚至是CSS壓縮這些方式。然而，網頁的核心語言HTML卻被忽視了。
如今，HTML的負擔越來越重，在全球排名前100的網站中，平均每個頁面的HTML代碼大小有40k左右，其中Amazon和Yahoo平均每頁的HTML代碼有幾千行，Youtube的首頁甚至有3500個HTML元素。雖然降低每頁HTML的復雜性、減少元素數量并不能使頁面的加載時間提升很多，但是良好的HTML編碼習慣是提升網頁加載速度的一個重要基礎。之所以寫這篇文章，就是為了告訴你如何寫出干凈整潔的HTML代碼，能夠讓你的網頁在許多設備上都能快速正常的加載運行。在這個過程中，你能夠學會如何搭建易于維護和Debug的網站以及app。

寫代碼的方式可以有很多種，特別是HTML。本文只是根據我們的經驗來做出相對最好的建議，并不代表每條建議在任何情況下都能達到效果，僅供參考。

  
各司其職：樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式；
  
一絲不茍：開發過程中一定要加入代碼校驗工具，以確保代碼沒有任何語法以及邏輯上的錯誤；
  
干凈整潔：使用自動排版工具來保持代碼結構和格式的一致性；
  
熟練語言：應了解所有的元素用法，并在HTML多使用語義化的元素；
  
一視同仁：設計過程中一定要考慮到所有的情況，備用方案很重要，甚至要專門為特殊人群使用ARIA (Accessible Rich Internet Application)，以保證你的網站可以通過屏幕閱讀器或者純文本瀏覽器來展示；
  
全面測試：通過各種工具來測試你的網站在不同設備和不同尺寸屏幕上的表現。
  

HTML的含義應該不多解釋了，請自行百度百科。
首先要說的是，HTML和CSS兩兄弟雖然彼此充滿基情，但是也不能把關系搞得太復雜，樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式，比如不要僅僅為了使文字變大而使用

、

、

這些標題標簽，也不要僅僅為了縮進而使用

標簽。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默認樣式表，HTML元素默認的顯示方式都是由這些默認樣式表來決定的。比如，Chrome中

默認的樣式是32px bold，字體是Times.

  
基友三原則：

  1. HTML用于建立結構，CSS用于渲染樣式，JavaScript用于控制行為；

  2. 首先完成HTML的設計，然后根據樣式需求來設計CSS，最后在確實需要的情況下才設計JavaScript；

  3. 將CSS和JavaScript文件進行歸檔，與HTML文件分開（這樣不僅有助于頁面緩存，而且可以使后期Debug更容易），這之后再把CSS和JavaScript鏈接到HTML中，可以根據需要來對CSS和JavaScript代碼進行壓縮加密。

結構的搭建

HTML在結構上搭建上需要注意這些：

采用HTML5標準時開頭應該加上，像這樣：

html

     
        
    
      
        
Pesto
  
        
Pesto is good!
    

應在head標簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息：

html
    
    
    

在標簽的末尾引入JavaScript文件，這樣可以在頁面顯示之后再編譯JavaScript文件，以加快頁面讀取速度，同時有助于JavaScript對頁面中的元素進行操作，像這樣：

html  
    ...