瀏覽器緩存之Last-Modified


最近項目更新比較頻繁,而且修改的文件也比較多,每次更新完后總有用戶報怨頁面有些樣式或js的效果出不來。原來部署都是運維同事做的,但用戶反映的情況出現多了,我也自然關心起來了。經過自己的測試才發現原來,不同的瀏覽器存在

 

設置瀏覽器緩存有下面幾種方法

Last-Modified:服務器上文件的最后修改時間

Etag:文件標識

Expires:本地緩存目錄中,文件過期的時間(由服務器指定具體的時間)

Cache-control:本地緩存目錄中,文件過期的時間(由服務器指定過期的間隔時間,由於瀏覽器根據間隔生成具體的時間)

 

一般情況下,iis會在訪問css、js等靜態文件時,返回給瀏覽器Last-Modified和Etag標記,瀏覽器再次訪問服務器的時候會在帶上兩個標記

If-Modified-Since和If-None-Match,服務器檢查參數值,如果文件沒有改變則返回304,此時瀏覽器就訪問本地緩存了。如果服務器上該文件被修改過,那么參數值就不一樣,服務器就把最后的文件返回給瀏覽器。

這是Last-Modified和Etag的標准處理方式,但目前的瀏覽器都是這樣嗎?

以下對ie9、FF和chrome瀏覽器進行對比

首第一次訪問

ie9

clip_image002

FF

clip_image004

chrome

clip_image006

 

第二次訪問,直接在地址欄里回車

ie9

clip_image008

FF

clip_image010

chrome

clip_image012

clip_image014

 

FF和chrome會默認給沒有過期時間標記的文件加上一個過期時間,這個時間是多少就不清楚,所以在一段時間內,訪問的都是本地的緩存,但ie則是給了一個相當長的時間,所以多次訪問的都是本地的緩存。

 

再來看刷新的處理

ie9

clip_image016

FF

clip_image018

chrome

clip_image020

對於刷新對是一樣的處理各瀏覽器。

 

那么修改下服務器文件再訪問

ie9

使用緩存

clip_image022

FF

使用緩存(過期時間還沒到)

clip_image024

chrome

使用緩存(過期時間還沒到)

clip_image026

clip_image028

 

再刷新看一下

ie9

重新請求,內容更新了

clip_image030

FF

重新請求,內容更新了

clip_image032

chrome

重新請求,內容更新了

clip_image034

 

那對於這種地址欄訪問的不一樣會產生什么問題呢?

當服務器上的文件修改了,由於ie9長時間沒有發起請求鏈接而直接使用本地的緩存,那么將會得到老的文件而不是新的文件。那么對於一些css樣式和js效果來說,將會帶來很多麻煩。

 

如何解決這個問題?

第一種方法:給js文件或css的請求帶個參數,每次更新項目的時候也更新參數,這樣就可以了

第二種方法:加上過期時間標記

當文件過期時間到了,文件就會去請求,如果服務器上的文件沒有修改過,返回的就是304,如果沒有過期時間還沒到,不會向服務器發送請求,減少了服務器的開銷!!

clip_image036

第三種方法:前兩種方法相結合。

 

(另一種情況:更新了網站的內容,但請求后還是原來的舊的內容,這是iis的服務器端的緩存造成的,理論上更新后緩存就應該失效,但iis好像有時候會出現這種問題,回收下應該程序池就行了!)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM