html meta 標籤和瀏覽器快取關係

Pandaaa發表於2018-02-07
HTML瀏覽器快取

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優先順序較高。

瀏覽器快取分為：強快取和協商快取。

  • 1、強快取：瀏覽器載入資源時，第一步先判斷它是否是強快取，如果是，瀏覽器將直接從自己的快取中讀取，不會向伺服器傳送請求。 上圖，status200，Size是from memory cache就是走的強快取。那麼什麼是強快取呢？瀏覽器又是咋判斷的呢？

    • Expires欄位：

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

    • Cache-Control欄位：

      • 1、瀏覽器第一次向伺服器請求，伺服器返回資源並在response header加上Cache-Control欄位，也是快取的有效期，但是是相對時間，比如：Cache-Control:max-age=56700000。
      • 2、瀏覽器接收資源，把資源和相應頭快取下來。
      • 3、待到瀏覽器再次請求這個資源時，先在快取找，根據第一次的請求時間和Cache-Control相對時間算出過期時間。若沒過期，直接從快取載入。若過期了，再向伺服器請求。

Expires欄位但是絕對時間有時會有偏差，所以引出了Cache-Control。 Cache-Control彌補了Expires的不足，更安全有效。

服務端如何判斷快取已失效？

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

  • 2、協商快取：當瀏覽器判斷不是強快取，就會發向伺服器發請求，判斷是否是協商快取。如果是，伺服器會返回304Not Modified，瀏覽器從快取中載入。那什麼又是協商快取呢？

    • Last-Modified和If-Modified-Since欄位：

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

    • ETag、If-None-Match：

      • 但有時候伺服器上資源有變化，單最後修改時間沒更新，則引出下面兩個欄位。
      • 1、瀏覽器第一次向伺服器請求，伺服器返回資源並在response header上加ETag欄位。表示資源本身，資源有變化，則該欄位有變化。
      • 2、瀏覽器再次向伺服器請求這個資源時，請求頭攜帶If-None-Match欄位。若這兩個欄位相同，則代表資源沒有變化，伺服器返回304Not Modified，瀏覽器從快取中載入。若兩個欄位不同，證明資源有變動，伺服器正常返回資源。

引用 ：

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

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

歡迎大家來我主頁拍磚

lpove.github.io/hexo/

相關文章