f5到底刷新了點什麼，你知道嗎

引言

前面翻到了http緩存相關內容，關於強制緩存和協商緩存，他們之間的差異可能你們比較清楚。
而且常規狀況下是否該使用緩存以及使用哪一種緩存，
相關文章多且全，這裏再也不贅述。
不過用戶的不一樣行爲會打破原有規範，
本文就會去探究下不一樣行爲下的瀏覽器緩存表現。也就是f5到底刷新了哪些內容

瀏覽器緩存

說道瀏覽器緩存，腦海中常見的應該是那麼幾種關鍵詞：
Cache-Control、Expires、ETag、If-Match、If-None-Match、Last-Modified等。
根據不一樣標識的做用，再次訪問某個資源時，
須要緩存的狀況下，主要有下面兩種緩存方式

強緩存

一旦資源命中強緩存, 瀏覽器便不會向服務器發送請求, 而是直接讀取緩存.
Chrome下的現象是 200 OK (from disk cache) 或者 200 OK (from memory cache).

協商緩存

也就是咱們常見的304狀態碼。

緩存過時後, 繼續請求該資源,
對於現代瀏覽器, 存在以下兩種作法:

• 根據上次響應中的ETag_value, 自動往request header中添加If-None-Match字段.
  服務器收到請求後, 拿If-None-Match字段的值與資源的ETag值進行比較, 若相同, 則命中協商緩存, 返回304響應.
• 根據上次響應中的Last-Modified_value, 自動往request header中添加If-Modified-Since字段. 服務器收到請求後, 拿If-Modified-Since字段的值與資源的Last-Modified值進行比較, 若相同, 則命中協商緩存, 返回304響應.

ETag是http/1.1新增標識，也是爲了解決Last-Modified存在的一些問題。
例如服務器和客戶端時間不一樣步等問題，
因此比Last-Modified的優先級高。

所以常見狀況下，資源的緩存就是按照上面的順序，強緩存=>協商緩存=>從新獲取。
可是，緩存策略是與用戶的操做相關的，平時不可避免會用到刷新。
刷新的方式是多種多樣的。刷新按鈕，command+r，shift+command+r等。他們之間的區別是什麼呢。以xxdy.tech/做爲例子來看一下。

再次訪問(地址欄回車)

能夠看到資源分下面幾類： 先看下直觀的請求 大部分都是200強緩存，只有文稿是304

1. 無緩存的，maxage=0的資源

此類資源，請求的時候總會從服務端從新加載

2. status爲200，可是後面有提示from memory cache 或者disk cache的標識。 這種緩存的字體爲灰色，跟上面的200仍是比較容易看出來差異的。

css資源的響應，來自硬盤緩存。

js的響應，即來自memory的緩存

這裏就是強緩存，直接從本地緩存中讀取。
由於Cache-Control:max-age=600 刷新時未過時，因此會從本地緩存中獲取。

這裏截兩張圖的緣由在於二者緩存存放的位置是不一樣。 概述一下(詳細請找資料細究)

• 內存緩存(from memory cache)：內存緩存具備兩個特色，分別是快速讀取和時效性 快速讀取：內存緩存會將編譯解析後的文件，直接存入該進程的內存中，佔據該進程必定的內存資源，以方便下次運行使用時的快速讀取
  時效性：一旦該進程關閉，則該進程的內存則會清空。

• 硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存須要對該緩存存放的硬盤文件進行I/O操做，而後從新解析該緩存內容，讀取複雜，速度比內存緩存慢。

在瀏覽器中，大部分狀況下瀏覽器會在js和圖片等文件解析執行後直接存入內存緩存中，
那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；
而css文件則會存入硬盤文件中，因此每次渲染頁面都須要從硬盤讀取緩存(from disk cache)

3. 協商緩存

status爲304，意爲與服務端對比以後文件未改變，返回原有緩存資源。

此資源請求頭裏面有Cache-Control: max-age=0 ，
因此每次請求都回去服務端詢問，不會走強緩存，由於服務端也未更新，etag相同，因此返回緩存資源。

總結

地址欄回車的話，就是咱們正常訪問，遵循瀏覽器的緩存策略。

f5刷新(mac 即command + r)

f5刷新的時候，會有什麼不一樣嗎，先直觀對比下。

好像沒什麼不一樣，具體到文件也是與直接回車相同的狀態。

總結

那麼f5的刷新究竟是什麼呢，
能夠看到f5能夠被稱爲soft refresh 其只是reload page而已。
即與回車地址相同，正常規則下的緩存仍是會涉及到。

強制刷新(command+shift+r)

此時能夠看下請求結果,前面列出的304和from cache的項目都是從新load。

具體查看相應請求能夠看到，
在request中多了個屬性： 都有Cache-Control: no-cache的標識。
這代表每次都須要服務器評估是否有效，不要理解爲直接不使用緩存。
此外能夠注意到request中沒有能夠匹配response中ETag的If-None-Match屬性，
因此會從新加載。

總結而言

此時的刷新能夠稱爲hard refresh，
請求會加上一個Cache-Control:no-cache的標識來代表突破cache-control的限制，
須要服務端從新判斷有效性，即不走強緩存。
另外請求header中去掉If-None-Match，這樣就不能使用協商緩存。拉到新的資源

tip

這裏硬性從新加載,有些文件是依舊使用緩存的，我這邊看到是有些小的image，沒有找到合理的解釋。具體我須要在研究一下，後面補上

停用緩存並刷新

針對上面提到的哪些文件，此時就須要到下面這種清空緩存並硬性從新加載了。

操做完以後就徹底不使用緩存了。

規則

上面提到那麼幾種刷新方式對應的效果，可能不一樣瀏覽器的實現也不一樣。找了個相對完善的你們能夠參考一下。

結束語

到這裏，關於刷新與緩存的我的一些關掉就結束了，拋磚引玉，但願能對有須要的人有所幫助，也但願有大神有所指教。更多我的博客請移步
此外感謝下面的參考文章：
stackoverflow.com/questions/8…
stackoverflow.com/questions/3…