f5到底重新整理了點什麼,你知道嗎

2021-09-11 13:56:29 字數 1762 閱讀 7860

一旦資源命中強快取, 瀏覽器便不會向伺服器傳送請求, 而是直接讀取快取.

chrome下的現象是 200 ok (from disk cache) 或者 200 ok (from memory cache).

也就是我們常見的304狀態碼。

快取過期後, 繼續請求該資源,

對於現代瀏覽器, 存在如下兩種做法:

etag是http/1.1新增標識,也是為了解決last-modified存在的一些問題。

例如伺服器和客戶端時間不同步等問題,

所以比last-modified的優先順序高。

因此常見情況下,資源的快取就是按照上面的順序,強快取=>協商快取=>重新獲取。

但是,快取策略是與使用者的操作相關的,平時不可避免會用到重新整理。

重新整理的方式是多種多樣的。重新整理按鈕,command+r,shift+command+r等。他們之間的區別是什麼呢。以xxdy.tech/作為例子來看一下。

可以看到資源分下面幾類: 先看下直觀的請求 大部分都是200強快取,只有文稿是304

無快取的,maxage=0的資源

status為200,但是後面有提示from memory cache 或者disk cache的標識。 這種快取的字型為灰色,跟上面的200還是比較容易看出來差別的。

css資源的響應,來自硬碟快取。

js的響應,即來自memory的快取

這裡就是強快取,直接從本地快取中讀取。

因為cache-control:max-age=600 重新整理時未過期,所以會從本地快取中獲取。

這裡截兩張圖的原因在於兩者快取存放的位置是不同。 概述一下(詳細請找資料細究)

在瀏覽器中,大部分情況下瀏覽器會在js和等檔案解析執行後直接存入記憶體快取中,

那麼當重新整理頁面時只需直接從記憶體快取中讀取(from memory cache);

而css檔案則會存入硬碟檔案中,所以每次渲染頁面都需要從硬碟讀取快取(from disk cache)

協商快取

status為304,意為與服務端對比之後檔案未改變,返回原有快取資源。

此資源請求頭裡面有cache-control: max-age=0 ,

所以每次請求都回去服務端詢問,不會走強快取,因為服務端也未更新,etag相同,所以返回快取資源。

總結位址列回車的話,就是我們正常訪問,遵循瀏覽器的快取策略。

f5重新整理的時候,會有什麼不同嗎,先直觀對比下。

好像沒什麼不同,具體到檔案也是與直接回車相同的狀態。

總結那麼f5的重新整理到底是什麼呢,

可以看到f5可以被稱為soft refresh 其只是reload page而已。

即與回車位址相同,正常規則下的快取還是會涉及到。

此時可以看下請求結果,前面列出的304和from cache的專案都是重新load。

總結而言

此時的重新整理可以稱為hard refresh,

請求會加上乙個cache-control:no-cache的標識來表明突破cache-control的限制,

需要服務端重新判斷有效性,即不走強快取。

另外請求header中去掉if-none-match,這樣就不能使用協商快取。拉到新的資源

tip操作完之後就完全不使用快取了。

到這裡,關於重新整理與快取的個人一些關掉就結束了,拋磚引玉,希望能對有需要的人有所幫助,也希望有大神有所指教。更多個人部落格請移步

此外感謝下面的參考文章:

微服務到底改變了什麼,你知道嗎?

微服務的本質 一種更優的分工合作機制,加速分工,促進合作,幫我們成就更大的夢想!為什麼呢?請看老兵哥近些年推廣微服務架構過程中收穫的心得體會!在雲計算這波科技巨浪的推動下,各行各業都加快了數位化轉型的步伐。微服務,作為雲原生應用的推薦架構,對每位it行業的從業者來說都不會陌生,大家都聽說過大量有關微...

HTML5的這些api你知道嗎

以下是之前學習的一些html5 api的總結,在html5中有許多功能和介面很值得我們去了解和學習。頁面可見性api page visbility 全屏api full screen 獲取mediaapi getusermedia 電池api battery 資源預載入api link prefet...

團隊管理的核心是什麼 你知道嗎?

身為團隊的管理人員,你對團隊管理的核心了解嗎?如果你接手乙個部門,你該怎麼辦?接下來我們來看下團隊管理的十大核心 明確組織架構 不管接受什麼部門,最重要的你要明確或者重新調整組織架構,那麼問題來了,什麼是架構。架構的關鍵就是 誰是幹什麼的,誰是負責什麼的,一定要明確落實 明確目標 你既然是團隊的領導...