如何寫出高效率的HTML

時間 2019-11-07

標籤如何寫出高效率 html 欄目 HTML 简体版

原文原文鏈接

我的翻譯，歡迎轉載！
英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/
第一次翻譯國外的博文，有什麼意見和建議歡迎提出！javascript

咱們該如何提高網頁的性能?

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

寫代碼的方式能夠有不少種，特別是HTML。本文只是根據咱們的經驗來作出相對最好的建議，並不表明每條建議在任何狀況下都能達到效果，僅供參考。html

內容簡介

各司其職：樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式；

一絲不苟：開發過程當中必定要加入代碼校驗工具，以確保代碼沒有任何語法以及邏輯上的錯誤；

乾淨整潔：使用自動排版工具來保持代碼結構和格式的一致性；

熟練語言：應瞭解全部的元素用法，並在HTML多使用語義化的元素；

一視同仁：設計過程當中必定要考慮到全部的狀況，備用方案很重要，甚至要專門爲特殊人羣使用ARIA (Accessible Rich Internet Application)，以保證你的網站能夠經過屏幕閱讀器或者純文本瀏覽器來展現；

全面測試：經過各類工具來測試你的網站在不一樣設備和不一樣尺寸屏幕上的表現。

Web三基友

HTML的含義應該很少解釋了，請自行百度百科。
首先要說的是，HTML和CSS兩兄弟雖然彼此充滿基情，可是也不能把關係搞得太複雜，樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式，好比不要僅僅爲了使文字變大而使用<h1>、<h2>、<h3>這些標題標籤，也不要僅僅爲了縮進而使用<blockquote>標籤。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默認樣式表，HTML元素默認的顯示方式都是由這些默認樣式表來決定的。好比，Chrome中<h1>默認的樣式是32px bold，字體是Times.java

基友三原則：
1. HTML用於創建結構，CSS用於渲染樣式，JavaScript用於控制行爲；
2. 首先完成HTML的設計，而後根據樣式需求來設計CSS，最後在確實須要的狀況下才設計JavaScript；
3. 將CSS和JavaScript文件進行歸檔，與HTML文件分開（這樣不只有助於頁面緩存，並且可使後期Debug更容易），這以後再把CSS和JavaScript連接到HTML中，能夠根據須要來對CSS和JavaScript代碼進行壓縮加密。web

結構的搭建

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

採用HTML5標準時開頭應該加上<!DOCTYPE html>，像這樣：瀏覽器

html<!DOCTYPE html>
<html>
    <head> 
        <title>Recipes: pesto</title>
    </head>
    <body>  
        <h1>Pesto</h1>  
        <p>Pesto is good!</p>
    </body>
</html>

應在head標籤中引入CSS文件，這樣瀏覽器就能夠在輸出HTML以前獲取CSS信息：緩存

html<head>
    <title>My pesto recipe</title>
    <link rel="/css/global.css">
    <link rel="css/local.css">
</head>

在<body>標籤的末尾引入JavaScript文件，這樣能夠在頁面顯示以後再編譯JavaScript文件，以加快頁面讀取速度，同時有助於JavaScript對頁面中的元素進行操做，像這樣：服務器
```
html<body>  
    ...  
    <script src="/js/global.js">  
    <script src="js/local.js">
</body>
```

對元素的操做應添加在JavaScript代碼中，而不要在HTML中添加，下面這個例子就是錯誤的，這樣後期難以維護。app

好比這樣寫就不太好：

index.html

html<head>
    ... 
    <script src="js/local.js">
</head>
<body onload="init()">
    ... 
    <button onclick="handleFoo()">Foo</button>
    ...
</body>

這樣寫就好多了

index.html

html<head>
    ...
</head>
<body> 
    ...
    <button id="foo">Foo</button>
    ... 
    <script src="js/local.js">
</body>

js/local.js

javascriptinit(); 
var fooButton =  document.querySelector('#foo');
fooButton.onclick = handleFoo();

代碼校驗

雖然如今瀏覽器的容錯力愈來愈高，但這不能成爲代碼粗製濫造的藉口。無論何時，正確的HTML代碼都更易於debug、體積更小、運行更快、渲染時消耗資源更少，而錯誤的HTML代碼只會使頁面的最終設計難以實現想要的效果。特別是在使用模板來開發時，正確有效的HTML就更顯得尤其重要，也許一個正常運行的模塊會在其餘環境中出現可怕的異常。

如何才能提升HTML的正確性呢？能夠有這些方式：

在項目中加入校驗過程：能夠在代碼編輯器中使用HTMLHint、SublimeLinter這類代碼校驗插件，也能夠在build的時候使用HTMLHint with Grunt這類校驗工具，還能夠經過W3C HTML validator等網站來在線檢測代碼；
儘可能採用HTML5標準；
確保正確的HTML層級：嵌套元素時確保元素首尾完整，在一個有大量內容的元素的結束標籤後應添加註釋，這樣有助於後期debug，特別是在使用模板的時候，以下所示：
```
html<div id="foobar">
    ...
</div> 
```
在全部不能自動結束的元素末尾添加結束標籤；
- 好比這個例子，這樣寫也能夠能夠正常運行：
```
html<p>Pesto is good to eat...
<p>...and pesto is easy to make.
```
- 不過仍是下面這樣比較不容易出錯：
```
html<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>
```
</li>結束標籤不是必須的，因此有些人認爲能夠不寫</li>，這能夠接受，可是</ul>和</ol>標籤必定要加：
```
html<ul>  
    <li>Basil  
    <li>Pine nuts  
    <li>Garlic
</ul>
```

<video>和<audio>元素必需要有結束標籤：

html<!-- 這樣寫很差 -->
<video src="foo.webm" />
<!-- 仍是這樣寫吧 -->
<video src="foo.webm">  
    <p>Video element not supported.</p>
</video>

另外一方面，要去掉冗餘代碼：

像<img>和<link>這一類元素能夠不加結束標籤；
布爾型的屬性能夠不賦值，只要該屬性出現，值就爲true；
- 下面這樣是能夠運行的（沒有加autoplay和controls）：
```
html<video src="foo.webm">
```
- 這樣就不能運行，由於這兩個屬性值必須是true：
```
html<video src="foo.webm" autoplay="false" controls="false">
```
- 這樣改一下就能夠運行了：
```
html<video src="foo.webm" autoplay="true" controls="true">
```
- 這樣寫會更易讀：
```
html<video src="foo.webm" autoplay controls>
```
CSS和 JavaScript連接不須要type屬性，他們就是他們。

良好的代碼排版

保持一致的代碼排版可使HTML代碼更易於理解、優化和debug，要作到良好的代碼排版應注意如下這幾點：

在項目中保持統一的HTML代碼風格；
使用代碼編輯器來幫助你自動排版，好比在Sublime Text中可使用自帶的Reindent，也能夠找一些自動排版插件來幫助你。一樣也可使用一些在線工具好比CSS Beautifier和JS Beautifier；
在HTML中用縮進來分層更易於閱讀，若是代碼編輯器沒有自動縮進功能的話能夠自行修改相應的設置。當你發現你的HTML層級過深的時候，那就表示你須要重構一下你的HTML了；
縮進能夠經過空格或者Tab來實現，但必定不要二者同時使用；
用更直接易讀的方式寫HTML代碼，好比這句話，就能夠很明顯的看出這是個標題：
```
html<h2><a href="/contact">Contact</a><h2>
```
這樣寫的話就更像是一個連接：
```
html<a href="/contact"><h2>Contact</h2></a>
```
元素要按常規放置，好比footer元素最好是放在HTML頁面的底部，雖然理論上把它放在任何地方均可以正常運行；
統一全部引號的使用規則，不要這裏用雙引號，那裏又單引號；
使用小寫字母來寫標籤和屬性，大寫字母很不易讀，像這樣：
```
html<A HREF="/">Home</A>
```
混合式的寫法簡直就是反人類：
```
html<H2>Pesto</h2>
```

語義化設計

語義化的意思是從名稱一眼就能看出其內容和做用是什麼，HTML的標籤就是經過使用淺顯易懂的元素名和屬性名來實現語義化的。HTML5又引進了一些新的語義化元素，好比<header>, <footer>和<nav>。
爲了是你的代碼更易理解，必定要針對內容使用相應的語義化元素：

標題使用<h1> (<h2>, <h3>…)，列表使用<ul>或者<ol>；
<article>內容中的標題應該從<h1>開始；
在適當的地方使用HTML5的新元素，好比<header>, <footer>, <nav>和<aside>；
正文中的文本內容要用<p>標籤，內容的結構化可使用HTML5的新元素（或者<div>），不要顛倒；
修改文字樣式時，<em>和<strong>要比<i>和<b>更好些，由於前者語義更加明顯；
<form>中要包含<label>元素，input元素要有type、placeholder以及其餘必要的屬性，即便值爲空均可以；
不要把文字和元素混合在一塊兒，這樣容易致使佈局出錯，好比這樣：
```
html<div>
    Name: 
    <input type="text">
</div>
```
這樣寫會更好些：
```
html<div>
    <label>Name:</label>
    <input type="text">
</div>
```

佈局

首先再次強調一遍：

樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式。

佈局須要注意的問題有這些：

<p>元素用來放文字，而不是用來佈局。在瀏覽器自身的樣式表中默認<p>有margin和其餘樣式；
想實現換行可使用<block>元素或者CSS的display屬性，儘可能避免使用<br>來換行。文字內容中的換行能夠用<br>，但一般也不多這樣用，有時在詩文中會把<br>做爲標點來使用；
避免使用<hr>，由於這個元素對語義和結構都沒有太大幫助，反而<hr>極差的靈活性對佈局和顯示都有很大的影響；
不要濫用<div>，W3C對<div>的描述是這樣的：當沒有其餘元素可用時才能使用<div>。若是想讓<link>和<img>這類元素可以在結尾換行，能夠在樣式中添加display: block，這樣要比把它們放進<div>或者使用<br>來換行要好得多;
必須知道哪些是塊級元素，這樣就能夠避免把塊級元素放到<div>裏面，好比列表就不須要放到div裏面；
<table>是用來放表格數據的，不是用來佈局的；
Flex box如今愈來愈流行，學一學沒有壞處；
盒模型必定要掌握，必須知道何時該用padding，何時該用margin；
使用margin的規則：一般狀況下，margin都是添加在元素的bottom和right，有時也能夠是top或者left。不管如何，儘可能避免同時在bottom和top，或者right和left添加margin。能夠用last-of-type選擇器來去掉最後一個子元素的margin。

CSS方面

這篇文章雖然是講HTML的，但也有些CSS的注意事項想說一說：

不要將多句CSS寫在同一行；
不要重複使用同一個id；

有時候給父元素添加class要比給子元素添加更簡潔易維護（class的命名方式能夠採用BEM規則），像這樣：

html<!-- 這樣看着好累>o< --> 
<ul>  
    <li class="ingredient">Basil</li>  
    <li class="ingredient">Pine nuts</li>  
    <li class="ingredient">Garlic</li> 
</ul> 
<!-- 看起來舒服多了^v^ --> 
<ul class="ingredients">  
    <li>Basil</li>  
    <li>Pine nuts</li>  
    <li>Garlic</li> 
</ul>

易訪問性

要多爲用戶考慮，不一樣的設備條件、使用環境以及輸入法等都會給你的HTML帶來不一樣的體驗：

儘量的使用語義化元素；
要準備好備用內容：好比給<track>元素添加說明和副標題，給<video>和<audio>元素添加備用的文字或者圖片，視頻內容配上相應的截圖或海報，每張圖片都要加alt屬性（若是圖片只是用來裝飾頁面的話能夠給alt賦空值）;
連接要加title屬性，title必需要有意義，不要只是連接的複述；
在<input>元素中要加入type和placeholder；
設計時要儘可能加入ARIA (Accessible Rich Internet Application)。

其餘建議

符號的轉義，好比<和&符號，像這樣：<title>HTML & JavaScript</title>；
有些符號不須要轉義，好比破折號（如：4-5 weeks）還有貨幣符號（如：¢,€）；
在代碼中做用不明顯的地方適當的添加註釋（註釋在重構時的做用性舉足輕重，優秀的HTML代碼，不管多麼複雜均可以很好的閱讀和理解）；
有時全大寫的標題會起到吸引注意力的做用，但不必在HTML中真的輸入大寫的文字，能夠在CSS中經過修改text-transform和font-variant來完成。這樣作還有個好處，就是當用戶複製這段文字時，他們可能不想要全大寫的，像下面的<h4>，當用戶複製文字內容時，獲得的是大小寫混合的文字：
HTML
```
html<h4>W3C Web Accessibility Initiative ARIA guidance</h4>
```
CSS
```
cssh4 {
    font-variant: small-caps;
}
```

測試

重中之重，就是必定要作測試！
在工做流程、調試工具和部署過程當中均可以加入HTML測試。必定要測試你的頁面在不一樣條件的設備，不一樣大小的屏幕以及不一樣網速的環境下的讀取狀況。還要使用純文字瀏覽器（如： Lynx）或者屏幕閱讀器（如：ChromeVox）來測試頁面在特殊環境下的交互性。可使用Chrome Dev Tools device mode這種仿真器來監視頁面的變化。工做流程中能夠加入Page Speed, Web Page Test等工具來作自動化測試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。