2011-10-06 205 views
22

我注意到一些網站把版本號(特別是)放在CSS文件路徑中。例如:爲什麼要將版本號添加到CSS文件路徑?

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

把版本號的主要目的是什麼?如果目的是記住CSS文件上次更新的時間,那麼不應該在CSS文件中添加版本號作爲註釋嗎?

+0

的可能的複製[什麼是追加「?V = 1」的鏈接和腳本標記CSS和Javascript的網址嗎?](http://stackoverflow.com/questions/3466989/what-does-appending-v- 1-to-css-and-javascript-urls-in-link-and-script-tags-do) – zanetu

回答

38

http://html5boilerplate.com/docs/Version-Control-with-Cachebusting/

什麼是V = 1" 是 JavaScript的/ CSS版本控制緩存無效化

爲什麼你需要緩存的JavaScript CSS網頁 'V = 1?'?頁面設計變得更加豐富和豐富,這意味着更多的腳本和樣式表在 頁面中。首次訪問您的頁面可能需要創建多個HTTP 請求,但通過使用Expires標頭,您可以將這些組件設置爲可緩存的 。這避免了不必要的在隨後的頁面 視圖中發出ssary HTTP請求。過期標頭最常用於圖像,但它們應該用於所有組件,包括腳本,樣式表等。

HTML5 Boilerplate如何處理JavaScript CSS緩存? HTML5 Boilerplate帶有服務器配置文件:.htacess, web.config和nginx.conf。這些文件告訴服務器添加 JavaScript CSS緩存控件。

什麼時候需要使用版本控制和cachebusting? 傳統上,如果您使用遠期過期標頭,則必須在組件更改時更改組件的文件名。

如何使用cachebusting?如果你更新你的JavaScript或CSS,只需要 將「?v = 1」更新爲「?v = 2」,「?v = 3」......這將欺騙瀏覽器 認爲您正在嘗試加載新文件,因此,解決緩存 的問題。

+9

你可以動態地使用PHP強制它在保存時更改版本號。以下是WordPress的一個例子。 '<鏈路的rel = 「樣式表的」 href = 「」 類型=」 text/css「media =」screen,projection「/>' – Justin

+0

你能指導我如何添加版本變量。我的意思是它將如何工作。謝謝 –

5

它確保您擁有最新版本。如果您像以前一樣更改網站並留下名稱,那麼瀏覽器可能不會注意到這一更改,並使用其緩存中的舊CSS。如果您添加版本,瀏覽器將下載新的樣式表。

1

這是爲了優化瀏覽器緩存。您可以爲css文件設置標題永不過期,以便瀏覽器也可以從緩存中獲取它。

但是,如果你這樣做,你會在更改css文件時遇到問題,因爲一些瀏覽器可能不會注意到這種變化。通過添加/更改版本參數,它是「另一個」請求,因此它不會被從cahe中取出(但是在新版本被緩存之後,它將從那裏取出以節省帶寬/請求數量,直到版本再次改變)。

詳細的解釋可以在html5boilerplate.com

0

被foudn我的知識是相當多了關於網站的日期,但存儲在「HREF」參數變量是通過HTTP瀏覽器接收。在URL重寫中使用通常的技巧,實際上可以有一個任意的腳本,在調用時會產生CSS輸出。這個輸出可能會有所不同,具體取決於參數。

2

其中一個原因可能是繞過文件緩存。同名的CSS文件可以被服務器緩存,並且如果新版本有佈局變化,可能會導致顯示不良。

相關問題