http緩存

http緩存

有時候爲了頁面加載快，咱們須要讓一部分資源默認緩存在本地，這樣不用每次都進行請求。但如果發佈也被緩存下來，這樣就很尷尬了，原本已經更新了，卻依舊顯示上一次的，這樣就不合理了

各類類型的緩存

• 私有緩存 [local (private) cache]
  • 只能用於單獨用戶 (eg: 瀏覽器設置中的「緩存」選項。瀏覽器緩存擁有用戶經過 HTTP 下載的全部文檔。)
• 共享緩存 [shared cache]
  • 共享緩存能夠被多個用戶使用 (eg: ISP 或你所在的公司可能會架設一個 web 代理來做爲本地網絡基礎的一部分提供給用戶。這樣熱門的資源就會被重複使用，減小網絡擁堵與延遲。)

緩存操做的目標

常見的HTTP緩存只能存儲GET響應，對於其餘類型的響應無能爲力

緩存控制

• Cache-control 頭

  HTTP/1.1定義的 Cache-Control 頭用來區分對緩存機制的支持狀況， 請求頭和響應頭都支持這個屬性。經過它提供的不一樣的值來定義緩存策略

  • 緩存請求指令 [客戶端]

    Cache-Control: max-age=<seconds>
      Cache-Control: max-stale[=<seconds>]
      Cache-Control: min-fresh=<seconds>
      Cache-control: no-cache 
      Cache-control: no-store
      Cache-control: no-transform
      Cache-control: only-if-cached

  • 緩存響應指令 [服務端]

    Cache-control: must-revalidate
      Cache-control: no-cache
      Cache-control: no-store
      Cache-control: no-transform
      Cache-control: public
      Cache-control: private
      Cache-control: proxy-revalidate
      Cache-Control: max-age=<seconds>
      Cache-control: s-maxage=<seconds>

  • 指令解讀
    • 可緩存性
      • public 代表響應能夠被任何對象（包括：發送請求的客戶端，代理服務器，等等）緩存
      • private 代表響應只能被單個用戶緩存，不能做爲共享緩存（即代理服務器不能緩存它）,能夠緩存響應內容
      • no-cache 在發佈緩存副本以前，強制高速緩存將請求提交給原始服務器進行驗證
      • only-if-cached 代表客戶端只接受已緩存的響應，而且不要向原始服務器檢查是否有更新的拷貝
    • 到期
      • max-age=<seconds> 設置緩存存儲的最大週期，超過這個時間緩存被認爲過時(單位秒)。與Expires相反，時間是相對於請求的時間
      • s-maxage=<seconds> 覆蓋max-age 或者 Expires 頭，可是僅適用於共享緩存(好比各個代理)，而且私有緩存中它被忽略
      • max-stale[=<seconds>] 代表客戶端願意接收一個已通過期的資源。 可選的設置一個時間(單位秒)，表示響應不能超過的過期時間
      • min-fresh=<seconds> 表示客戶端但願在指定的時間內獲取最新的響應
    • 從新驗證和從新加載
      • must-revalidate 緩存必須在使用以前驗證舊資源的狀態，而且不可以使用過時資源
      • proxy-revalidate 與must-revalidate做用相同，但它僅適用於共享緩存（例如代理），並被私有緩存忽略
    • 其餘
      • no-store 緩存不該存儲有關客戶端請求或服務器響應的任何內容
      • no-transform 不得對資源進行轉換或轉變 (Content-Encoding, Content-Range, Content-Type等HTTP頭不能由代理修改)
    • 示例

      • 禁止緩存

        Cache-Control: no-cache, no-store, must-revalidate

      • 緩存靜態資源

        // 圖像，CSS文件和JavaScript文件
          Cache-Control:public, max-age=31536000

• 禁止進行緩存

  Cache-Control: no-store

• 強制確認緩存
  每次有請求發出時,該請求應該會帶有與本地緩存相關的驗證字段發到服務器，服務器端會驗證請求中所描述的緩存是否過時，若爲過時（返回 304），則緩存才使用本地緩存副本。

  Cache-Control: no-cache

• 私有緩存和公共緩存
  • private 通常應用於瀏覽器私有緩存
  • public 能夠被任何中間人（eg: 中間代理， cdn等）緩存
• 緩存過時機制
  • max-age=<seconds> 資源可以被緩存的最大時間, 是距離請求發起的時間的秒數

  • Expires 響應頭包含日期/時間， 即在此時候以後，響應過時。 如今基本不使用了

    若是在Cache-Control響應頭設置了 "max-age" 或者 "s-max-age" 指令，那麼 Expires 頭會被忽略。

    // http-date: 一個 HTTP-日期 時間戳 (eg: Wed, 21 Oct 2015 07:28:00 GMT)
      Expires: <http-date>

• 緩存驗證確認 must-revalidate

  那就意味着緩存在考慮使用一個陳舊的資源時，必須先驗證它的狀態，已過時的緩存將不被使用

• Pragma 頭 是HTTP/1.0標準中定義的一個header屬性 (等同於 Cache-Control: no-cache),可是HTTP的響應頭不支持這個屬性

解決方案

實現方案

• 新鮮度
• 加速資源

• 實現方案

• 前端設置
  • 添加時間戳 [get請求] (eg: index.css?v=Date.now())
  • 請求頭設置
• 服務端設置【基於 Apache/2.4.39】 參考
  1. 找到 httpd.conf
  2. 搜索到下面兩個，同時去掉#

  LoadModule expires_module modules/mod_expires.so
  LoadModule headers_module modules/mod_headers.so

  1. 文本後添加
  • expire 開啓

  <IfModule expires_module>
  
    #打開緩存
    ExpiresActive on 
    #css文件緩存7200000/3600/24=83天
    ExpiresByType text/css A7200000
  
    #js文件緩存83天
    ExpiresByType application/x-javascript A7200000
    ExpiresByType application/javascript A7200000
  
    #html文件緩存83天
    ExpiresByType text/html A7200000
  
    #圖片文件緩存83天
    ExpiresByType image/jpeg A7200000
    ExpiresByType image/gif A7200000
    ExpiresByType image/png A7200000
    ExpiresByType image/x-icon A7200000
  
  </IfModule>

  • Cache-Control

  <FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
  　　Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
  
  <FilesMatch "\.(css|js)$">
  　Header set Cache-Control "max-age=604800, public"
  </FilesMatch>

  1. 重啓apache

  注意：如果報\xe3\x80\x80（空格的問題）在對應行清除空格便可

總結

• 這個依舊沒有我想象的那般隨意，也覺得着，須要先後一塊兒整，而不是單純依靠前端便可
• 上述找了大量資料，如有不當不處還請諒解