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

緩存的分類：

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

瀏覽器緩存：

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

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

1.查看緩存

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

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

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

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

2.緩存判斷

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

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

以百度的為例：
打開百度，篩選bd_logo,如下圖，第一次請求的時(shí)候是大部分是200返回碼，因?yàn)槭菦]有緩存

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

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

B緩存過期：

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

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

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

if-modif-since

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

etag：

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

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

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

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

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

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

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

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

一般大型公司怎么解決強(qiáng)緩存問題呢：

URL中增加數(shù)字版本號(hào)，如下圖，每一次變更一下，當(dāng)這個(gè)參數(shù)變化的時(shí)候，強(qiáng)緩存都會(huì)失效并重新加載。

總結(jié)

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

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