- 說了session 和cookie的區(qū)別后，說說緩存的機制
1煤傍、緩存的分類
- 緩存分為服務(wù)端側(cè)（server side蚪战，比如 Nginx、Apache）和客戶端側(cè)（client side橱野，比如 web browser）。
- 服務(wù)端緩存又分為 代理服務(wù)器緩存 和 反向代理服務(wù)器緩存（也叫網(wǎng)關(guān)緩存善玫，比如 Nginx反向代理水援、Squid等），其實廣泛使用的 CDN 也是一種服務(wù)端緩存茅郎，目的都是讓用戶的請求走”捷徑“蜗元，并且都是緩存圖片、文件等靜態(tài)資源系冗。
- 客戶端側(cè)緩存一般指的是瀏覽器緩存奕扣，目的就是加速各種靜態(tài)資源的訪問，想想現(xiàn)在的大型網(wǎng)站毕谴，隨便一個頁面都是一兩百個請求成畦，每天 pv 都是億級別，如果沒有緩存涝开，用戶體驗會急劇下降循帐、同時服務(wù)器壓力和網(wǎng)絡(luò)帶寬都面臨嚴(yán)重的考驗。
2舀武、瀏覽器緩存機制詳解
- 瀏覽器緩存控制機制有兩種：HTML Meta標(biāo)簽 vs. HTTP頭信息
2.1 HTML Meta標(biāo)簽控制緩存
- 瀏覽器緩存機制拄养，其實主要就是HTTP協(xié)議定義的緩存機制（如： Expires； Cache-control等）银舱。但是也有非HTTP協(xié)議定義的緩存機制瘪匿，如使用HTML Meta 標(biāo)簽，Web開發(fā)者可以在HTML頁面的<head>節(jié)點中加入<meta>標(biāo)簽寻馏，代碼如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
- 上述代碼的作用是告訴瀏覽器當(dāng)前頁面不被緩存棋弥，每次訪問都需要去服務(wù)器拉取。使用上很簡單诚欠，但只有部分瀏覽器可以支持顽染，而且所有緩存代理服務(wù)器都不支持，因為代理不解析HTML內(nèi)容本身轰绵。而廣泛應(yīng)用的還是 HTTP頭信息 來控制緩存粉寞，下面我主要介紹HTTP協(xié)議定義的緩存機制。
2.2 HTTP頭信息控制緩存
2.2.1 瀏覽器請求流程- 瀏覽器第一次請求流程圖：
- 瀏覽器再次請求時：
- 瀏覽器第一次請求流程圖：
2.2.2 幾個重要概念解釋
- Expires策略：Expires是Web服務(wù)器響應(yīng)消息頭字段左腔，在響應(yīng)http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)唧垦，而無需再次請求。不過Expires 是HTTP 1.0的東西液样，現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1振亮，所以它的作用基本忽略巧还。Expires 的一個缺點就是，返回的到期時間是服務(wù)器端的時間坊秸，這樣存在一個問題狞悲，如果客戶端的時間與服務(wù)器的時間相差很大（比如時鐘不同步，或者跨時區(qū)）妇斤，那么誤差就很大，所以在HTTP 1.1版開始丹拯，使用Cache-Control: max-age=秒替代站超。
- Cache-control策略（重點關(guān)注）：Cache-Control與Expires的作用一致，都是指明當(dāng)前資源的有效期乖酬，控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請求到服務(wù)器取數(shù)據(jù)死相。只不過Cache-Control的選擇更多，設(shè)置更細(xì)致咬像，如果同時設(shè)置的話算撮，其優(yōu)先級高于Expires。
- 值可以是public县昂、private肮柜、no-cache、no- store倒彰、no-transform审洞、must-revalidate、proxy-revalidate待讳、max-age各個消息中的指令含義如下：
- Public指示響應(yīng)可被任何緩存區(qū)緩存芒澜。
- Private指示對于單個用戶的整個或部分響應(yīng)消息，不能被共享緩存處理创淡。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息痴晦，此響應(yīng)消息對于其他用戶的請求無效。
- no-cache指示請求或響應(yīng)消息不能緩存琳彩，該選項并不是說可以設(shè)置”不緩存“誊酌，容易望文生義~
- no-store用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存汁针，完全不存下來术辐。
- max-age指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應(yīng)。
- min-fresh指示客戶機可以接收響應(yīng)時間小于當(dāng)前時間加上指定時間的響應(yīng)施无。
- max-stale指示客戶機可以接收超出超時期間的響應(yīng)消息辉词。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內(nèi)的響應(yīng)消息猾骡。
- 值可以是public县昂、private肮柜、no-cache、no- store倒彰、no-transform审洞、must-revalidate、proxy-revalidate待讳、max-age各個消息中的指令含義如下：
Last-Modified/If-Modified-Sinc的概念
- Last-Modified/If-Modified-Since要配合Cache-Control使用
- Last-Modified：標(biāo)示這個響應(yīng)資源的最后修改時間瑞躺。web服務(wù)器在響應(yīng)請求時敷搪，告訴瀏覽器資源的最后修改時間。
- If-Modified-Since：當(dāng)資源過期時（使用Cache-Control標(biāo)識的max-age）幢哨，發(fā)現(xiàn)資源具有Last-Modified聲明赡勘，則再次向web服務(wù)器請求時帶上頭 If-Modified-Since，表示請求時間捞镰。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請求資源的最后修改時間進行比對闸与。若最后修改時間較新，說明資源又被改動過岸售，則響應(yīng)整片資源內(nèi)容（寫在響應(yīng)消息包體內(nèi)）践樱，HTTP 200；若最后修改時間較舊凸丸，說明資源無新修改拷邢，則響應(yīng)HTTP 304 (無需包體，節(jié)省瀏覽)屎慢，告知瀏覽器繼續(xù)使用所保存的cache瞭稼。
Etag/If-None-Match
- Etag/If-None-Match也要配合Cache-Control使用。
- Etag：web服務(wù)器響應(yīng)請求時腻惠，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識（生成規(guī)則由服務(wù)器決定）环肘。Apache中，ETag的值集灌，默認(rèn)是對文件的索引節(jié)（INode）廷臼，大小（Size）和最后修改時間（MTime）進行Hash后得到的绝页。
- If-None-Match：當(dāng)資源過期時（使用Cache-Control標(biāo)識的max-age）荠商，發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請求時帶上頭If-None-Match （Etag的值）续誉。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的相應(yīng)校驗串進行比對莱没，決定返回200或304。
- 既生Last-Modified何生Etag酷鸦？你可能會覺得使用Last-Modified已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新饰躲，為什么還需要Etag（實體標(biāo)識）呢？HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個Last-Modified比較難解決的問題：
- Last-Modified標(biāo)注的最后修改只能精確到秒級臼隔，如果某些文件在1秒鐘以內(nèi)嘹裂，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時間如果某些文件會被定期生成摔握，當(dāng)有時內(nèi)容并沒有任何變化寄狼，但Last-Modified卻改變了，導(dǎo)致文件沒法使用緩存有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時間，或者與代理服務(wù)器時間不一致等情形
- Etag是服務(wù)器自動生成或者由開發(fā)者生成的對應(yīng)資源在服務(wù)器端的唯一標(biāo)識符泊愧，能夠更加準(zhǔn)確的控制緩存伊磺。Last-Modified與ETag一起使用時，服務(wù)器會優(yōu)先驗證ETag删咱。
- yahoo的Yslow法則中則提示謹(jǐn)慎設(shè)置Etag：需要注意的是分布式系統(tǒng)里多臺機器間文件的last-modified必須保持一致屑埋，以免負(fù)載均衡到不同機器導(dǎo)致比對失敗，Yahoo建議分布式系統(tǒng)盡量關(guān)閉掉Etag(每臺機器生成的etag都會不一樣痰滋，因為除了 last-modified摘能、inode 也很難保持一致)。
- Pragma行是為了兼容HTTP1.0敲街，作用與Cache-Control: no-cache是一樣的徊哑。
最后總結(jié)下幾種狀態(tài)碼的區(qū)別：
3、用戶行為與緩存
- 瀏覽器緩存行為還有用戶的行為有關(guān)聪富，如果大家對 強制刷新（Ctrl + F5） 還有印象的話應(yīng)該能立刻明白我的意思~
原文來自:http://my.oschina.net/leejun2005/blog/369148?fromerr=h4tcIKzA
具體請參考文末
[1] 瀏覽器緩存機制
http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html
[2] Web 開發(fā)人員需知的 Web 緩存知識
http://www.oschina.net/news/41397/web-cache-knowledge
[3] 瀏覽器緩存詳解:expires,cache-control,last-modified,etag詳細(xì)說明
http://blog.csdn.net/eroswang/article/details/8302191
[4] 在瀏覽器地址欄按回車、F5著蟹、Ctrl+F5刷新網(wǎng)頁的區(qū)別
http://cloudbbs.org/forum.php?mod=viewthread&tid=15790
http://blog.csdn.net/yui/article/details/6584401
[5] Cache Control 與 ETag
https://blog.othree.net/log/2012/12/22/cache-control-and-etag/
[6] 緩存的故事
http://segmentfault.com/blog/animabear/1190000000375344
[7] Google的PageSpeed網(wǎng)站優(yōu)化理論中提到使用Etag可以減少服務(wù)器負(fù)擔(dān)
https://developers.google.com/speed/docs/pss/AddEtags
[8] yahoo的Yslow法則中則提示謹(jǐn)慎設(shè)置Etag
http://developer.yahoo.com/performance/rules.html#etags
[9] H5 緩存機制淺析 移動端 Web 加載性能優(yōu)化
http://segmentfault.com/a/1190000004132566
[10] 網(wǎng)頁性能： 緩存效率實踐
http://www.w3ctech.com/topic/1648
[11] 透過瀏覽器看HTTP緩存
http://www.cnblogs.com/skylar/p/browser-http-caching.html
[12] 瀏覽器緩存知識小結(jié)及應(yīng)用
http://web.jobbole.com/84888/
[13] 大公司里怎樣開發(fā)和部署前端代碼墩蔓？
http://zhihu.com/question/20790576/answer/32602154?utm_campaign=webshare&utm_source=weibo&utm_medium=zhihu
[14] 瀏覽器緩存機制詳解
https://mangguo.org/browser-cache-mechanism-detailed/
