一張圖弄懂HTTP緩存及常見面試題

狀況一: Cache-Control:max-age = 60 時

狀況二: Cache-Control:max-age = 0 or no-cache 時

HTTP緩存流程圖

HTTP緩存相關面試題

1.說一下瀏覽器的緩存機制（HTTP如何控制緩存的）

瀏覽器第一次向服務器發請求資源，服務器響應報文的狀態是200，響應頭會帶上Cache-Control、Etag字段。瀏覽器收到響應後會把資源存到本地。
當瀏覽器再次發送請求獲取該資源時，瀏覽器會先檢查該資源是否過時（經過Cache-Control:max-age = 時間）。若是在時間內，就直接使用該資源。
若是時間過時，則發送請求詢問該資源是否能夠用。請求頭包含 If-None-Match，也就是以前響應報文中的 Etag。
服務器收到請求後經過 If-None-Match裏的Etag和新計算的Etag作對比，若是匹配，則直接返回一個狀態碼 304 ，不包含任何響應體報文，告訴瀏覽器該資源能夠用。 若是不匹配，則返回一個狀態碼爲200再帶上 Cache-Control、Etag和原始資源的新報文
若是不存在Etag，則用 Last-Modified 和 if-Modified-Since 作相似的判斷。

2.Last-Modified、If-Modified-Since字段有什麼做用？

倆個都表示資源的最後修改時間面試

Last-Modified 則是是由服務器發送給客戶端的HTTP請求頭標籤瀏覽器

If-Modified-Since 則是由客戶端發送給服務器的HTTP請求頭標籤緩存

服務器可根據請求的文件修改時間和真實的文件修改時間作比較，來判斷資源是否過時。服務器

3.Etag和If-None-Match字段有什麼做用？

Etag至關於給資源生成了一個獨一無二的標識，當資源被修改了，Etag就會改變。做用和 Last-Modified 相似。markdown

4.Last-Modified和Etag哪一個更好？

兩者的做用同樣，但還有一些細微的差別svn

Last-Modified的單位是秒，若是一秒內對文件進行修改了，那麼使用Last-Modified不變，而Etag通常會發生改變。
語義上有差異，一個是文件的修改時間，一個是文件的惟一標識。
使用 Last-Modified，瀏覽器會直接看到文件的修改時間，這個信息的暴露是很差的。

5.Expires字段是什麼意思？

Expires是HTTP1.0版本的報文字段，表明資源的過時時間，若是設置了Cache-control: max-age=過時秒數，Expires會被忽略。flex

如今大多數使用Cache-Control替代url

6.Expires和Cache-Control有什麼區別？

Expires的值表明一個GMT的時間點，表示到什麼時間點過時；
Cache-control:max-age = value ,這個value是以秒爲單位的時間段，表明有效期是多少秒。
Cache-control能夠設置更復雜的場景，好比：Cache-control：no-cahce 、 no-store 、private

最重要的一點，若是使用Expires，那麼服務器告訴全部瀏覽器某資源在2021年11月11日到期，到了該時間點時，則須要該資源的每個瀏覽器都會在同一時間發送請求。而用Cache-control，那麼服務器告訴全部瀏覽器某資源各自存儲365天，因爲每個瀏覽器請求的時間不同，因此須要該資源的瀏覽器不會同時發請求。spa

7.Cache-Control: max-age=3600是什麼意思？

就是服務器告訴瀏覽器，這個資源在本地緩存下來，若是再次須要該資源而且是在3600秒內，那麼就不要發請求而直接使用該資源，若是超過3600秒，則發送請求向服務器詢問是否可以繼續使用。代理

8.Cache-Control: no-cache是什麼意思？

至關於 max-age = 0, 就是告訴瀏覽器，收到這個資源先緩存下來，下次須要該資源時先向服務器確認該資源的有效性，再使用。

9.Cache-Control: no-store是什麼意思？

告訴瀏覽器，不要緩存該資源。須要該資源時請求服務器，服務器會直接給新的。

10.Cache-Control: private、public分別是什麼意思？

private是告訴中間的代理服務器不要緩存資源，只讓目標瀏覽器緩存。

public表示任何狀況下都能緩存。

11.Cache-Control: no-cache 和 Cache-Control: no-store 有什麼區別？

一個是先緩存下來但不直接使用，另外一個是徹底不緩存。