背景

在搜尋引擎中搜索關鍵字 .htaccess 快取，你可以搜尋到很多關於設定網站檔案快取的教程，通過設定可以將css、js等不太經常更新的檔案快取在瀏覽器端，這樣訪客每次訪問你的網站的時候，瀏覽器就可以從快取中獲取css、js等靜態檔案，而不必從你的伺服器再次下載讀取，這樣在一定程度上加快了網站的開啟速度，又可以節約一下你的伺服器流量。

問題

最近在修改更新我的 IT-Homer部落格 時，遇到了一個問題：本地更新了style.css後，不管怎麼更新CDN快取，還是Ctrl + F5 重新整理瀏覽器，部落格仍然載入的舊的style.css檔案。

現在問題來了，通過.htaccess設定的css、js快取都有一個過期時間，如果在訪客的瀏覽器中已經快取了css、js，在這些css、js快取未過期之前，瀏覽器只會從快取中讀取css和js，如果你在伺服器上修改了css和js，那麼這些更改在回頭客的瀏覽器中是不會有變化的，除非回頭客按了Ctrl + F5重新整理了你的網站頁面或者手動清空了瀏覽器的快取。一個網站的訪客成千上萬，回頭客也會有不少，你不可能在更新css後讓每個訪客都重新整理一下快取吧，那麼這個問題你會怎麼處理呢？

處理辦法

1. 更改css檔名

其實解決這個問題很簡單，快取是通過檔名（例如：style.css，style.min.css，style.min.v2.css等）標記快取內容的。在你更新了網站的css檔案內容後，在更換一下css的檔名就可以了。如原先html中的css呼叫語句如下：

<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.css” type=”text/css” media=”screen” />

改一下css檔名就可以了：

<link rel=“stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/

另外一種從更改css檔名的方法是將版本號寫到檔名中，如：

<link rel=”stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/style.min.v1.0.0.css” type=”text/css” media=”screen”/>

css檔案更新後，改一下檔名中的版本號即可：

<link rel=”stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/

2. 給css檔案加個版本號

其實每次修改css檔案後還要修改css的檔名有點麻煩，那麼我們可以在載入css語句中加入個版本號（即css連結中?後面的內容）就可以了，由瀏覽器自動去比較css，js連結後面的版本號大小，來自動更新客戶端最新的css，js等靜態檔案。

例如原先html中的css呼叫語句如下：

<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.min.css?ver=1.0.0”type=”text/css” media=”screen”/>

改一下css檔案的版本號改成2012就可以了：

<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.min.css?ver=1.0.1”type=”text/css” media=”screen”/>

總結

其實css，js檔案後面的問號不起實際作用，僅能當作字尾，讓瀏覽器自動檢測更新最新的css，js等靜態檔案。如果用問號加引數的方法，可以新增版本號等資訊，同時可以重新整理一下瀏覽器端的快取。一個小小的細節，可以給我們帶來很大的方便。