提到HTML標簽，我們會非常熟悉，開發中經常使用。但我們往往關註更多的是頁面渲染效果及交互邏輯，也就是對用戶可見可操作的部分，比如表單、菜單欄、列表、圖文等。其實還有一些非常重要卻容易忽視的標簽，這些標簽大多數用在頁面頭部head標簽內，雖然對用戶不可見，但如果在某些場景下，比如交互實現、性能優化、 ...

1、交互實現
- 1.1 meta標簽：自動刷新/跳轉
- 1.2 title標簽：消息提醒
2、性能優化
- 2.1 script標簽：調整載入順序提升渲染速度
- 2.2 link標簽：通過預處理提升渲染速度
3、搜索優化
總結

提到HTML標簽，我們會非常熟悉，開發中經常使用。但我們往往關註更多的是頁面渲染效果及交互邏輯，也就是對用戶可見可操作的部分，比如表單、菜單欄、列表、圖文等。其實還有一些非常重要卻容易忽視的標簽，這些標簽大多數用在頁面頭部head標簽內，雖然對用戶不可見，但如果在某些場景下，比如交互實現、性能優化、搜索優化，合理利用它們可以讓我們在開發中達到事半功倍的效果。

1、交互實現

在實現一個功能的時候，我們編寫的代碼越多，不僅開發成本越高，而且代碼的健壯性也越差。因此我們在開發中提倡編碼簡約原則：Less code, less bug

1.1 meta標簽：自動刷新/跳轉

meta標簽妙用場景一：假如每隔一分鐘就需要刷新頁面，這個時候就可以用到meta標簽：

<meta http-equiv="Refresh" content="60">

meta標簽妙用場景二：假如想讓某個頁面在對用戶展示一段時間後，然後跳轉到其他頁面去，也可用到meta標簽：

<meta http-equiv="Refresh" content="5; URL=page2.html">

上面這行代碼的意思是當前頁面展示5s之後，跳轉到page2.html頁面去。

1.2 title標簽：消息提醒

B/S架構有很多優點，比如版本更新方便、跨平臺、跨終端，但在處理某些場景時，比如即時通信時，會變得有點麻煩。

因為前後端通信深度依賴HTTP協議，而HTTP協議採用“請求-響應”模式，這就決定了服務端也只能被動地發送數據。一種低效的解決方案是客戶端通過輪詢機制獲取最新消息（HTML5下可使用WebSocket協議）。

另外在HTML5標準發佈之前，瀏覽器沒有開放圖標閃爍、彈出系統消息之類的介面，因此消息提醒功能實現比較困難。但是我們可以通過修改title標簽來達到類似的效果（HTML5下可使用Web Notifications API彈出系統消息）。

下麵這段代碼，通過定時修改title標簽內容，模擬了類似消息提醒的閃爍效果：

let msgNum = 1 // 消息條數
let cnt = 0 // 計數器
const inerval = setInterval(() => {
  cnt = (cnt + 1) % 2
  if(msgNum===0) {
    // 通過DOM修改title
    document.title += `聊天頁面`
    clearInterval(interval)
    return
  }
  const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
  document.title = `${prefix}聊天頁面`
}, 1000)

實現效果如下圖所示，可以看到title標簽名稱上有提示文字在閃爍。

通過模擬消息閃爍，可以讓用戶在瀏覽其他頁面的時候，及時得知服務端返回的消息。

通過定時修改title標簽內容，除了用來實現閃爍效果之外，還可以製作其他動畫效果，比如文字滾動，但需要註意瀏覽器會對title標簽文本進行去空格操作；還可以將一些關鍵信息顯示到標簽上（比如下載時的進度、當前操作步驟），從而提升用戶體驗。

2、性能優化

性能優化是前端開發中避不開的問題，性能問題無外乎兩方面原因：渲染速度慢、請求時間長。性能優化雖然涉及很多複雜的原因和解決方案，但其實只要通過合理地使用標簽，就可以在一定程度上提升渲染速度，以及減少請求時間。

2.1 script標簽：調整載入順序提升渲染速度

由於瀏覽器的底層運行機制，一般情況下，渲染引擎在解析HTML時從上往下執行，若遇到script標簽引用文件，則會暫停解析過程，同時通知網路線程載入引用文件。
文件載入完成後，再切換至JavaScript引擎來執行對應代碼，代碼執行完成之後，再切換至渲染引擎繼續渲染頁面。
即預設情況下，載入HTML的過程主要有四個步驟：

從上往下解析HTML;
碰到script標簽引用文件，暫停解析，同時通知網路線程載入引用文件；
文件載入完成，切換至JavaScript引擎來執行對應代碼；
代碼執行完成後，再切換至渲染頁面，繼續渲染HTML。

從這一過程可以看出，頁面渲染過程包含了請求文件以及執行文件的時間，但頁面的首次渲染可能並不依賴這些文件。這些請求和執行文件的動作反而延長了用戶看到頁面的時間，從而降低了用戶體驗。

為了減少這些時間損耗，可以藉助script標簽的三個屬性來實現：

async屬性：立即請求文件，但不阻塞渲染引擎，而是文件載入完成後，再阻塞渲染引擎並立即執行文件內容。
defer屬性：立即請求文件，但不阻塞渲染引擎，等到解析完HTML之後再執行文件內容。
HTML5標準type屬性，對應值為“module”：讓瀏覽器按照ECMA Script6標准將文件當作模塊進行解析，預設阻塞效果同defer，也可以配合async在請求完成後立即執行。

通過對比，我們看出，設置defer和type="module"最推薦，都是在HTML渲染完成後才執行script引用的文件代碼。
效果圖比較見下麵：

另外註意，當渲染引擎解析HTML遇到script標簽引入文件時，會立即進行一次渲染。

所以這也就是為什麼構建工具會把編譯好的引用JavaScript代碼的script標簽放入到body標簽底部。因為當渲染引擎執行到body底部時，會先將已解析的內容渲染出來，然後再去請求相應的JavaScript文件。

如果是內聯腳本（即不通過src屬性引用外部腳本文件直接在HTML中編寫JavaScript代碼的形式），渲染引擎則不會渲染，先執行腳本代碼再渲染頁面。

我們可以來做個試驗驗證下，第一個測試：在HTML頁面中間引用外部js文件

<!DOCTYPE html>
<html lang="en">
    <head><meta charset="UTF-8"><title>引用js腳本</title></head>
    <body>
        <br/><br/><br/><br/><br/>
        <h3>古人學問無遺力，少壯工夫老始成；</h3>
        <script type="text/javascript" src="./test.js"></script>
        <h3>紙上得來終覺淺，絕知此事要躬行。</h3>
    </body>
</html>

引用外部js腳本test.js：alert('男兒何不帶吳鉤，收取關山五十州');
效果圖：

第二個測試：在HTML頁面中間內聯js腳本

<!DOCTYPE html>
<html lang="en">
    <head><meta charset="UTF-8"><title>內聯js腳本</title></head>
    <body>
        <br/><br/><br/><br/><br/>
        <h3>古人學問無遺力，少壯工夫老始成；</h3>
        <script type="text/javascript">
            alert('男兒何不帶吳鉤，收取關山五十州');
        </script>
        <h3>紙上得來終覺淺，絕知此事要躬行。</h3>
    </body>
</html>

效果圖：

2.2 link標簽：通過預處理提升渲染速度

在大型單頁應用進行性能優化時，也許會用到按需賴載入的方式來載入對應的模塊。但是如果能合理利用link標簽的rel屬性值來進行預載入，就能進一步提升渲染速度。

dns-prefetch：當link標簽的rel屬性值為“dns-prefetch”時，瀏覽器會對某個功能變數名稱預先進行dsn解析並緩存。這樣，當瀏覽器在請求同功能變數名稱資源的時候，能省去從功能變數名稱查詢IP的過程，從而減少時間損耗。下圖是淘寶網設置的dns預解析。
preconnect：讓瀏覽器在一個HTTP請求正式發給伺服器前預先執行一些操作，這包括dns解析、TLS協商、TCP握手，通過消除往返延遲來為用戶節省時間。
prefetch/preload：兩個值都是讓瀏覽器預先下載並緩存某個資源，但不同的是，prefetch可能會在瀏覽器忙時被忽略，而preload則是一定會被預先下載。
prerender：瀏覽器不僅會載入資源，還會解析執行頁面，進行預渲染。

這幾個屬性值恰好反映了瀏覽器獲取文件的過程，它們獲取文件的流程：

設置dns-prefetch, 然後判斷是否有對dns進行預解析。沒有則進行dns解析，有則執行下一步preconnect；
執行preconnect, 對ddns、TLS、TCP進行預連接，然後判斷是否已經TCP連接。沒有則進行TCP連接，有則執行下一步prefetch/preload；
執行prefetch/preload，載入資源文件。然後判斷資源文件是否已經預載入。沒有則進行http進行資源請求下載，有則進行下一步prerender；
執行prerender, 預渲染頁面。然後判斷預渲染是否成功。沒有預渲染成功則進行渲染，預渲染成功則呈現給用戶看。

流程圖如下：

3、搜索優化

我們寫的前端代碼，除了要讓瀏覽器更好的執行，有時候也要考慮更方便其他程式（如搜索引擎）理解。合理地使用meta標簽和link標簽，恰好能讓搜索引擎更好的理解和收錄我們的頁面。

3.1 meta標簽：提取關鍵信息

通過meta標簽可以設置頁面的描述信息，從而讓搜索引擎更好的展示搜索結果。
比如在百度中搜索“拉勾”，就會發現網站的描述，這些描述信息就是通過meta標簽專門為搜索引擎設置的，目的是方便用戶預覽搜索到的結果。
為了讓搜索引擎更好的識別頁面，除了描述信息之外還可以使用關鍵字，這樣即使頁面其他地方沒有包含搜索內容，也可以被搜索到（當然搜索引擎有自己的權重和演算法，如果濫用關鍵字是會被降權的，比如Google引擎會對堆砌大量相同關鍵詞的網頁進行懲罰，降低它被搜索的權重）。

當我們搜索關鍵字“垂直互聯網招聘”的時候搜索結果會顯示拉勾網的信息，雖然顯示的搜索內容上並沒有看到“垂直互聯網招聘”字樣，實際上因為拉勾網頁面中設置了這個關鍵字。
對應代碼如下：

<meta content="拉勾,拉勾網,拉勾招聘,拉鉤, 拉鉤網 ,互聯網招聘,拉勾互聯網招聘, 移動互聯網招聘, 垂直互聯網招聘, 微信招聘, 微博招聘, 拉勾官網, 拉勾百科,跳槽, 高薪職位, 互聯網圈子, IT招聘, 職場招聘, 獵頭招聘,O2O招聘, LBS招聘, 社交招聘, 校園招聘, 校招,社會招聘,社招" name="keywords">

3.2 link標簽：減少重覆

有時候為了用戶訪問方便或者出於歷史原因，對於同一個頁面會有多個網址，又或者在某些重定向頁面，比如：https://xx.com/a.html、 https://xx.com/detail?id=abcd，那麼在這些頁面中可以設置：<link href="https://xx.com/a.html" rel="canonical">這樣可以讓搜索引擎避免花費時間抓取重覆網頁。不過需要註意的是，它還有個限制條件，那就是指向的網站不允許跨域。
當然，要合併網址還有其他的方式，比如使用站點地圖，或者在http請求響應頭部添加rel="canonical"。

3.3 延伸內容：OGP(開放圖表協議)

前面說的是HTML5標準的一些標簽和屬性，下麵再延伸說一說基於meta標簽擴展屬性值實現的第三方協議---OGP(open graph protocal, 開放圖表協議)。

OGP是Facebook公司在2010年提出的，目的是通過增加文檔信息來提升社交網頁在被分享時的預覽效果。你只需要在一些分享頁面中添加一些meta標簽及屬性，支持OGP協議的社交網站就會在解析頁面時生成豐富的預覽信息，比如站點名稱、網頁作者、預覽圖片。具體預覽效果會因各個網站而有所變化。

下麵是微信文章支持OGP協議的代碼，可以看到通過meta標簽屬性值聲明瞭：標題、網址、預覽圖片、描述信息、站點名稱、網頁類型和作者信息。

總結

本篇從交互實現、性能優化、搜索優化場景觸發，分別講解了meta標簽、title標簽、link標簽，一級script標簽在這些場景中的重要作用，希望這些內容你都能應用到工作場景中，不再只是瞭解，而是能夠熟練運用。
最後在思考一下：你還知道哪些“看不見”的標簽及用法？

前端進階筆記之核心基礎知識---那些HTML標簽你熟悉嗎？