從瀏覽器的Disable cache談起

瀏覽器調試工具的disable cache功能，相信在座的各位都用過。開啓這個功能，瀏覽器關於當前網站的js、css、圖片...等緩存都會失效，全部請求都會從新發送給服務器。ctrl+F5也能夠達到一樣的效果。

下面就來講說開啓這個功能的時候瀏覽器到底作了什麼

瀏覽器作了什麼

首先說明一下，打開disbale cache瀏覽器並不會去主動刪除本地的這些緩存、也不會不讓把請求到的資源緩存到本地。我是怎麼得出這個結論的呢？

不會刪除本地緩存

下面這張圖左邊是勾選上disbale cache的狀況，右邊是不勾選disbale cache的狀況

當我勾選Disable cache從新加載頁面後，再取消勾選Disable cache從新加載頁面，會發現瀏覽器當即就使用緩存了，由此能夠證實我上面的結論：緩存一直都在，只不過就看瀏覽器想不想用了。

操縱請求頭

瀏覽器怎麼能夠作到這麼任性的呢？緣由就是它能夠操縱http的請求頭（request header）。

打開disbale cache，隨便找一個請求看一下

http的請求頭裏多了cache-control，pragma這兩個東西。

cache-control

cache-control這個東西你們確定都不陌生，畢竟是http1.1的「緩存三寶」之一。它是http1.1的產物，也就是說只有http1.1及以上這個字段纔有用，因此上面咱們看到，瀏覽器又給請求頭裏放了個prgama，這個功能其實和cache-control同樣，只不過是瀏覽器爲了兼容http1.0，因此下面我只說cache-control。

no-cache

cache-control的值被設置成no-cache，這邊你們廣泛會有個誤區，看這個字面意思不少人會理解成不緩存，其實這種理解是不對的、錯的。

no-cache正確的理解應該是不作強緩存，可是協商緩存仍是要的，瀏覽器的請求會發送給服務器，而後服務器驗證資源是否過時，沒過時的話http狀態碼（status code）就是304，這時瀏覽器會使用本地的緩存；過時的話就是200，這時瀏覽器會使用服務器發送過來的內容。

請求頭和響應頭設置的區別

cache-control能夠設置在請求頭和響應頭（response headers），並且用法也是同樣的，只不過表明的含義有些許差異。

以 cache-control: no-cache爲例

• 設置在請求頭：告訴瀏覽器這一次的http請求不準使用強緩存，也就是說此次請求必須給我發送到服務器。
• 設置在響應頭：告訴瀏覽器這一次的http的響應內容你能夠先緩存下來，可是下一次有一樣請求的時候，你仍是得把請求發送到服務器。

說到這裏，你們應該就明白了Disable cache的時候瀏覽器到底搞了什麼鬼。

接下去把思惟發散一下

不設置會怎樣？

要是請求頭和響應頭裏都沒有cache-control，瀏覽器會怎麼作？還會不會緩存了？緩存多久？

實踐出真知，去找一個符合上面條件的請求看一下，見下圖

結論就是瀏覽器會緩存，並且仍是命中的強緩存，直接從disk或者memory中讀取的。

至於能緩存多久這個問題，根據百度出來的結果以下

（訪問時間 - 該文件的最後修改時間） ÷ 10

這也就能解釋爲何一樣的請求，有時候是命中強緩存（from disk or from memory），有時候是304了。

都設置會怎樣？

要是請求頭和響應頭都設置了cache-control，並且它們的值還設置成不一樣的，瀏覽器會怎麼作呢？

有一點搞清楚這個問題就簡單了，下面劃重點、劃重點、劃重點...

cache-control 設置在請求頭，影響的是這一次請求；cache-control設置在響應頭，影響的是下一次請求

你品，你細品...

結語

你們有什麼關於瀏覽器緩存機制或者http協議的問題歡迎在評論區留言討論