解決緩存引起的CSS/JS/IMG問題

此次轉載的文章講的是CSs緩存的問題。CSS通常狀況下，咱們都會作必定的緩存，畢竟這玩意不多會動它，但對於一個稍大一點的網站來講，它就可能會常常變更了。
然而，CSS對於瀏覽器來講，通常狀況下是會被自動緩存的，因此我在導入CSS的時候，都會制定一個版本號放在文件後面如：xxx.css?20091010，下次更新的時候，把這個日期改一下。用戶在加載的時候會認爲這是一個新文件 。。。

如下是博客園的用戶寫的文章 ：

如何平衡的使用瀏覽器緩存？平時咱們藉助緩存來減小用戶加載頁面文件（好比js,css,image等）的時間和帶寬，同時咱們要確保用戶訪問的上述文件時最新的。然後者是咱們經常頭疼的問題。
本文主要介紹一些小的技巧來確保在網站文件被緩存的同時，又能夠獲得良好的性能和最新的更新的網站內容。
問題描述
好比咱們在某頁面加載了css文件，
<link rel="stylesheet" href="/css/styles.css" type="text/css" />
如何優化頁面訪問的性能呢？
手段一、使用緩存。一般咱們但願此文件被瀏覽器緩存必定的時間，這樣能夠用戶訪問此頁面的時候沒必要每次都向服務器請求下載此文件。咱們也能夠配置服務器在頁面添加」Expires」頭信息，從而告訴瀏覽器緩存此文件的時間。
手段二、咱們使用yuicompressor等壓縮工具對css文件進行壓縮，減少文件的大小。
問題是當因版面風格的更新，此css已經作了更新，可是用戶可能仍然使用的是舊的頁面主題，甚至錯亂的頁面。這樣對用戶的體驗很是很差。
解決之道：
根本原理：欺騙瀏覽器，讓它認爲它加載的文件跟緩存的文件不同。
方法1、修改文件名
<link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
方法2、增長Query string
<link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
方法3、修改引用文件路徑
這裏最好的是在服務器配置文件中進行配置來實現文件路徑映射（url mapping）。
<link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
以上咱們以css爲例進行了說明，咱們來看看圖片和js文件。
Images
因爲圖片的引用通常寫在css文件中，並採用相對路徑，因此當css的引用路徑發生變化的時候，根據重寫規則，圖片被解析的路徑天然會同步發生更新。
JS
適用於css的方法一樣都適用於JS。
結束語
固然web站點性能的優化，除了緩存以外，還有許多的方法。好比咱們能夠藉助YSlow來幫助用戶獲得最好的體驗。

 
其實方法都差很少。爲了所謂的 yahoo 的N條軍規，你們都在互相折騰。
之因此是N，是由於之前是14條，後來加過兩次。就忘了幾條了。firebug的插件yslow也能夠作簡單的測試哦

 

做者：MingleLui
出處：http://mingle.cnblogs.com/