JS和CSS文件會被瀏覽器緩存起來,當下一次頁面加載時,瀏覽器會從緩存中讀取這些文件而不是重新請求服務器。這樣可以提高頁面加載速度,但也會存在一個問題,如果文件內容不改變,瀏覽器就永遠不會請求最新的文件,而導致網頁顯示出現問題。
為了解決這個問題,我們可以在JS和CSS文件鏈接后面加上一個隨機數,每次文件內容有變化時就修改這個隨機數,這樣瀏覽器就會重新請求最新的文件。而這個隨機數可以使用JavaScript中的Math.random()方法實現。
//自動加隨機數
function addRandom(url){
var timestamp = (new Date()).getTime(); //獲取當前時間戳
url = url + "?random=" + timestamp; //加上隨機數
return url;
}
//調用示例
var url = "test.js";
url = addRandom(url); //test.js?random=1611110868386
這里我們定義了一個addRandom()函數,它接收一個url參數,生成一個帶有隨機數的新url,并返回這個新的url。我們可以在需要加載JS或CSS文件時調用這個函數,來確保每次加載的都是最新的文件。
在HTML中,添加隨機數方法如下:
上面分別示范了添加隨機數的CSS和JS調用方法,這樣也能保證每次加載的都是最新的文件,而不會出現緩存的問題。