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

  
個人翻譯，歡迎轉(zhuǎn)載！

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

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

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

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

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

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

、

、

這些標(biāo)題標(biāo)簽，也不要僅僅為了縮進而使用

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

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

  
基友三原則：

  1. HTML用于建立結(jié)構(gòu)，CSS用于渲染樣式，JavaScript用于控制行為；

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

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

結(jié)構(gòu)的搭建

HTML在結(jié)構(gòu)上搭建上需要注意這些：

采用HTML5標(biāo)準(zhǔn)時開頭應(yīng)該加上，像這樣：

html

     
        
    
      
        
Pesto
  
        
Pesto is good!
    

應(yīng)在head標(biāo)簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息：

html
    
    
    

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

html  
    ...