瀏覽器緩存機制

ISherry 發布于2019-08-20 17:14 / 1864人閱讀

摘要：是協議提供的若干機制中的一種緩存驗證機制，并且允許客戶端進行緩存協商。在瀏覽器地址欄按回車刷新網頁的區別看過很多文章將緩存，好像大家都忽略了一件事，就是瀏覽器地址欄按回車刷新網頁緩存是各不一樣的。

引子

昨天晚上上線到很晚，今天早上迷迷糊糊到公司就看到領導在群里@我，氣沖沖的說為什么我回車網址還是以前的頁面，技術leader好心提醒他說有緩存，刷新一下就好了。果然刷新一下就好了，領導消氣完之后跑過來說我不要緩存，好吧，本著我一貫拍領導馬屁不動搖的原則，我把電腦和刀抱到運維同學旁邊搞了半天，才保證領導每次看到的200的請求返回。

Expires

HTTP頭信息Expires（過期時間）屬性是HTTP控制緩存的基本手段，這個屬性告訴緩存器：相關副本在多長時間內是新鮮的。過了這個時間，緩存器就會向源服務器發送請求，檢查文檔是否被修
改。幾乎所有的緩存服務器都支持Expires（過期時間）屬性；

其實大白話來說，就是服務器設置的一個失效時間，通過response頭Expires屬性告訴瀏覽器你需不需要重新向服務器發送請求，如果Expires未失效，HTTP返回狀態顯示200 OK，但是請求并沒有真正提交到HTTP服務器，而是瀏覽器發現緩存中還有未過期的文件，當我們在瀏覽器地址欄按回車這個屬性才會生效。

ETag

ETag或實體標簽（entity
tag）是萬維網協議HTTP的一部分。ETag是HTTP協議提供的若干機制中的一種Web緩存驗證機制，并且允許客戶端進行緩存協商。這就使得緩存變得更加高效，而且節省帶寬。如果資源的內容沒有發生改變，Web服務器就不需要發送一個完整的響應。ETag也可用于樂觀并發控制，作為一種防止資源同步更新而相互覆蓋的方法。

簡單來說，ETag是服務器為文件生成的md5戳，如果ETag是處于關閉的狀態，則瀏覽器會跳過此環節。如果此時etag是存在的，瀏覽器會帶著這個戳請求服務器，服務器根據這個戳是否變化判斷是否緩存靜態資源，這個時候如果服務器判斷這個值并沒有變化，那么就會返回304的請求頭。

Last-Modified

在瀏覽器第一次請求某一個URL時，服務器端的返回狀態會是200，內容是你請求的資源，同時有一個Last-Modified的屬性標記(HttpReponse
Header)此文件在服務期端最后被修改的時間

如果服務器端的資源沒有變化，則自動返回 HTTP 304（Not Changed.）狀態碼，內容為空，這樣就節省了傳輸數據量。當服務器端代碼發生改變或者重啟服務器時，則重新發出資源，返回和第一次請求時類似。從而保證不向客戶端重復發出資源，也保證當服務器有變化時，客戶端能夠得到最新的資源。

在瀏覽器地址欄按回車、F5、Ctrl+F5刷新網頁的區別

看過很多文章將緩存，好像大家都忽略了一件事，就是瀏覽器地址欄按回車、F5、Ctrl+F5刷新網頁緩存是各不一樣的。
回車在 Expires有效的時候，是不會去請求服務器的，直接讀取本地硬盤緩存。
F5 Cache-Control: no-cache，只有Last-Modified/ETag有效果。
Ctrl+F5則會發送 Cache-Control: no-cache，If-Modified-Since off，etag off，真正的從服務器重新獲取文件，此時緩存完全失效。

結尾上代碼

 location ~ .*.(gif|jpg|jpeg|bmp|png|ico|txt|js|css|html)$
{

    root   /usr/share/nginx/html;
    expires      -1;
    add_header Last-Modified $date_gmt;
    if_modified_since off;
    etag off;
}

其實現在每次上線的js css文件都是webpack打包生成文件名都會帶上md5戳，只有html文件會存在上線緩存。沒辦法，為了滿足領導的口味，我含淚讓運維按上面的代碼把nginx配置改了。。

云服務器 GPU云服務器三級緩存機制 cdn緩存機制 php緩存機制 android緩存機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83427.html

Web緩存相關知識整理

摘要：緩存緩存，也叫網關緩存反向代理緩存。瀏覽器先向網關發起請求，網關服務器后面對應著一臺或多臺負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。一、前言? 工作上遇到一個這樣的需求，一個H5頁面在APP端，如果勾選已讀狀態，則下次打開該鏈接，會跳過此頁面。用到了HTML5 的本地存儲 API ...

rickchen 2019-08-06 13:23 評論0 收藏0
H5 緩存機制淺析 - 移動端 Web 加載性能優化

摘要：根據標準，到目前為止，一共有種緩存機制，有些是之前已有，有些是才新加入的。首次請求緩存有效期內請求緩存過期后請求一般瀏覽器會將緩存記錄及緩存文件存在本地文件夾中。騰訊 Bugly 特約作者：賀輝超 1. H5 緩存機制介紹 H5，即 HTML5，是新一代的 HTML 標準，加入很多新的特性。離線存儲（也可稱為緩存機制）是其中一個非常重要的特性。H5 引入的離線存儲，這意味著 web ...

alin 2019-08-06 13:14 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

jsummer 2019-08-06 13:37 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

godruoyi 2019-08-16 13:43 評論0 收藏0
瀏覽器的緩存機制

摘要：從瀏覽器角度來看，整個就是一個源服務器，從這個層面來說，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。如果命中，則返回，告訴瀏覽器資源未更新，可使用本地的緩存。緩存類型緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。微觀上可以分下面幾類：瀏覽器緩存緩存存在的意義就是當用戶點擊back按...

LeanCloud 2019-08-06 13:41 評論0 收藏0