做web開(kāi)發(fā)的同學(xué)（前端工程師和后端工程師），經(jīng)常遇到響應(yīng)304，304的意思就是瀏覽器已經(jīng)緩存，不需要走服務(wù)器，瀏覽器直接響應(yīng)數(shù)據(jù)給用戶，最常用的解決瀏覽器緩存的問(wèn)題，就是在靜態(tài)文件后面添加版本號(hào)，讓瀏覽器不響應(yīng)緩存。那么web瀏覽器是怎么緩存數(shù)據(jù)的：

Expires

早起的web就是通過(guò)這個(gè)字段來(lái)告訴瀏覽器該緩存多久，這種緩存的原理是根據(jù)當(dāng)前服務(wù)器的時(shí)間加上緩存有效的時(shí)間，最終生成未來(lái)某個(gè)失效時(shí)間值，返回給瀏覽器，比如失效時(shí)間點(diǎn)為2020 ，那么當(dāng)用戶刷新頁(yè)面的時(shí)候，就會(huì)先判斷當(dāng)前時(shí)間是否到2020年，如果沒(méi)到，瀏覽器把緩存的數(shù)據(jù)直接返回給用戶，不走web服務(wù)器，這種緩存的一個(gè)缺點(diǎn)就是：如果用戶修改了自己的本地時(shí)間，那么緩存可能失效。

Cache-control

因?yàn)镋xpires的缺點(diǎn)，后來(lái)的cache-control就做了改進(jìn)，cache-control不再存絕對(duì)時(shí)間，存的是相對(duì)時(shí)間，比如緩存是60秒，需要注意的是如果你設(shè)置了max-age=60，那么在這60秒內(nèi)，即使服務(wù)端修改了，你也得不到新的數(shù)據(jù)，所以這個(gè)使用要慎重，對(duì)應(yīng)的另一個(gè)還有叫no-cache的，no-cahe并不是不緩存，而是每次都要和服務(wù)器做比較，如果服務(wù)器未更新那么就讀取緩存，反之讀取新的，與no-cache對(duì)應(yīng)的就是no-store。no-store才是真的告訴瀏覽器不要讀取緩存的意思。

Last-Modified和If-Modified-Since

Last-Modified是服務(wù)器返回給瀏覽器的

If-Modified-Since是瀏覽器告訴服務(wù)器的

舉個(gè)例子，如果你訪問(wèn)個(gè)url，肯定沒(méi)緩存走服務(wù)器，服務(wù)器返回個(gè)Last-Modified，即這個(gè)資源最近被修改的時(shí)間A，響應(yīng)的http狀態(tài)碼是200，同時(shí)瀏覽器把這個(gè)時(shí)間A存起來(lái)，下次請(qǐng)求的時(shí)候，瀏覽器會(huì)帶著這個(gè)If-Modified-Since去和服務(wù)器做對(duì)比，如果說(shuō)，兩次的時(shí)間一樣，那么就是資源沒(méi)更新，瀏覽器直接返回自己緩存的資源，響應(yīng)的http狀態(tài)碼是304，如果說(shuō)兩次時(shí)間不一樣，那么服務(wù)器再次返回Last-Modified時(shí)間和200的http狀態(tài)碼。但是這種策略也有缺點(diǎn)，就是時(shí)間最小單位是1s，如果說(shuō)1秒內(nèi)發(fā)了好幾次更新，瀏覽器就不知道了。

Etag和If-no-match

由于Last-Modified不支持秒級(jí)的變化，后來(lái)出現(xiàn)了Etag，Etag是文件修改時(shí)間等hash的結(jié)果，不存具體時(shí)間值，這樣每次請(qǐng)求的時(shí)候，瀏覽器會(huì)帶上If-no-match和服務(wù)器的Etag做對(duì)比，如果一樣，走緩存，不一樣，走服務(wù)器，然后緩存起來(lái)，可以精確到秒級(jí)