瀏覽器的第一次請求需要從服務器獲得許多 css、img、js 等相關的文件,如果每次請求都把相關的資源文件加載一次,對 帶寬、服務器資源、用戶等待時間 都有嚴重的損耗,瀏覽器有做優化處理,其把css、img、js等文件在第一次請求成功后就在本地保留一個緩存備份,后續的每次請求就在本身獲得相關的緩存資源文件讀取就可以了,可以明顯地加快用戶的訪問速度。css、img、js等文件可以緩存,但是動態程序文件例如php文件不能緩存,即使緩存我們也不要其緩存效果。
(僅有IE瀏覽器在get請求下會緩存動態程序文件,post請求不會緩存)
IE瀏覽器緩存現象:
解決IE瀏覽器緩存動態文件的辦法
追加參數
Math.random()
new Date().getTime()
直接在open()方法的url參數中追加隨機數,或者時間戳,改變每次請求的url,url地址不一樣,則每次都會請求服務器最新的文件內容
http請求,每次url不一樣了,就會獲取服務器最新的數據內容
設置請求頭
xhr.setRequestHeader('If-Modified-Since','0'); 【值隨意1,2,3,4都可以】
當我們請求服務器上一個文件的時候,如果此次設置了這個請求頭,會把這個請求頭的值與所請求的服務器對應的文件的最后修改時間做個對比,如果對比時間一樣,則讀取本地的瀏覽器緩存文件,否則讀取服務器上最新的文件內容
http請求,自動加了這個設置的請求頭:
以上的設置請求頭的方式,雖然可以解決緩存的問題,但是還是會產生僅有一個的動態緩存文件。
PHP服務端禁用緩存 :
header("Cache-Control:no-cache,must-revalidate");
通過設置服務器的響應頭告訴瀏覽器,請求的時候不要讀取瀏覽器本地緩存文件,讀取最新的文件。
http請求過程:
這種方式不會產生動態緩存文件,徹底解決了動態文件的緩存問題。
問題:項目上線了一段時間,中途修改了此項目的js或css文件,如何不讓瀏覽器緩存?
讓地址變化即可,加一個參數即可:
<script src=”admin.js?v=2></script>
<link src=”style.css?v=1”></link>