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 種情況
- 資源的大小
- 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-Modify-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 的時候，也是直接請求伺服器資源的效果。
