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

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

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

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

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

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

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

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

、

、

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

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

默認(rèn)的樣式是32px bold，字體是Times.

  
基友三原則：

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

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

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

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

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

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

html

     
        
    
      
        
Pesto
  
        
Pesto is good!
    

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

html
    
    
    

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

html  
    ...