1、互動實作
- 1.1 meta標簽：自動重繪/跳轉
- 1.2 title標簽：訊息提醒
2、性能優化
- 2.1 script標簽：調整加載順序提升渲染速度
- 2.2 link標簽：通過預處理提升渲染速度
3、搜索優化
- 3.1 meta標簽：提取關鍵資訊
- 3.2 link標簽：減少重復
- 3.3 延伸內容：OGP(開放圖表協議)
總結

提到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="https://www.cnblogs.com/tandaxia/p/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標簽在這些場景中的重要作用，希望這些內容你都能應用到作業場景中，不再只是了解，而是能夠熟練運用，
最后在思考一下：你還知道哪些“看不見”的標簽及用法？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14799.html

標籤：Html/Css

上一篇：vue2.0以上版本安裝sass(scss) 、vue專案啟動出現cannot GET /服務錯誤

下一篇：程式員的修煉-我們為什么會撰寫BUG

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