html meta 標籤和瀏覽器緩存關係

html 中 meta 的介紹

基本介紹

• meta 標籤主要是用來描述一個 html 網頁文檔的屬性的。 例如 做者、日期、時間、頁面刷新。
• 還能夠用於 seo 的搜索優化。

基本屬性

分爲必選和可選項

• 1.必選屬性：

  • content 屬性。該屬性是爲了定義與http-equiv或者name屬性相關的元信息，其中的內容是爲了便於搜索機器人查找信息和分類使用的。

• 2.可選屬性：

  • name 屬性。該屬性主要用於描述網頁。name屬性的值能夠有：author、description、keywords、generator等等
  • http-equiv 屬性。該屬性至關於http的頭文件做用，能夠向瀏覽器返回一些有用的信息，以幫助正確和精確的顯示內容。http-equiv屬性的值能夠有content-type、expires、refresh等等。

name 屬性 的通常應用

• keyword、description、author、robot 基本應用

// 語言格式
<meta charset="utf-8">

//關鍵字 和 描述 html 主體內容
<meta name="keywords" content="關於meta標籤,網頁,918之初">
<meta name="description" content="HTML中<meta>標籤如何正確使用">

// 做者信息
<meta name="author" content="somebody">
複製代碼

//便於 seo 搜索
<meta name="robot" content="none">
複製代碼

該屬性的值有all、none、index、noindex、follow和nofollow。默認爲all。

•   設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；

•   設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；

•   設定爲index：文件將被檢索；

•   設定爲follow：頁面上的連接能夠被查詢；

•   設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；

•   設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

http-equiv 的通常應用

• content-type(文檔內容類型：用於設定文檔的類型和字符集)
• expires(期限：能夠用於設定網頁的到期期限)
• pragma（cashe模式：便是否從緩存中訪問網頁內容）
• refresh(刷新：等待必定時間自動刷新或跳轉到其餘url)

// 文檔類型
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

// 必須是 GMT 格式
<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

// 是否設置緩存
<meta http-equiv="pragma" content="no-cache">

// 等待必定時間自動跳轉
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
複製代碼

標籤中在移動端的使用

• name屬性的viewport的值（移動端屏幕的縮放）

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
複製代碼

• name屬性的format-detection值。

  咱們能夠經過這個屬性禁止自動識別電話和郵箱。舉例以下：

<meta name="format-detection" content="telephone=no,email=no"/>
複製代碼

• name屬性的apple-mobile-web-app-capable值（網站開啓對web app程序的支持）

<meta name="app-mobile-web-app-capable" content="yes"/>
複製代碼

• name屬性的apple-mobile-web-app-status-bar-style值（改變頂部狀態條的顏色）

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
複製代碼

瀏覽器緩存機制

瀏覽器是如何判斷緩存是否過時？

• 應該是根據Response Header裏面的Cache-Control和Expires這兩個屬性，當兩個都存在時，Cache-Control優先級較高。

瀏覽器緩存分爲：強緩存和協商緩存。

• 一、強緩存：瀏覽器加載資源時，第一步先判斷它是不是強緩存，若是是，瀏覽器將直接從本身的緩存中讀取，不會向服務器發送請求。 上圖，status200，Size是from memory cache就是走的強緩存。那麼什麼是強緩存呢？瀏覽器又是咋判斷的呢？

  • Expires字段：

    • 一、瀏覽器第一次向服務器請求，服務器返回資源並在response header加上Expires字段，是客戶端緩存有效期，是絕對時間。
    • 二、瀏覽器接收資源，把資源和相應頭緩存起來。
    • 三、待到再次請求這個資源時，先在緩存中找，找到了看Expires字段，判斷是否過時。若沒過時直接從緩存加載。若過時了，再向服務器請求。

  • Cache-Control字段：

    • 一、瀏覽器第一次向服務器請求，服務器返回資源並在response header加上Cache-Control字段，也是緩存的有效期，可是是相對時間，好比：Cache-Control:max-age=56700000。
    • 二、瀏覽器接收資源，把資源和相應頭緩存下來。
    • 三、待到瀏覽器再次請求這個資源時，先在緩存找，根據第一次的請求時間和Cache-Control相對時間算出過時時間。若沒過時，直接從緩存加載。若過時了，再向服務器請求。

Expires字段可是絕對時間有時會有誤差，因此引出了Cache-Control。 Cache-Control彌補了Expires的不足，更安全有效。

服務端如何判斷緩存已失效？

• 服務端經過If-Modified-Since（Last-Modified）和If-None-Match（Etag）這兩個屬性的值來判斷緩存是否失效的。

• 二、協商緩存：當瀏覽器判斷不是強緩存，就會發向服務器發請求，判斷是不是協商緩存。若是是，服務器會返回304Not Modified，瀏覽器從緩存中加載。那什麼又是協商緩存呢？

  • Last-Modified和If-Modified-Since字段：

    • 一、瀏覽器第一次向服務器發請求，服務器返回資源並在response header加上Last-Modified字段，表示資源最後修改的時間。
    • 二、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since字段。若這兩個字段同樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個字段不同，說明資源修改過，服務器正常返回資源。

  • ETag、If-None-Match：

    • 但有時候服務器上資源有變化，單最後修改時間沒更新，則引出下面兩個字段。
    • 一、瀏覽器第一次向服務器請求，服務器返回資源並在response header上加ETag字段。表示資源自己，資源有變化，則該字段有變化。
    • 二、瀏覽器再次向服務器請求這個資源時，請求頭攜帶If-None-Match字段。若這兩個字段相同，則表明資源沒有變化，服務器返回304Not Modified，瀏覽器從緩存中加載。若兩個字段不一樣，證實資源有變更，服務器正常返回資源。

引用 ：

1 https://www.cnblogs.com/zhuzhenwei918/p/6028414.html

2 https://segmentfault.com/a/1190000012613216

歡迎你們來我主頁拍磚

lpove.github.io/hexo/