http缓存整理
背景：無(wú)論是前端還是后端對(duì)http都是比較熟悉的，今天來(lái)簡(jiǎn)單整理一下關(guān)于前端緩存的http緩存部分，詳細(xì)介紹如下：
前端緩存：
前端緩存可分為兩大類：http緩存和瀏覽器緩存。我們今天重點(diǎn)講的是http緩存，所以關(guān)于瀏覽器緩存大家自行去查閱。下面這張圖是前端緩存的一個(gè)大致知識(shí)點(diǎn)：
HTTP緩存
一.什么是http緩存
http緩存指的是: 當(dāng)客戶端向服務(wù)器請(qǐng)求資源時(shí)，會(huì)先抵達(dá)瀏覽器緩存，如果瀏覽器有“要請(qǐng)求資源”的副本，就可以直接從瀏覽器緩存中提取而不是從原始服務(wù)器中提取這個(gè)資源。
常見(jiàn)的http緩存只能緩存get請(qǐng)求響應(yīng)的資源，對(duì)于其他類型的響應(yīng)則無(wú)能為力，所以后續(xù)說(shuō)的請(qǐng)求緩存都是指GET請(qǐng)求。
http緩存都是從第二次請(qǐng)求開(kāi)始的。第一次請(qǐng)求資源時(shí)，服務(wù)器返回資源，并在respone header頭中回傳資源的緩存參數(shù)；第二次請(qǐng)求時(shí)，瀏覽器判斷這些請(qǐng)求參數(shù)，命中強(qiáng)緩存就直接200，否則就把請(qǐng)求參數(shù)加到request header頭中傳給服務(wù)器，看是否命中協(xié)商緩存，命中則返回304，否則服務(wù)器會(huì)返回新的資源。
1.http緩存的分類：
根據(jù)是否需要重新向服務(wù)器發(fā)起請(qǐng)求來(lái)分類，可分為(強(qiáng)制緩存，協(xié)商緩存) 根據(jù)是否可以被單個(gè)或者多個(gè)用戶使用來(lái)分類，可分為(私有緩存，共享緩存) 強(qiáng)制緩存如果生效，不需要再和服務(wù)器發(fā)生交互，而協(xié)商緩存不管是否生效，都需要與服務(wù)端發(fā)生交互。下面是強(qiáng)制緩存和協(xié)商緩存的一些對(duì)比：
1.1、強(qiáng)制緩存
強(qiáng)制緩存在緩存數(shù)據(jù)未失效的情況下（即Cache-Control的max-age沒(méi)有過(guò)期或者Expires的緩存時(shí)間沒(méi)有過(guò)期），那么就會(huì)直接使用瀏覽器的緩存數(shù)據(jù)，不會(huì)再向服務(wù)器發(fā)送任何請(qǐng)求。強(qiáng)制緩存生效時(shí)，http狀態(tài)碼為200。這種方式頁(yè)面的加載速度是最快的，性能也是很好的，但是在這期間，如果服務(wù)器端的資源修改了，頁(yè)面上是拿不到的，因?yàn)樗粫?huì)再向服務(wù)器發(fā)請(qǐng)求了。這種情況就是我們?cè)陂_(kāi)發(fā)種經(jīng)常遇到的，比如你修改了頁(yè)面上的某個(gè)樣式，在頁(yè)面上刷新了但沒(méi)有生效，因?yàn)樽叩氖菑?qiáng)緩存，所以Ctrl + F5一頓操作之后就好了。 跟強(qiáng)制緩存相關(guān)的header頭屬性有（Pragma/Cache-Control/Expires）
這個(gè)Pragma和Cache-Control共存時(shí)的優(yōu)先級(jí)問(wèn)題還有點(diǎn)異議，我在不同的文章里發(fā)現(xiàn)：有的說(shuō)Pragma的優(yōu)先級(jí)更高，有的說(shuō)Cache-Control高。為了搞清楚這個(gè)問(wèn)題，我決定動(dòng)手操作一波，首先我用nodejs搭建后臺(tái)服務(wù)器，目的是設(shè)置緩存參數(shù)，具體代碼如下：
然后再瀏覽器上訪問(wèn)：http://localhost:8888
第一次訪問(wèn)時(shí)都是從后臺(tái)返回的數(shù)據(jù)：
第二次訪問(wèn)時(shí)：
最終得出結(jié)論：
Pragma和Cache-control共存時(shí)，Pragma的優(yōu)先級(jí)是比Cache-Control高的。
注意：
在chrome瀏覽器中返回的200狀態(tài)會(huì)有兩種情況：
1、from memory cache
(從內(nèi)存中獲取/一般緩存更新頻率較高的js、圖片、字體等資源)
2、from disk cache
(從磁盤(pán)中獲取/一般緩存更新頻率較低的js、css等資源)
這兩種情況是chrome自身的一種緩存策略，這也是為什么chrome瀏覽器響應(yīng)的快的原因。其他瀏覽返回的是已緩存狀態(tài)，沒(méi)有標(biāo)識(shí)是從哪獲取的緩存。
chrome瀏覽器：
Firefox瀏覽器：
1.2、協(xié)商緩存
當(dāng)?shù)谝淮握?qǐng)求時(shí)服務(wù)器返回的響應(yīng)頭中沒(méi)有Cache-Control和Expires或者Cache-Control和Expires過(guò)期還或者它的屬性設(shè)置為no-cache時(shí)(即不走強(qiáng)緩存)，那么瀏覽器第二次請(qǐng)求時(shí)就會(huì)與服務(wù)器進(jìn)行協(xié)商，與服務(wù)器端對(duì)比判斷資源是否進(jìn)行了修改更新。如果服務(wù)器端的資源沒(méi)有修改，那么就會(huì)返回304狀態(tài)碼，告訴瀏覽器可以使用緩存中的數(shù)據(jù)，這樣就減少了服務(wù)器的數(shù)據(jù)傳輸壓力。如果數(shù)據(jù)有更新就會(huì)返回200狀態(tài)碼，服務(wù)器就會(huì)返回更新后的資源并且將緩存信息一起返回。跟協(xié)商緩存相關(guān)的header頭屬性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）請(qǐng)求頭和響應(yīng)頭需要成對(duì)出現(xiàn)
協(xié)商緩存的執(zhí)行流程是這樣的：當(dāng)瀏覽器第一次向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)在響應(yīng)頭中返回協(xié)商緩存的頭屬性：ETag和Last-Modified,其中ETag返回的是一個(gè)hash值，Last-Modified返回的是GMT格式的最后修改時(shí)間。然后瀏覽器在第二次發(fā)送請(qǐng)求的時(shí)候，會(huì)在請(qǐng)求頭中帶上與ETag對(duì)應(yīng)的If-Not-Match，其值就是響應(yīng)頭中返回的ETag的值，Last-Modified對(duì)應(yīng)的If-Modified-Since。服務(wù)器在接收到這兩個(gè)參數(shù)后會(huì)做比較，如果返回的是304狀態(tài)碼，則說(shuō)明請(qǐng)求的資源沒(méi)有修改，瀏覽器可以直接在緩存中取數(shù)據(jù)，否則，服務(wù)器會(huì)直接返回?cái)?shù)據(jù)。
注意：
ETag/If-Not-Match是在HTTP/1.1出現(xiàn)的，主要是解決以下問(wèn)題：
(1)、Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間
(2)、如果某些文件被修改了，但是內(nèi)容并沒(méi)有任何變化，而Last-Modified卻改變了，導(dǎo)致文件沒(méi)法使用緩存
(3)、有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形
1.3、私有緩存（瀏覽器級(jí)緩存）
私有緩存只能用于單獨(dú)的用戶：Cache-Control: Private
1.4、共享緩存（代理級(jí)緩存）
共享緩存可以被多個(gè)用戶使用: Cache-Control: Public
二、為什么要使用HTTP緩存？
根據(jù)上面的學(xué)習(xí)可發(fā)現(xiàn)使用緩存的好處主要有以下幾點(diǎn)：
1. 減少了冗余的數(shù)據(jù)傳輸，節(jié)省了網(wǎng)費(fèi)。
2. 緩解了服務(wù)器的壓力， 大大提高了網(wǎng)站的性能
3. 加快了客戶端加載網(wǎng)頁(yè)的速度
三、如何使用HTTP緩存？
一般需要緩存的資源有html頁(yè)面和其他靜態(tài)資源：
1、html頁(yè)面緩存的設(shè)置主要是在<head>標(biāo)簽中嵌入<meta>標(biāo)簽，這種方式只對(duì)頁(yè)面有效，對(duì)頁(yè)面上的資源無(wú)效
1.1、html頁(yè)面禁用緩存的設(shè)置如下：
<meta http-equiv="pragma" content="no-cache">
// 僅有IE瀏覽器才識(shí)別的標(biāo)簽，不一定會(huì)在請(qǐng)求字段加上Pragma，但的確會(huì)讓當(dāng)前頁(yè)面每次都發(fā)新請(qǐng)求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流瀏覽器識(shí)別的標(biāo)簽
<meta http-equiv="expires" content="0">
// 僅有IE瀏覽器才識(shí)別的標(biāo)簽，該方式僅僅作為知會(huì)IE緩存時(shí)間的標(biāo)記，你并不能在請(qǐng)求或響應(yīng)報(bào)文中找到Expires字段
1.2、html設(shè)置緩存如下：
<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流瀏覽器識(shí)別的標(biāo)簽
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 僅有IE瀏覽器才識(shí)別的標(biāo)簽
2、靜態(tài)資源的緩存一般是在web服務(wù)器上配置的，常用的web服務(wù)器有：nginx、apache。具體的配置這里不做詳細(xì)介紹，大家自行查閱。
3、不想使用緩存的幾種方式：
3.1、Ctrl + F5強(qiáng)制刷新，都會(huì)直接向服務(wù)器提取數(shù)據(jù)。
3.2、按F5刷新或?yàn)g覽器的刷新按鈕，默認(rèn)加上Cache-Control：max-age=0，即會(huì)走協(xié)商緩存。
3.2、在IE瀏覽器下不想使用緩存的做法：打開(kāi)IE，點(diǎn)擊工具欄上的工具->Internet選項(xiàng)->常規(guī)->瀏覽歷史記錄 設(shè)置. 選擇“從不”，然后保存。最后點(diǎn)擊“刪除”把Internet臨時(shí)文件都刪掉 （IE緩存的文件就是Internet臨時(shí)文件）。
3.3、還有就是上面1、2中禁用緩存的做法
3.4、對(duì)于其他瀏覽器也都有清除緩存的辦法
四、HTTP緩存的幾個(gè)注意點(diǎn)
1、強(qiáng)緩存情況下，只要緩存還沒(méi)過(guò)期，就會(huì)直接從緩存中取數(shù)據(jù)，就算服務(wù)器端有數(shù)據(jù)變化，也不會(huì)從服務(wù)器端獲取了，這樣就無(wú)法獲取到修改后的數(shù)據(jù)。決解的辦法有：在修改后的資源加上隨機(jī)數(shù),確保不會(huì)從緩存中取。
例如：
http://www.kimshare.club/kim/common.css?v=22324432
http://www.kimshare.club/kim/common.2312331.css
2、盡量減少304的請(qǐng)求，因?yàn)槲覀冎?#xff0c;協(xié)商緩存每次都會(huì)與后臺(tái)服務(wù)器進(jìn)行交互，所以性能上不是很好。從性能上來(lái)看盡量多使用強(qiáng)緩存。
3、在Firefox瀏覽器下，使用Cache-Control: no-cache 是不生效的，其識(shí)別的是no-store。這樣能達(dá)到其他瀏覽器使用Cache-Control: no-cache的效果。所以為了兼容Firefox瀏覽器，經(jīng)常會(huì)寫(xiě)成Cache-Control: no-cache，no-store。
4、與緩存相關(guān)的幾個(gè)header屬性有：Vary、Date/Age。
Vary：
vary本身是“變化”的意思，而在http報(bào)文中更趨于是“vary from”（與。。。不同）的含義，它表示服務(wù)端會(huì)以什么基準(zhǔn)字段來(lái)區(qū)分、篩選緩存版本。
在服務(wù)端有著這么一個(gè)地址，如果是IE用戶則返回針對(duì)IE開(kāi)發(fā)的內(nèi)容，否則返回另一個(gè)主流瀏覽器版本的內(nèi)容。
格式：Vary: User-Agent
知會(huì)代理服務(wù)器需要以 User-Agent 這個(gè)請(qǐng)求首部字段來(lái)區(qū)別緩存版本，防止傳遞給客戶端的緩存不正確。
Date/Age：
響應(yīng)報(bào)文中的 Date 和 Age 字段：區(qū)分其收到的資源是否命中了代理服務(wù)器的緩存。
Date 理所當(dāng)然是原服務(wù)器發(fā)送該資源響應(yīng)報(bào)文的時(shí)間（GMT格式），如果你發(fā)現(xiàn) Date 的時(shí)間與“當(dāng)前時(shí)間”差別較大，或者連續(xù)F5刷新發(fā)現(xiàn) Date 的值都沒(méi)變化，則說(shuō)明你當(dāng)前請(qǐng)求是命中了代理服務(wù)器的緩存。
Age 也是響應(yīng)報(bào)文中的首部字段，它表示該文件在代理服務(wù)器中存在的時(shí)間（秒），如文件被修改或替換，Age會(huì)重新由0開(kāi)始累計(jì)。
瀏覽器緩存
下面說(shuō)說(shuō)最常用到的瀏覽器緩存有：cookie、sessionStorage、localStorage這三者的主要特征如下：
本文小結(jié)：
1、對(duì)于強(qiáng)制緩存，服務(wù)器通知瀏覽器一個(gè)緩存時(shí)間，在緩存時(shí)間內(nèi)，下次請(qǐng)求，直接用緩存，不在時(shí)間內(nèi)，執(zhí)行協(xié)商緩存策略。
2、對(duì)于協(xié)商緩存，將緩存信息中的Etag和Last-Modified通過(guò)請(qǐng)求發(fā)送給服務(wù)器，由服務(wù)器校驗(yàn)，返回304狀態(tài)碼時(shí)，瀏覽器直接使用緩存。
下圖是瀏覽器首次和再次發(fā)送http請(qǐng)求的執(zhí)行流程圖：
以上是關(guān)于http緩存的整理，本文轉(zhuǎn)載自kim，希望對(duì)大家理解http有所幫助。
?
總結(jié)
- 上一篇： 总结前端常用的网址
- 下一篇： 【真题21套】计算机二级公共基础知识选择