博客 / 詳情

返回

HTTP請求頭和響應頭中cache-control的區別

都知道http的請求頭和響應頭都可以設置cache-control屬性,它的作用是用來設置靜態資源緩存的。難道他們就沒有什麼不一樣的地方麼?反正一開始我是不明白,在網上也硬是沒找到答案,於是這篇文章就出來了。。。

以下是本次驗證的代碼:

客户端代碼

服務端代碼

客户端為了驗證請求頭cache-control的作用,所以採用了ajax的方式來請求js。服務端主要是用來設置靜態資源的緩存時間的。我們所説的緩存都是建立在get請求方式之上,其他方式設置的緩存暫時沒聽説過哈

下面就是見證奇蹟的時刻:

場景一:當客户端、服務端都不設置cache-control的時候看看是什麼情況

服務端打印請求頭信息
瀏覽器資源請求信息

發現默認情況下是不會走緩存的

場景二:當服務端設置cache-control,客户端沒有設置的時候看看是什麼情況

服務端代碼.png
服務端打印請求頭信息
瀏覽器資源請求信息

發現緩存是由服務端開啓的

場景三:當客户端設置cache-control,服務器端沒有設置的時候看看是什麼情況

客户端代碼
服務端代碼
服務端打印請求頭信息
瀏覽器資源請求信息

發現當只有客户端開啓cache-control時是不會生效的,緩存必須是由服務端開啓

場景四:當客户端和服務端都設置了cache-control的時候看看是什麼情況

客户端代碼
服務端代碼
服務端打印請求頭信息
瀏覽器資源請求信息

發現30秒後緩存就失效了,而不是客户端設置的60秒,故緩存的失效時間是由服務端設置決定的

場景五:當客户端設置不需要緩存,而服務端設置了緩存的時候看看什麼情況

客户端代碼
服務端代碼
瀏覽器資源請求信息
瀏覽器資源請求信息

發現資源不再走強緩存了,而是直接向服務器發送了請求,故請求頭中設置的cache-control是可以不走緩存的,cache-control: max-age=0這和按F5鍵是一樣的效果

結論:

1、只有服務端才能開啓緩存,默認是不會走緩存的

2、走了強緩存就不會再向服務端發送請求了

3、客户端的請求頭中只有設置了cache-control為:'no-store' | 'no-cache' | 'max-age=0'才會生效(也就是客户端不想走強緩存的時候生效),除非後端對這個字段做特殊處理

如果有對強緩存和協商緩存不太清楚的同學可以瞭解一下之前寫過的一遍文章一文讀懂http緩存(超詳細)

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.