問題:
網站調整后,發現頁面顯示不正常,刷新清空緩存后才能顯示正常。
研究:
可能存在本地緩存問題,雖然服務器修改了css或者js文件,但是瀏覽器仍然使用的是本地緩存的css
解決:
1.更新文件后更改css/js文件名
緩存是通過文件名標記緩存的內容的,在更新了網站的css或者js文件內容后,在更新了一下css或者js文件名就行了。
例如:
原文件名為:
<link rel="stylesheet" href="css/style.css" />
更新后 更改命名為:
<link rel="stylesheet" href="css/style_01.css" />
2.給css/js文件加個版本號:
第一種方法修改css/js后改文件名確實麻煩,所以我們可以加載css/js語句中加入版本號(即css/js鏈接中?后面的內容)就可以了。如原先的HTML中的css調用語句如下:
<link rel="stylesheet" href="css/style.css?v=201708" />
將css文件的版本號改成新的:
<link rel="stylesheet" href="css/style.css?v=201709" />
關於css/js文件后綴參數:
css文件后面的問號起不到實際作用,僅能當作后綴,如果用問號加參數的方法,可以添加版本號等信息,更新的同時可以刷新一下瀏覽器的緩存。例如:
<link rel="stylesheet" href="css/style.css?version=1.0.0" /> <script type="text/javascript" src="js/style.js?version=1.0.0"></script>
使用參數的兩種作用:
客戶端會緩存css/js文件,因此每次升級js/css文件后,改編版本號,客戶端瀏覽器就會重新下載新的js/css文件,起到刷新緩存的作用。
腳本並不存在,而是服務端動態生成的,因此帶了個版本號,以示區分。即上面代碼對於文件來說等價於:
<link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/style.js"></script>
但瀏覽器會認為它是該文件的某個版本! 第一種方法使用最多,也可能兩種方法同時使用。