幫助與文檔

當前位置: 日本不卡高清免v幫助中心雲加速 CDN > 

客戶端(瀏覽器)緩存

客戶端(瀏覽器)緩存
發布時間:2017-05-10


客戶端緩存的缺點

客戶端緩存減少了的服務器請求,避免了文件重複加載,顯著地提升了用戶地方。但是當網站發生了更新的時候(如替換了css、js以及圖片文件),瀏覽器本地仍保存著舊版本的文件,從而導致無法預料後果。

曾幾何時,一個頁麵加載出來,頁麵各元素位置亂飄,按鈕點擊失效,前端GG都會習慣性地問一句:“緩存清了沒?”,然後Ctrl+F5 ,Everything is OK。但有些時候,如果日本不卡高清免v是簡單地在瀏覽器地址欄中敲一個回車,或者是僅僅按F5刷新,問題依然沒有解決,你可知道這三種不同的操作方式,決定瀏覽器不同的刷新緩存策略?

瀏覽器如何來確定使用本地文件還是使用服務器上的新文件?下麵來介紹幾種判斷的方法。

Expires

Expires:Sat, 24 Jan 2015 20:30:54 GMT

如果http響應報文中設置了Expires,在Expires過期之前,日本不卡高清免v就避免了和服務器之間的連接。此時,瀏覽器無需想瀏覽器發出請求,隻需要自己判斷手中的材料是否過期就可以了,完全不需要增加服務器的負擔。

Cache-control: max-age

Expires的方法很好,但是日本不卡高清免v每次都得算一個精確的時間。max-age 標簽可以讓日本不卡高清免v更加容易的處理過期時間。日本不卡高清免v隻需要說,這份資料你隻能用一個星期就可以了。

Max-age 使用秒來計量,如:
Cache-Control:max-age=645672
指定頁麵645672秒(7.47天)後過期。

Last-Modified

服務器為了通知瀏覽器當前文件的版本,會發送一個上次修改時間的標簽,例如:

這樣瀏覽器就知道他收到的這個文件創建時間,在後續的請求中,瀏覽器會按照下麵的規則進行驗證:

  1. 瀏覽器:Hey,我需要jquery.min.js這個文件,如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之後修改過的,請發給我。

  2. 服務器:(檢查文件的修改時間)

  3. 服務器:Hey,這個文件在那個時間之後沒有被修改過,你已經有最新的版本了。

  4. 瀏覽器:太好了,那我就顯示給用戶了。

在這種情況下,服務器僅僅返回了一個304的響應頭,減少了響應的數據量,提高了響應的速度。

下圖是按F5刷新頁麵後,頁麵返回304響應頭。

ETag

通常情況下,通過修改時間來比較文件是可行的。但是在一些特殊情況,例如服務器的時鍾發生了錯誤,服務器時鍾進行修改,夏時製DST到來後服務器時間沒有及時更新,這些都會引起通過修改時間比較文件版本的問題。

ETag可以用來解決這種問題。ETag是一個文件的唯一標誌符。就像一個哈希或者指紋,每個文件都有一個單獨的標誌,隻要這個文件發生了改變,這個標誌就會發生變化。

服務器返回ETag標簽:
ETag:"39001d-1762a-50bf790757e00"

接下來的訪問順序如下所示:

  1. 瀏覽器:Hey,我需要jquery.min.js這個文件,有沒有不匹配"39001d-1762a-50bf790757e00"這個串的

  2. 服務器:(檢查ETag…)

  3. 服務器:Hey,我這裏的版本也是"39001d-1762a-50bf790757e00",你已經是最新的版本了

  4. 瀏覽器:好,那就可以使用本地緩存了

如同 Last-modified 一樣,ETag 解決了文件版本比較的問題。隻不過 ETag 的級別比 Last-Modified 高一些。

額外的標簽

緩存標簽永遠不會停止工作,但是有時候日本不卡高清免v需要對已經緩存的內容進行一些控製。

l Cache-control: public 表示緩存的版本可以被代理服務器或者其他中間服務器識別。

l Cache-control: private 意味著這個文件對不同的用戶是不同的。隻有用戶自己的瀏覽器能夠進行緩存,公共的代理服務器不允許緩存。

l Cache-control: no-cache 意味著文件的內容不應當被緩存。這在搜索或者翻頁結果中非常有用,因為同樣的URL,對應的內容會發生變化。

瀏覽器緩存刷新

1. 在地址欄中輸入網址後按回車或點擊轉到按鈕

瀏覽器以最少的請求來獲取網頁的數據,瀏覽器會對所有沒有過期的內容直接使用本地緩存,從而減少了對瀏覽器的請求。所以,Expires,max-age標記隻對這種方式有效。

2. 按F5或瀏覽器刷新按鈕

瀏覽器會在請求中附加必要的緩存協商,但不允許瀏覽器直接使用本地緩存,它能夠讓 Last-Modified、ETag發揮效果,但是對Expires無效。

3. 按Ctrl+F5或按Ctrl並點擊刷新按鈕

這種方式就是強製刷新,總會發起一個全新的請求,不使用任何緩存。


以上內容是否對您有幫助?