http緩存與離線緩存
阿新 • • 發佈：2017-07-18
tex image 臨時文件 error 未能 llb ast vc6 緩存
一、http協議實現緩存
1. 緩存頭部
通用緩存、條件緩存、緩存控制三大類
| 頭部名稱 | 說明 | 請求/響應 |
| 通用緩存頭部 | 控制客戶端是否向服務器發送請求或者是服務端響應請求 | |
| cache-control | 用於隨報文傳遞的緩存提示 | |
| pragma | http1.0的，等於cache-control:no-cache，pragma優先級高於expires | |
| 條件頭部 | ||
| Last-Modified | 服務器響應時將文本最後修改時間放在此頭部一起傳送，如：Last-Modified:GMT | 響應 |
| If-Modified-Since | 客戶端發送收到的last-Modified的時間，讓服務器驗證，資源沒有修改則是304 | 請求 |
| If-Unmodified-Since | 若last-Modified沒有匹配上，返回412（預驗證失敗) | |
| ETag | 服務器響應時將文本的md5值跟隨此頭發送到客戶端 | 響應 |
| If-None-Match | 告訴服務器如果沒有匹配上ETag相關資源就重發，否則304 | |
| If-Match | 如果服務器沒有匹配上ETag相關資源，則響應412 |
其他緩存頭部 Vary | 向服務器請求時以Vary指定的字段來區分內容是否緩存了 data/age | 服務器響應時輸出資源的最後響應時間（從本地緩存讀取的資源不會有變化，也就是cache-control控制），而304的吃響應是有變化的
2. Vary
Vary: User-Agent, Accept-Encoding
告知服務器以User-Agent、Accept-Encoding兩個頭部的值區分緩存版本
3. cache-control的值說明
cache-control與expires是一致的，但expires是http1.0的東西，現代瀏覽器用得很少。
請求頭部
- max-age
- max-age=0:表示跳過強制緩存，進行協商緩存
- max-age= 10(>0)：客戶端在指定時間內不會向服務器請求獲取新的數據。
- no-cache： 告知（代理）服務器不直接使用緩存，要求向服務器發起請求,始終請求會被執行
- no-store: 所有內部不會被緩存或者放在瀏覽器臨時文件夾下面
- max-stale: 告知（代理）服務器 客戶端願意接收一個超過緩存時間的資源，如果設置了 值（單位：秒），max-stale:3，超過3秒的值，沒有則是任意時間
- min-fresh=seconds:客戶端想接受一個小於seconds秒內被更新過的資源，至少在未來seconds秒內文檔保持新鮮。chrome還是以max-age為準，firefox當值小於max-age時，以min-fresh為準，當值大於max-age時，直接無效
- no-transform：傳送沒有被轉換過的實體數據（如：壓縮），不知如何驗證
- only-if-cached：客戶端獲取緩存（若有），不用向服務器請求， 無緩存則原始請求
- cache-extension：自定義擴展值，如果服務器不支持則忽略
- 響應頭部
- max-age
指定響應多少秒之後過期（相對時間） - no-cache：不能直接使用緩存，要求向服務器發起請求（檢測新鮮程度），始終請求會被執行 no-cache覆蓋max-age的設置
- no-store: 所有內部不會被緩存或者放在瀏覽器臨時文件夾下面，始終請求會被執行 no-store覆蓋max-age的設置
- public：允許任何地方緩存，代理、cdn都可以
- private[=fieldName]：客戶端可以緩存private響應問，但通常只針對用戶，所以cdn、代理不緩存(未能測試出應用場景)
- no-transform：傳送沒有被轉換過的實體數據（如：壓縮），不知如何驗證
- only-if-cached：客戶端獲取緩存（若有），不用向服務器請求， 無緩存則原始請求
- must-revalidate：當前資源一定是向原服務器發出驗證請求的，若請求失敗返回504(而非代理服務器的緩存),也就是響應必須來源於原始服務器
- proxy-revalidate：與must-revalidate類似，但僅能用於共享緩存（代理服務器）
- s-maxage：與max-age一致，但只能用於共享緩存（如：代理）
- cache-extension：自定義擴展值，如果服務器不支持則忽略
- max-age
- 總結
-
- chrome瀏覽器對max-age>0、no-store、max-stale請求頭部支持不好，完全按鈕響應的max-age來控制緩存了，firefox是按照http規範實現的。
- If-Unmodified-Since：不會響應412的情況
-
- last-Modified值匹配成功
- 服務器需要響應2XX或412之外的狀態碼
- 請求發送過來的時間格式不對
二、瀏覽器離線緩存
實現離線緩存的步驟：
- 創建一個緩存文件，如：main.appcache，建議文件以.appcache結尾
- 在web服務器上添加mine-type標識頭，如：text/cache-manifest
- html文件引入此內容，如下代碼：
<html manifest="test.appcache" > <head> <meta charset="UTF-8"> </head> <body> </body> </html>
- main.appcache值說明
CACHE MANIFEST
# 首次下載後需要緩存的文件
# 禁止緩存的文件
network:
# 回退文件(頁面無法訪問時回退的頁面)
fallback:
- 事件與狀態
5.1 狀態
| 狀態值 | 說明 |
| 0 | 未緩存 |
| 1 | 空閑（緩存為最新狀態） |
| 2 | 檢查中 |
| 3 | 下載中 |
| 4 | 更新就緒 |
| 5 | 緩存過期 |
5.2 事件
| 事件名 | 說明 |
| checking | 正在檢查 |
| downloading | 正在下載 |
| updatereadey | 更新完成 |
| obsolete | 緩存過期 |
| cached | 空閑，緩存為最新狀態 |
| error | 緩存報錯時觸發的事件 |
| noupdate | 檢查更新結束，沒有需要更新的文件 |
window.applicationCache.addEventListener("cached",function(){
console.log("cached");
});
window.applicationCache.addEventListener("noupdate",function(){
console.log("noupdate");
})
- 註意事項
6.1 CACHE MANIFEST必須在首行，且要大寫
6.2 緩存文件，瀏覽器直接清理緩存是無效的
6.3 修改main.appcache文件任何內容，都會導致離線緩存重新加載，包含註釋信
6.4 引入main.appcache文件的html文件，會直接被離線緩存
6.5 緩存對象：window.applictionCache
http緩存與離線緩存