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

時間 2020-06-29

標籤前端進階筆記核心基礎知識那些 html 標籤熟悉欄目 HTML 简体版

原文原文鏈接

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

一、交互實現

在實現一個功能的時候，咱們編寫的代碼越多，不只開發成本越高，並且代碼的健壯性也越差。所以咱們在開發中提倡編碼簡約原則：Less code, less bugjavascript

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

meta標籤妙用場景一：假如每隔一分鐘就須要刷新頁面，這個時候就能夠用到meta標籤：html

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

meta標籤妙用場景二：假如想讓某個頁面在對用戶展現一段時間後，而後跳轉到其餘頁面去，也可用到meta標籤：前端

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

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

java

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.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, 預渲染頁面。而後判斷預渲染是否成功。沒有預渲染成功則進行渲染，預渲染成功則呈現給用戶看。

流程圖以下：

三、搜索優化

咱們寫的前端代碼，除了要讓瀏覽器更好的執行，有時候也要考慮更方便其餘程序（如搜索引擎）理解。合理地使用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"。