瀏覽器包含哪些存儲(chǔ)機(jī)制？
cookie愿阐、webStorage以及IndexedDB
cookie的存在更多的是為了讓服務(wù)端區(qū)別用戶盒蟆，webStorage和IndexedDB則更多用在保存具體的數(shù)據(jù)和在客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(文件/blobs)上面。
緩存 請(qǐng)求資源的副本
好處
- 緩解服務(wù)器壓力(不用每次去請(qǐng)求資源)；
- 提升性能(打開(kāi)本地資源速度當(dāng)然比請(qǐng)求回來(lái)再打開(kāi)要快得多)；
- 減少帶寬消耗(我相信你可以理解)臭胜；
瀏覽器緩存，代理服務(wù)器緩存
緩存在宏觀上可以分成兩類(lèi)：私有緩存和共享緩存对竣。共享緩存就是那些能被各級(jí)代理緩存的緩存庇楞。私有緩存就是用戶專享的榜配，各級(jí)代理不能緩存的緩存
緩存過(guò)程分析
由上圖我們可以知道：
瀏覽器每次發(fā)起請(qǐng)求否纬，都會(huì)先在瀏覽器緩存中查找該請(qǐng)求的結(jié)果以及緩存標(biāo)識(shí)
瀏覽器每次拿到返回的請(qǐng)求結(jié)果都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
以上兩點(diǎn)結(jié)論就是瀏覽器緩存機(jī)制的關(guān)鍵，他確保了每個(gè)請(qǐng)求的緩存存入與讀取蛋褥，只要我們?cè)倮斫鉃g覽器緩存的使用規(guī)則临燃，那么所有的問(wèn)題就迎刃而解了，本文也將圍繞著這點(diǎn)進(jìn)行詳細(xì)分析。為了方便大家理解膜廊，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請(qǐng)求將緩存過(guò)程分為兩個(gè)部分乏沸，分別是強(qiáng)制緩存和協(xié)商緩存。
HTTP協(xié)議里定義了很多關(guān)于緩存的請(qǐng)求和響應(yīng)字段
瀏覽器對(duì)于緩存的處理是根據(jù)第一次請(qǐng)求資源時(shí)返回的響應(yīng)頭來(lái)確定的爪瓜。
Age:23146
Cache-Control:max-age=2592000 // HTTP 1.1 緩存過(guò)期相對(duì)時(shí)間蹬跃，優(yōu)先級(jí)高
Date:Tue, 28 Nov 2017 12:26:41 GMT
ETag:W/"5a1cf09a-63c6" // 對(duì)文件的標(biāo)記
Expires:Thu, 28 Dec 2017 05:27:45 GMT // HTTP 1.0 緩存過(guò)期絕對(duì)時(shí)間
Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT // 文件最后一次修改時(shí)間
Vary:Accept-Encoding
強(qiáng)緩存階段
強(qiáng)制緩存就是向?yàn)g覽器緩存查找該請(qǐng)求結(jié)果，并根據(jù)該結(jié)果的緩存規(guī)則來(lái)決定是否使用該緩存結(jié)果的過(guò)程铆铆，強(qiáng)制緩存的情況主要有三種
- 不存在緩存標(biāo)識(shí)：直接請(qǐng)求
- 存在緩存標(biāo)識(shí)蝶缀，但結(jié)果失效：協(xié)商緩存
- 存在緩存標(biāo)識(shí)，且結(jié)果未失效：直接返回結(jié)果
// 與上述的Last-Modified薄货，ETag對(duì)應(yīng)翁都，If優(yōu)先級(jí)低
If-Moified-Since: Tue, 28 Nov 2017 05:14:02 GMT
If-None-Match: W/"5a1cf09a-63c6"
協(xié)商緩存階段
過(guò)期后進(jìn)入?yún)f(xié)商緩存階段
請(qǐng)求攜帶這兩個(gè)字段，服務(wù)器以此判斷資源是否修改
修改：返回200 和新的內(nèi)容
未修改：返回304 加載本地緩存（Chrome谅猾，firefox不會(huì)）
啟發(fā)式緩存階段
Age:23146
Cache-Control: public
Date:Tue, 28 Nov 2017 12:26:41 GMT
Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT
Vary:Accept-Encoding
確定緩存過(guò)期時(shí)間的字段一個(gè)都沒(méi)有柄慰！
根據(jù)響應(yīng)頭中2個(gè)時(shí)間字段 Date 和 Last-Modified 之間的時(shí)間差值，取其值的10%作為緩存時(shí)間周期税娜。
Expires有一個(gè)很大的弊端坐搔，就是它返回的是服務(wù)器的時(shí)間，但判斷的時(shí)候用的卻是客戶端的時(shí)間
If-Unmodified-Since
這個(gè)字段字面意思和If-Modified-Since相反巧涧，但處理方式并不是相反的薯蝎。如果文件在兩次訪問(wèn)期間沒(méi)有被修改則返回200和資源，如果文件修改了則返回狀態(tài)碼412(預(yù)處理錯(cuò)誤)谤绳。
用途：
- 與含有
If-Range消息頭的范圍請(qǐng)求搭配使用占锯，實(shí)現(xiàn)斷點(diǎn)續(xù)傳的功能，即如果資源沒(méi)修改繼續(xù)下載缩筛，如果資源修改了消略，續(xù)傳的意義就沒(méi)有了。 - POST瞎抛、PUT請(qǐng)求中艺演，優(yōu)化并發(fā)控制，即當(dāng)多用戶編輯用一份文檔的時(shí)候桐臊，如果服務(wù)器的資源已經(jīng)被修改胎撤，那么在對(duì)其作出編輯會(huì)被拒絕提交
Last-Modified有幾個(gè)缺點(diǎn)：沒(méi)法準(zhǔn)確的判斷資源是否真的修改了，比如某個(gè)文件在1秒內(nèi)頻繁更改了多次断凶，根據(jù)Last-Modified的時(shí)間(單位是秒)是判斷不出來(lái)的伤提，再比如，某個(gè)資源只是修改了认烁，但實(shí)際內(nèi)容并沒(méi)有發(fā)生變化肿男，Last-Modified也無(wú)法判斷出來(lái)介汹，因此在HTTP/1.1中還推出了ETag這個(gè)字段
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://juejin.im/post/5a6c87c46fb9a01ca560b4d7
