web網站css，js更新后客戶瀏覽器緩存問題，需要刷新才能正常展示的解決辦法

問題描述

最近將公司官網樣式進行了調整，部署到服務器后訪問發現頁面展示不正常，但是刷新之后就會展示正常。

問題分析

研究之后發現可能的原因有

1. css文件過大，加載緩慢
2. 本地緩存問題，雖然服務器修改了css文件，但是瀏覽器仍然使用本地緩存的css，

需要用戶多刷新一次才能正常展示顯然是很不合理的，那么怎么樣解決更新后讓瀏覽器請求新的css或js文件呢？

解決辦法

方法1 更新文件后更改css/js文件名。

其實解決這個問題很簡單，緩存是通過文件名標記緩存的內容的。在你更新了網站的css文件內容后，在更換一下css的文件名就可以了。如原先html中的css調用語句如下：

<link rel="stylesheet" href="style.css" type="text/css"  media="screen"/>

　　改一下css文件名：

<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>

　　

方法2 給css/js文件加個版本號

每次修改css文件后還要修改css的文件名有點麻煩，那么我們可以在加載css語句中加入個版本號（即css鏈接中?后面的內容）就可以了。如原先html中的css調用語句如下：

<link rel="stylesheet" href="style.css?v=2015" type="text/css"  media="screen"/>

　　將css文件的版本號改成新的：

<link rel="stylesheet" href="style.css?v=2016" type="text/css"  media="screen"/>

　　

關於css/js文件后綴參數：

css文件后面的問號起不到實際作用，僅能當作后綴，如果用問號加參數的方法，可以添加版本號等信息，更新的同時可以刷新一下瀏覽器端的緩存。一個小小的細節，可以給我們帶來很大的方便。 
比如：

<script type="text/javascript" src="homepage.js?version=1.2.6"></script>
<link rel="stylesheet" href="base.css?version=2.3.3" type="text/css"/>

　　

使用參數的兩種作用：

1. 客戶端會緩存css或js文件，因此每次升級了js或css文件后，改變版本號，客戶端瀏覽器就會重新下載新的js或css文件，起到刷新緩存的作用。

2. 腳本並不存在，而是服務端動態生成的，因此帶了個版本號，以示區別。 即上面代碼對於文件來說 等價於 :

   <script type="text/javascript" src="homepage.js"></script>
   

   　　

   <link rel="stylesheet" href="base.css" type="text/css"/>
   

   　　

   但瀏覽器會認為他是 該文件的某個版本！

   第一使用最多，也可能兩種作用同時使用。

3. 來源：http://blog.csdn.net/csdn100861/article/details/50684438