浏览器缓存:强缓存和协商缓存
1、 強緩存,不向服務器發請求,直接從本地硬盤(from disk cache/from memory cache)或者內存中獲取
2、協商緩存,向服務器發出驗證,如果資源無更改,不重新返回資源內容,資源內容從本地獲取,,需要刷新command+r
3、如果需要從服務器直接獲取,需要強制刷新,就是所謂的command+shift+r
一、強緩存
是利用HTTP響應報文中的Expires和Cache-Control兩個字段來控制的,用來表示資源的緩存時間。
Expires:該字段是HTTP/1.0時的規范,它的值是一個絕對時間的GMT格式的時間字符串,如Expires: Mon, 06 Feb 2017 08:26:48 GMT。這個時間代表資源的失效時間,在此之間,即命中強緩存。但是它有一個明顯的缺點,當客戶端與服務器時間出現較大偏差,就會出現混亂。
Cache-Control:為了解決Expires出現的問題,HTTP/1.1添加了Cache-Control。主要是利用max-age來進行判斷,它是一個相對時間,如Cache-Control:max-age=600,代表著資源的有效期是600秒(10分鐘)。除了max-age外,Cache-Control還有以下幾個常用的值:
- no-cache:不適用強緩存。需要使用緩存協商。
- no-store:禁止瀏覽器緩存,不適用強緩存和緩存協商,每次請求資源都需要發送HTTP到服務器,每次都需要下載完整的資源。
- public:可以被所有的用戶緩存,包括客戶端和CDN等中間代理服務器。
- private:只允許客戶端緩存,不允許CDN等中間代理服務器對其緩存
Last-Modified/If-Modified-Since:瀏覽器第一次請求一個資源的時候,服務器返回的header中會加上Last-Modified,它是一個時間標識該資源的最后修改時間。當瀏覽器再次請求該資源時,HTTP請求頭部會帶上If-Modified-Since,該值為上次響應報文頭部的Last-Modified的值,服務器接收到If-Modified-Since,會根據資源的最后修改時間來判斷是否命中協商緩存,如果命中,返回304(Not Modified),并且不會返回Last-Modified和無響應body。否則返回200,并且返回Last-Modified和有響應的body。
ETag/If-None-Match:它們的值不是一個時間標識,而是一個校驗碼。ETag可以保證每一個資源都是唯一的,資源變化都會導致ETag變化,服務器根據接收到的If-None-Match來判斷是否命中協商緩存。但是當服務器返回304的時候,由于ETag重新生成過(ETag的算法,沒有明確規定,可以每次生成,也可以生成后存儲起來),響應頭部也會帶上ETag,即使它跟之前的沒有變化。
為什么要有ETag?不是已經有Last-Modified嗎。
- 一些文件或許會周期性的修改,但是它的內容沒有變化(只是改變了修改時間),這個時候我們并不希望客戶端認為這個文件修改了,而重新獲取。
- 某些文件在1秒內修改了N次,用If-Modified-Since無法進行區分,因為If-Modified-Since的時間最小單位是秒。
- 某些服務器不能精確的得到文件的最后修改時間。
- Last-Modified和ETag可以一起使用,但是ETag的優先級大于Last-Modified,當ETag相同的情況下,才會繼續比較Last-Modified,最后才決定是否返回304。
看了這么多不知道你糊涂沒,下面有兩張圖,通過這兩張圖,你能對瀏覽器的緩存策略有一個新的認識
三、談下瀏覽器緩存和CDN緩存的關系cdn緩存就是在瀏覽器和服務器間增加的一層緩存,緩存一些html、圖片、css、xml等靜態資源。
無cdn:
?? 用戶在瀏覽網站的時候,瀏覽器能夠在本地保存網站中的圖片或者其他文件的副本,這樣用戶再次訪問該網站的時候,瀏覽器就不用再下載全部的文件,減少了下載量意味著提高了頁面加載的速度。
有cdn:
如果中間加上一層CDN,那么用戶瀏覽器與服務器的交互如下:
客戶端瀏覽器先檢查是否有本地緩存,是否過期,如果過期,則向CDN邊緣節點發起請求,CDN邊緣節點會檢測用戶請求數據的緩存是否過期,如果沒有過期,則直接響應用戶請求,此時一個完成http請求結束;如果數據已經過期,那么CDN還需要向源站發出回源請求(back to the source request),來拉取最新的數據。
四、不同的瀏覽器操作對應的緩存操作
?
?
瀏覽器緩存刷新?
?
1.??在地址欄中輸入網址后按回車或點擊轉到按鈕
?
瀏覽器以最少的請求來獲取網頁的數據,瀏覽器會對所有沒有過期的內容直接使用本地緩存,從而減少了對瀏覽器的請求。所以,Expires,max-age標記只對這種方式有效。?
2.??按F5或瀏覽器刷新按鈕?
瀏覽器會在請求中附加必要的緩存協商,但不允許瀏覽器直接使用本地緩存,它能夠讓 Last-Modified、ETag發揮效果,但是對Expires無效。?
3.??按Ctrl+F5或按Ctrl并點擊刷新按鈕?
這種方式就是強制刷新,總會發起一個全新的請求,不使用任何緩存。?
參考: 1、http://blog.csdn.net/kikikind/article/details/6266101 2、http://blog.csdn.net/heluan123132/article/details/72885990 3、http://blog.csdn.net/lu123535884/article/details/51489951 4、http://www.cnblogs.com/slly/p/6732749.html轉載于:https://www.cnblogs.com/shengulong/p/7442903.html
總結
以上是生活随笔為你收集整理的浏览器缓存:强缓存和协商缓存的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2-4 js基础-事件对象小结
- 下一篇: 分享一个数据库工具DTOOLS