最近項目更新比較頻繁,而且修改的文件也比較多,每次更新完后總有用戶報怨頁面有些樣式或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
FF
chrome
第二次訪問,直接在地址欄里回車
ie9
FF
chrome
FF和chrome會默認給沒有過期時間標記的文件加上一個過期時間,這個時間是多少就不清楚,所以在一段時間內,訪問的都是本地的緩存,但ie則是給了一個相當長的時間,所以多次訪問的都是本地的緩存。
再來看刷新的處理
ie9
FF
chrome
對於刷新對是一樣的處理各瀏覽器。
那么修改下服務器文件再訪問
ie9
使用緩存
FF
使用緩存(過期時間還沒到)
chrome
使用緩存(過期時間還沒到)
再刷新看一下
ie9
重新請求,內容更新了
FF
重新請求,內容更新了
chrome
重新請求,內容更新了
那對於這種地址欄訪問的不一樣會產生什么問題呢?
當服務器上的文件修改了,由於ie9長時間沒有發起請求鏈接而直接使用本地的緩存,那么將會得到老的文件而不是新的文件。那么對於一些css樣式和js效果來說,將會帶來很多麻煩。
如何解決這個問題?
第一種方法:給js文件或css的請求帶個參數,每次更新項目的時候也更新參數,這樣就可以了
第二種方法:加上過期時間標記
當文件過期時間到了,文件就會去請求,如果服務器上的文件沒有修改過,返回的就是304,如果沒有過期時間還沒到,不會向服務器發送請求,減少了服務器的開銷!!
第三種方法:前兩種方法相結合。
(另一種情況:更新了網站的內容,但請求后還是原來的舊的內容,這是iis的服務器端的緩存造成的,理論上更新后緩存就應該失效,但iis好像有時候會出現這種問題,回收下應該程序池就行了!)