瀏覽器緩存知識筆記

瀏覽器緩存知識小結及應用 筆記：

一、強緩存的兩種方式：Expires與Cache-Control

　　a、強緩存在C#中的設置

      context.Response.AppendHeader("Cache-Control", "max-age=1000");
      context.Response.AppendHeader("Expires", DateTime.Now.AddMilliseconds(30 * 1000).ToUniversalTime().ToString("r"));

　　　注意：Expires必須設置爲GMT時間

　　b、強緩存在iis中的設置：選擇某一應用，在HTTP響應表頭中添加響應頭便可

　　c、Expires與Cache-Control一塊兒使用，且Cache-Control包含超時設置（即max-age）時，Cache-Control覆蓋Expires的做用

 

二、協商緩存【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】

　　a、【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】同時使用時，IIS服務器端會同時驗證二者，當都知足時則返回304狀態

　　　　補充：tomcat對二者同時使用的處理方式爲先驗證Modified，如不一樣纔會驗證etag

　　b、協商緩存表頭通常是由web服務器設置，在iis中，對mime類型中存在的文件類型（如htm、js、css等，但無aspx）的請求，iis會在響應頭中添加這兩類表頭

 

三、chrome的默認行爲

　　a、在地址欄中輸入url並回車，這種方式請求的頁面會按正常的方式處理緩存，即強緩存-》協商緩存-》服務器直接加載資源

　　b、f5刷新頁面，這時將忽略Expires與Cache-Control表頭，即忽略強緩存，但保留協商緩存

　　c、ctrl + f5強制刷新頁面，這時將忽略強緩存及協商緩存，發出新的請求直接從服務器加載資源

　　d、強制從新加載包括圖片在內的資源的方式：一、ctrl+shift+delete刪除瀏覽器的緩存，從新加載頁面；二、f12中，選中disabled cache複選框

 　  e、f5與ctrl + f5並不會影響頁面內iframe的緩存策略，即對於iframe，當主頁面使用這兩種方式刷新時，iframe的效果等同與在地址欄中輸入url並回車；iframe清緩存的方式是右擊-》從新加載框架（與按f5的效果相同）

　　f、瀏覽器對css、js、圖片等靜態文件默認增強緩存，而對html、aspx等文件不會。補充：文件類型的判斷依據是返回的Content-Type，而非請求文件的後綴名；另外，http響應類型爲靜態文件且響應頭中有協商緩存的標記時，該請求才會增強緩存

　　    補充：http響應類型爲text/html（.aspx, .html均返回該類型）， 或者瀏覽器解析爲document或xhr時，增強緩存無效，協商緩存依然生效

　　g、強緩存與協商緩存的索引方式爲key-value，key爲請求的url，所以，url中加版本號或隨機數能夠達到清理緩存的效果

　　h、chorme新版本下，對於瀏覽器自動增強緩存的文件，f5不會忽略強緩存，直接從緩存中讀取，還沒有找到該狀況下直接忽略強緩存而使用協商緩存的方法，ctrl + f5功能依舊；ie11下，瀏覽器不會對靜態資源增強緩存，所以在地址欄中輸入url並回車，或者f5，會使用協商緩存，另外，響應類型並不影響瀏覽器的緩存策略

 

其餘相關文章：

淺談瀏覽器http的緩存機制

做爲前端應當瞭解的Web緩存知識

Caching Tutorial

 

chrome下，離線緩存manifest細節梳理：

一、manifest文件後綴推薦爲".appcache"，mime類型須設爲"text/cache-manifest"

二、manifest文件中須緩存的文件列表使用相對路徑時，是相對於manifest文件

三、使用離線緩存的頁面文件（如.html、.aspx等）會自動緩存，不須要添加到manifest文件的緩存列表中

四、頁面初始加載時事件的觸發順序：checking - downloading - progress - cached

　  頁面刷新時事件的觸發順序：checking - noupdate

　  manifest文件更改時事件的觸發順序：checking - downloading - progress - updateready

五、離線緩存存在時，全部資源（包括頁面文檔）均從緩存中加載；同時，事件checking中檢查manifest文件，若是有更新，則下載並更新緩存

六、F5或Ctrl + F5對離線緩存無效，即依然從緩存中加載；清除瀏覽器緩存能夠清除離線緩存

七、離線緩存與強緩存、協商緩存並不衝突，判斷順序是：離線緩存 - 強緩存 - 協商緩存

參考：

W3School

HTML5 使用application cache 接口實現離線數據緩存

《Javascript高級程序設計》