前言
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 種情況
- 資源的大小
- from disk cache
- from memory cache
- 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 畫一個下雪的背景