網站更新后客戶端緩存問題


問題:

網站調整后,發現頁面顯示不正常,刷新清空緩存后才能顯示正常。

研究:

可能存在本地緩存問題,雖然服務器修改了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>

但瀏覽器會認為它是該文件的某個版本!      第一種方法使用最多,也可能兩種方法同時使用。


免責聲明!

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



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