【前端詞典】F5 同 Ctrl+F5 的區別你可瞭解

前言

F5 和 Ctrl+F5 使用的頻率很高，但是在使用的時候有沒有想過 F5 和 Ctrl+F5 的區別是什麼？ 這篇文章會將 F5 和 Ctrl+F5 刷新頁面的原理講清楚。經過這篇小文，即使是對瀏覽器緩存機制加深一點點的認知，也是有所裨益的。

入題

下圖是咱們第一次打開掘金的 Network 界面，因爲是第一次打開，因此所有資源是從服務器請求的，Status 都是 200。

接下來咱們按一下 F5，看看效果；

發現靜態資源的 Size 都是 from disk cache；說明此時的靜態資源是從緩存中取的。具體爲何 Size 是 from disk cache 我先按下不表。我先來講說 size 選項的 4 種狀況。

size 選項的 4 種狀況

1. 資源的大小
2. from disk cache
3. from memory cache
4. from ServiceWorker

from memory cache

表示此資源是取自內存，不會請求服務器。已經加載過該資源且緩存在內存當中；關閉該頁面此資源就被內存釋放掉了，再次打開相同頁面時不會出現 from memory cache 的狀況。

from disk cache

表示此資源是取自磁盤，不會請求服務器。已經在以前的某個時間加載過該資源，可是此資源不會隨着該頁面的關閉而釋放掉，由於是存在硬盤當中的，下次打開仍會 from disk cache。

資源自己大小數值

當 http 狀態爲 200 是實實在在從瀏覽器獲取的資源，當 http 狀態爲 304 時該數字是與服務端通訊報文的大小，並非該資源自己的大小，該資源是從本地獲取的。

from ServiceWorker

表示此資源是取自 from ServiceWorker。

如今咱們再按下 Ctrl+F5，看看效果

發現 Size 顯示的又是資源自身的大小，說明 Ctrl+F5 後的資源又是從新從服務器中請求獲得的。

F5 同 Ctrl+F5 的區別

爲何 F5 後請求的是緩存，而 Ctrl+F5 就從新請求資源呢？答案就是這兩種方式發送的請求頭不同（不一樣的瀏覽器發送的請求頭也有一些區別）。

F5

在 chrome 瀏覽器中按 F5 後，看到資源的請求頭中有 provisional headers are show 字樣。這是爲何呢？

緣由：未與服務端正確通訊。該文件是從緩存中獲取的並未進行通訊，因此詳細標頭並不會顯示。強緩存 from disk cache 或者 from memory cache ，都不會正確的顯示請求頭。

下面看看按 F5 後在 firefox 瀏覽器中的表現。

從圖中能夠看出返回的狀態碼是 304 Not Modified。

這是由於按 F5 進行頁面刷新時請求頭會添加 If-Modified-Since 字段，若是資源未過時，命中緩存，服務器就直接返回 304 狀態碼，客戶端直接使用本地的資源。

能夠看出 chrome 和 firefox 在按下 F5 後，其內部使用的緩存機制不一樣。firefox 使用的是協商緩存，而 chrome 使用的是強緩存。

Ctrl+F5

咱們仍是先看看在 chrome 中 Ctrl+F5 的表現。

咱們發如今請求頭中多了兩個 Cache-Control:no-cache，Pragma:no-cache 參數，這兩個參數什麼意思呢？

在請求頭中的 Cache-Control:no-cache 表示客戶端不接受本地緩存的資源，須要到源服務器進行資源請求，其實可使用緩存服務器的資源，不過須要到源服務器進行驗證，驗證經過就能夠將緩存服務器的資源返回給客戶端。

那麼在 firefox 中的表現是怎樣的呢？

請求頭中一樣多了兩個 Cache-Control:no-cache，Pragma:no-cache 參數。

能夠看出 chrome 和 firefox 在按下 Ctrl+F5 後，都不會使用本地緩存，而且對緩存服務器的資源會再驗證。

寫到這裏差很少就把 F5 同 Ctrl+F5 的緩存原理講的差很少了。不過每一個瀏覽器它們在實現同一個動做的時候，老是會有差別，不過在業界內 chrome 的緩存優化機制是作的最好的。這也是爲何咱們在使用 chrome 開發或者是瀏覽網站的時候體驗都不錯的緣由。

讀完 F5 同 Ctrl+F5 刷新頁面的原理，其實你也把強緩存和協商緩存的區別也複習了一遍。

補充

咱們能夠經過勾選 `Network` 面板中的 `Disable cache` 選項，這樣當你按 `F5` 的時候，也是直接請求服務器資源的效果。

前端詞典系列

《前端詞典》這個系列會持續更新，每一期我都會講一個出現頻率較高的知識點。但願你們在閱讀的過程中能夠斧正文中出現不嚴謹或是錯誤的地方，本人將不勝感激；若經過本系列而有所得，本人亦將不勝欣喜。

若是你以爲個人文章寫的還不錯，能夠關注個人微信公衆號，公衆號裏會提早劇透呦。

你也能夠添加個人微信 wqhhsd， 歡迎交流。

下期預告

【前端詞典】使用 Canvas 畫一個下雪的背景

傳送門

1. 【前端詞典】和媳婦講代理後的意外收穫
2. 【前端詞典】滾動穿透問題的解決方案
3. 繼承（一） - 原型鏈你真的懂嗎？
4. 【前端詞典】繼承（二） - 回的八種寫法·面試必問
5. 【前端詞典】進階必備的網絡基礎（上）
6. 【前端詞典】進階必備的網絡基礎（下）