前端學習筆記之看不見的HTML標籤

此筆記主要從交互時間、性能優化、搜索優化場景出發，分別記錄meta標籤、title標籤、link標籤，以及script標籤在這些場景中的重要作用。

交互實現

有些時候，我們爲了實現某些效果，需要去寫過多的代碼，這會導致開發成本變高，代碼健壯性差，且越來越難維護，而通過meta和title等一些隱藏標籤則也能實現相同的交互效果。

meta標籤：自動刷新/跳轉

在實現頁面自動刷新或跳轉功能時，類似PPT自動播放的效果，大家首先想到使用JavaScript定時器控制跳轉來實現。但通過meta標籤卻能以更簡潔的方式實現。

1. 自動跳轉

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

上面的代碼即能實現5s之後自動跳轉到同域下的page2.html。

2. 間隔時間刷新頁面

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

上面的代碼即能實現每個一分鐘刷新一次頁面。可用於大屏展示。

3. 總結

• 使用meta標籤的刷新和跳轉操作是不可取消的，需要對刷新時間內間隔或者需要手動取消的，還是推薦使用JavaScrict定時器來實現。
• 想實現頁面的定時刷新或跳轉（比如某些頁面缺乏訪問權限，在 x 秒後跳回首頁這樣的場景）建議你可以實踐下 meta 標籤的用法。

title 標籤與 Hack 手段：消息提醒

通過修改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 標籤內容，模擬了類似消息提醒的閃爍效果。
當然以上只是實例，在html5標準發佈之後，前後端的通信已經可以使用WebSocket 協議，而瀏覽器也已經開放了圖標閃爍、彈出系統消息之類的接口。
通過修改標籤，除了可用於消息提醒，還可將一些關鍵信息顯示到標籤上（比如下載時的進度、當前操作步驟），從而提升用戶體驗。

性能優化

性能問題的兩個主要原因：

• 渲染速度滿
• 請求時間長

性能優化雖然涉及很多複雜的原因和解決方案，但其實只要通過合理地使用標籤，就可以在一定程度上提升渲染速度以及減少請求時間。

script 標籤：調整加載順序提升渲染速度

由於瀏覽器的底層運行機制，渲染引擎在解析html時，若遇到script標籤應用文件，會按如下執行：

1. 暫停解析過程，通知網絡線程加載文件；
2. 切換隻JavaScript引擎來執行對應代碼；
3. 代碼執行完成之後切換至渲染引擎繼續渲染頁面。

藉助script標籤的3個屬性來減少頁面加載時間損耗：

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

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

合理利用 link 標籤的 rel 屬性值來進行預加載，進一步提升渲染速度。

link標籤的rel屬性值描述：

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

搜索優化

合理地使用 meta 標籤和 link 標籤，搜索引擎更好地理解和收錄我們的頁面。

meta 標籤：提取關鍵信息

通過 meta 標籤可以設置頁面的描述信息，從而讓搜索引擎更好地展示搜索結果。

<meta content="此處填寫一些關鍵字，用英文逗號隔開" name="keywords">

link 標籤：減少重複

對於同一個頁面有多個網址或者某些重定向的情況，我們可以進行合併，比如：

https://xx.com/a.html
https://xx.com/detail?id="abcd"

那麼在這些頁面中可以這樣設置：

<link href="https://xx.com/a.html" rel="canonical">

這樣可以讓搜索引擎避免花費時間抓取重複網頁。不過需要注意的是，它還有個限制條件，那就是指向的網站不允許跨域。

筆記內容來自拉勾教育朱德龍講師講解的 前端高手進階 第一講