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"/>

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

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