什么是強(qiáng)緩存
- 強(qiáng)制緩存：設(shè)置緩存機(jī)制后，前端第一次請(qǐng)求到資源會(huì)把資源緩存到客戶端，如果下次請(qǐng)求時(shí)資源沒(méi)有過(guò)期，那么直接調(diào)用本地緩存的資源盲厌，如果過(guò)期則重新發(fā)送請(qǐng)求。
- 強(qiáng)制緩存由服務(wù)端開(kāi)啟祸泪，利用
http頭中的Expires和Cache-Control兩個(gè)字段來(lái)控制 - 注意點(diǎn)：
- 強(qiáng)制緩存不用和服務(wù)端交互吗浩；
- 客戶端設(shè)置請(qǐng)求頭
Cache-Control，只有為：no-store没隘、no-cache懂扼、max-age=0才會(huì)生效(也就是客戶端不想走強(qiáng)制緩存的時(shí)候生效。no-cache意思是不走強(qiáng)緩存右蒲，走協(xié)商緩存阀湿；no-store意思是不使用緩存)， - 強(qiáng)緩存返回狀態(tài)碼為200瑰妄；
- post請(qǐng)求不能設(shè)置緩存,只有g(shù)et請(qǐng)求有效陷嘴。
演示說(shuō)明
-
Expires：表示響應(yīng)頭里面的過(guò)期時(shí)間，如果超過(guò)改時(shí)間间坐，瀏覽器再次加載資源時(shí)(例如刷新頁(yè)面灾挨，就會(huì)重新請(qǐng)求該資源文件邑退，否則不會(huì)重新請(qǐng)求，會(huì)使用瀏覽器存儲(chǔ)起來(lái)的緩存)
圖片1.png
從這里可以看出劳澄，請(qǐng)求該文件的時(shí)間是
1該文件過(guò)期的緩存時(shí)間是2（即1分鐘以內(nèi)請(qǐng)求該資源瀏覽器將使用緩存地技，否則重新請(qǐng)求）而從
圖二更能清晰表面，第一次請(qǐng)求的時(shí)候使用的是請(qǐng)求的資源秒拔，第二次請(qǐng)求的時(shí)候使用的是緩存資源
什么是協(xié)商緩存
- 協(xié)商緩存：第一次請(qǐng)求資源時(shí)莫矗，服務(wù)器會(huì)返回資源以及資源標(biāo)識(shí)，當(dāng)下次請(qǐng)求時(shí)溯警，會(huì)對(duì)比資源標(biāo)識(shí)趣苏，如果一致狡相，則只返回狀態(tài)碼304梯轻，不用返回資源，如果不一致尽棕，則會(huì)返回資源和新的資源標(biāo)識(shí)喳挑。
- 協(xié)商緩存主要依賴的響應(yīng)頭包括
last-modified和ETag。 - 注意點(diǎn)：
- 協(xié)商緩存需要和服務(wù)器交互;
- 請(qǐng)求資源命中協(xié)商緩存后滔悉，返回的狀態(tài)碼為
304伊诵； -
last-modified記錄資源最后修改的時(shí)間。啟用后, 請(qǐng)求資源之后的響應(yīng)頭會(huì)增加一個(gè)last-modified字段
演示說(shuō)明：
- 從這里可以看出返回狀態(tài)碼
304表示當(dāng)前為協(xié)商緩存數(shù)據(jù)回官。 - 圖二
Etag表示當(dāng)前文件的標(biāo)識(shí)曹宴，服務(wù)器上存儲(chǔ)著文件的Etag字段，可以在與每次客戶端請(qǐng)求頭里面的If-no-match的字段進(jìn)行比較歉提。如果相等笛坦，則表示未修改，響應(yīng)304苔巨；反之版扩，則表示已修改，響應(yīng)200狀態(tài)碼侄泽，返回?cái)?shù)據(jù)礁芦。 -
Last-Modified則表示該資源文件的最后一次修改的時(shí)間，它會(huì)與每次客戶端請(qǐng)求頭里面的If-Modified-Since字段進(jìn)行對(duì)比悼尾，如果相等柿扣，則表示未修改，響應(yīng)304狀態(tài)碼闺魏，告訴客戶端可繼續(xù)使用緩存窄刘；反之，則表示修改了舷胜，響應(yīng)200狀態(tài)碼娩践，返回新的資源數(shù)據(jù)活翩。
使用什么方案及如何配置？
-
方案：
- 前端
協(xié)商緩存翻伺，后端強(qiáng)緩存
- 前端
-
為什么材泄？
因?yàn)檫M(jìn)行
JS CSS 圖片資源這種一般打包后都不會(huì)隨便修改，所以直接使用強(qiáng)緩存即可吨岭。因?yàn)?
HTML文件引入的CSS js資源存在修改的情況拉宗，所以使用協(xié)商緩存。（場(chǎng)景需求：需將線上P標(biāo)簽的字體顏色變?yōu)?紅色辣辫，經(jīng)過(guò)打包后重新生成新的HTML文件）如下所示旦事，引入的
css js文件經(jīng)打包后名字（也可以手動(dòng)重命名）重新發(fā)生了改變，html重新上線后會(huì)請(qǐng)求新的css js文件急灭，達(dá)到修改的效果姐浮。-
注意點(diǎn)：推薦采用
非覆蓋式部署，避免直接替換后某些用戶無(wú)法訪問(wèn)到舊的資源文件葬馋，出現(xiàn)報(bào)錯(cuò)的情況卖鲤，即保留除HTML文件外的其它全部文件，將新的資源文件直接上傳畴嘶，同時(shí)HTML文件覆蓋后蛋逾，進(jìn)行必要留存和文件命名，方便需要時(shí)進(jìn)行版本回滾窗悯，例如HTML-v1.1//原HTML文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>node demo</title> <link rel="stylesheet" href="/index-s3ds45d.css"> </head> <body> <p>hello world</p> <script src="/index-lsdsa876sd.js"></script> </body> //新HTML文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>node demo</title> <link rel="stylesheet" href="/index-fsdsd09d1.css"> </head> <body> <p>hello world</p> <script src="/index-gses456h.js"></script> </body>
-
如何配置区匣？
-
前端HTML文件配置
//禁用緩存如下： <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字段 后端可以通過(guò)
nginx進(jìn)行配置（這里為了演示悦污，所以設(shè)置緩存周期為60秒）
-
HTML字段補(bǔ)充說(shuō)明
expires
可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間铸屉。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸切端。
cache-control
指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制彻坛。共有以下幾種用法：
-
no-cache: 先發(fā)送請(qǐng)求，與服務(wù)器確認(rèn)該資源是否被更改踏枣，如果未被更改昌屉，則使用緩存。 -
no-store: 不允許緩存茵瀑，每次都要去服務(wù)器上间驮，下載完整的響應(yīng)。（安全措施） -
public: 緩存所有響應(yīng)马昨，但并非必須竞帽。因?yàn)閙ax-age也可以做到相同效果 -
private: 只為單個(gè)用戶緩存扛施，因此不允許任何中繼進(jìn)行緩存。（比如說(shuō)CDN就不允許緩存private的響應(yīng)） -
max-age: 表示當(dāng)前請(qǐng)求開(kāi)始屹篓，該響應(yīng)在多久內(nèi)能被緩存和重用疙渣，而不去服務(wù)器重新請(qǐng)求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒堆巧。
