在實際項目開發過過程中,頁面是上傳到服務器上的。而為了減少服務器的壓力,讓用戶少加載,浏覽器會將圖片、css、js緩存到本地中,以便下次訪問網站時使用。這樣做不僅減少了服務器的壓力,並且也減少了用戶的下載次數,獲得更好的用戶體驗。
然而在版本升級或做一些css、js等調整的時候,緩存導致用戶無法顯示更新後的樣式,這是另人頭頭疼的問題。除非用戶自行手動升級緩存,不過幾乎所有用戶不會為了正常訪問這個網站而去手動清除緩存,因為用戶根本不知道是不是緩存的問題,而歸根結底,用戶就是認為你的頁面存在問題,不能正常訪問。
為了可以正常使用緩存,又避免這樣的問題,我們可以動腦筋想想,如果解決此問題呢?
如果更改了樣式不能正常訪問,那麼更改樣式的文件名呢?答案是可以的,這裡將不再驗證。然而每次都手動的去更改文件名顯然過於麻煩,能不能不更改文件名呢?答案是肯定的。我們可能通在引入的文件名後面加入版本號,與之前的版本都不同的版本號(一般為更新日期)。代碼如下:
復制代碼代碼如下:
<link rel="stylesheet" type="text/css" href="reset.css?v=20140829">
<script type="text/javascript" src="core.js?v=20140829"></script>
可以看到我的CSS文件名及JS文件名後面都跟了"v=20140829",這樣做可以不去改變文件名又做到緩存的同時,可以實時更新。而"v=20140829"只是普遍習慣書寫,可更改為其它的。
最後是圖片,一般img標簽的圖片都不會重名,因為都是在後台生成的文件名。而如果是固定的文件名圖片,方法同上。而對於背景圖,由於更改了樣式名,圖片的解析路徑自然是更新同步,因此背景圖也更新了。