緩存系統(tǒng)之瀏覽器緩存

緩存的分類：

客戶端：
瀏覽器緩存，目的就是加速各種靜態(tài)資源的訪問。對于靜態(tài)資源來說，瀏覽器不會緩存html頁面的，所以你每次改完html的頁面的時候，html都是改完立即生效的，不存在什么有緩存導致頁面不對的問題。瀏覽器緩存的東西有圖片，css和js。這些資源將在緩存失效前調(diào)用的時候調(diào)用瀏覽器的緩存內(nèi)容
服務端：
又分為 代理服務器緩存 和 反向代理服務器緩存（也叫網(wǎng)關(guān)緩存，比如 Nginx反向代理、Squid等），其實廣泛使用的 CDN 也是一種服務 端緩存，目的都是讓用戶的請求走”捷徑“，并且都是緩存圖片、文件等靜態(tài)資源

瀏覽器緩存：

測試知道了解后有什么好處：前端展示不是最新的頁面，可以自己分析判斷，而不需要每次傻傻的去清理緩存。

瀏覽器緩存的目的：
第一：避免了頻繁請求，節(jié)省帶寬流量。
第二：加快了用戶訪問網(wǎng)頁的速度。
第三：減小了服務端的壓力。
瀏覽器緩存流程：

1.查看緩存

判斷是否有緩存：
首先先要理解怎么存放存放在哪里：
chrome的瀏覽器（舊版）：
chrome://chrome-urls/ 谷歌瀏覽器輸入，點擊cache鏈接就可

火狐瀏覽器 about:cache?storage=disk

本地chrome的瀏覽器緩存存放地方一般實在這里：
C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Cache
如下圖：

這樣的話不容易看懂，安裝下專業(yè)的工具Chrome cache View工具：

2.緩存判斷

根據(jù)上面的流程圖看，首先是判斷這個緩存是否過期，那怎么去判斷
一般情況下，瀏覽器發(fā)出的所有 HTTP 請求會首先被路由到瀏覽器的緩存。

A.緩存未過期，直接讀取數(shù)據(jù)

以百度的為例：
打開百度，篩選bd_logo,如下圖，第一次請求的時候是大部分是200返回碼，因為是沒有緩存

再次刷新，返回200，顯示讀取的是緩存：

問題：為什么是200。
瀏覽器中判斷是否過期一般由expires以及cache-control字段來判斷，如果兩者同時存在，則是cache-control max-age覆蓋expire。
從以上可以看出，max-age=315360000，cache-control的時間為十年，所以，如果有緩存，這條信息會一直從緩存中讀取。

B緩存過期：

打開新浪網(wǎng)為例，
輸入goldenstock.js
可以看出有效期是2分鐘，前兩分鐘都是返回200

超過兩分鐘后，重新刷新，如下圖，304了。

問題：為什么是304.
根據(jù)上面的流程，
先看緩存是否過期，緩存數(shù)據(jù)是存兩分鐘，兩分鐘過后，緩存失效，查看eatg標記，沒有的話，找last-modify(表明請求的資源上次的修改時間)，請求的時候加上if-modif-since(客戶端保留的資源上次的修改時間) .通過對比時間，如果是一致的話，就返回304，讀取本地緩存，如果不一致，返回200，重新讀取
last-modify：

if-modif-since

2.1.
打開新浪網(wǎng)為例，
輸入11.js。
同理以上，結(jié)合流程，含有etag資源的內(nèi)容標識。（不唯一，通常為文件的md5或者一段hash值，只要保證寫入和驗證時的方法一致即可），可以看出有效期是2分鐘，前兩分鐘都是返回200

etag：

If-None-Match： 客戶端保留的資源內(nèi)容標識

再次請求的時候，通過比對兩者的區(qū)別，如果沒有區(qū)別則返回304，有則返回200.

通常情況下，如果同時發(fā)送 If-None-Match 、If-Modified-Since字段，服務器只要比較etag 的內(nèi)容即可，當然具體處理方式，看服務器的約定規(guī)則。

拓展：
Cache-Control
Http1.1 中的標準，可以看成是 expires 的補充。使用的是相對時間的概念。
簡單介紹下Cache-Control的屬性設(shè)置。
1）max-age: 設(shè)置緩存的最大的有效時間，單位為秒（s）。max-age會覆蓋掉Expires
2) s-maxage: 只用于共享緩存，比如CDN緩存（s -> share）。與max-age 的區(qū)別是：max-age用于普通緩存，
而s-maxage用于代理緩存。如果存在s-maxage,則會覆蓋max-age 和 Expires.
3) public：響應會被緩存，并且在多用戶間共享。默認是public。
4) private: 響應只作為私有的緩存，不能在用戶間共享。如果要求HTTP認證，響應會自動設(shè)置為private。
5）no-cache: 指定不緩存響應，表明資源不進行緩存。但是設(shè)置了no-cache之后并不代表瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。因此有的時候只設(shè)置no-cache防止緩存還是不夠保險，還可以加上private指令，將過期時間設(shè)為過去的時間。
6）no-store: 絕對禁止緩存。
7）must-revalidate: 如果頁面過期，則去服務器進行獲取。
以上注意的就是nocache與nostore的區(qū)別

根據(jù)以上結(jié)論，瀏覽器緩存還可分為強緩存跟協(xié)商緩存：

強緩存就是時間期的判斷，不過期就是強制緩存
協(xié)商緩存就是if-modified-since/last-modified 和 if-none-match/etag 之類的請求判斷。

用戶不同行為的操作方式會有不同的效果：

1.地址欄訪問/新打開窗口/前進后退/，正常的瀏覽器緩存機制；
2.F5刷新，瀏覽器會設(shè)置max-age=0，跳過強緩存判斷，進行協(xié)商緩存判斷；
3.ctrl+F5刷新，跳過強緩存和協(xié)商緩存，直接從服務器拉取資源。

一般大型公司怎么解決強緩存問題呢：

URL中增加數(shù)字版本號，如下圖，每一次變更一下，當這個參數(shù)變化的時候，強緩存都會失效并重新加載。

總結(jié)

以上是生活随笔為你收集整理的浏览器缓存常识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。