2012-04-16 28 views
1

我正面臨瀏覽器緩存資源的問題。有幾個JavaScript文件,連續更改的css文件,雖然時間不固定。改變時加載網頁資源[js,css,images]的最佳方式

當我更新服務器上的這些文件時,不會加載新文件,並且需要清除瀏覽器緩存才能加載新文件。

有沒有一種方法,服務器或瀏覽器設置,告訴瀏覽器,加載資源時,如果有服務器文件進行任何更改,從服務器的負載,否則使用存儲在瀏覽器緩存中的現有文件。


進出口尋找這將需要一些基於瀏覽器/服務器的配置,不是我需要做手工每次一個解決方案,我進行更新

回答

1

只需使用一個查詢字符串胸部緩存不是100%保證:例如,某些代理服務器將剝離從喲鏈接的文件上的任何查詢字符串你的HTML。

更好的方法是在URI或文件名修改。我使用重寫規則在Apache中,這樣類似:

my.app.com/12345/js/file.js

指向:

的htdocs/JS/file.js

在文件系統中。

我的應用程序,然後更新基於源控制版本號,但你可以在你的HTML這樣做手工。有了這個解決方案,並設置一個遠的將來到期(HTTP 1.0)和最大年齡(HTTP 1.1)頭我通過一個新的URI獲得永久客戶端緩存的好處,開發方便的文件中對同一個地方被文件系統。

史蒂夫Souders的上遠未來標題:

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

+0

acctually這是一個很好的解決方案。謝謝 – 2012-04-17 08:02:06

4

只要把?[一些獨特/隨機數]在url的末尾它會每次都得到文件。

例如

http://abc.com/css/mystyles.css

使它像

http://abc.com/css/mystyles.css?123163

時間蜱可能是最好的選擇之一,而不是隨機數

+0

有除此之外的任何其他解決方案.. – 2012-04-16 09:40:27

+0

有超過10個資源,我想這將是棘手的,以保持軌道(改變數字)每次我更新資源.. – 2012-04-16 09:41:05

+0

你不必記住數字,?並且在瀏覽器忽略後,您可以在包含文件的服務器端使用隨機數字方法 – Adil 2012-04-16 09:45:54

0

這是設計好做法您的網站,以便客戶端只需要獲取外部JavaScript和CSS onc即

設置外部資源將來到期1年。爲每個文件名添加一個版本號,所以不要使用「stylesheet.css」,而要使用「stylesheet-1.2.4.css」,然後當你想更新客戶端的CSS時,增加版本號。

遞增版本號會強制客戶端下載更新的文件,因爲它被視爲完全獨立的資源。

,如果你不想那麼這個解決方法做到這一點:

<link rel="stylesheet" type="text/css" href="/stylesheet.css?foo=<?php echo rand(); ?>"/> 

<link rel="stylesheet" type="text/css" href="/stylesheet.css?foo="Math.floor(Math.random()*1000)> 
+0

你爲什麼要包含一個隨機數?這是不是隻會導致額外的下載完全打敗緩存資源的目標? – 2012-04-16 11:14:56

+0

我想你沒看過這個問題?這就是先生所要求的迴應。請仔細閱讀並嘗試理解這個問題。 – 2012-04-16 11:21:48

+0

該問題詢問如何在變更文件時下載文件。使用隨機數將意味着文件每次都下載,無論它們是否已更改。 – 2012-04-16 11:25:56

0

有沒有一種方法,服務器或瀏覽器設置,告訴瀏覽器的時候,加載資源,如果服務器文件有任何更改,則從服務器加載,否則使用存儲在瀏覽器緩存中的現有文件。

嘗試使用cookie來檢查。

1

有沒有一種方法,服務器或瀏覽器設置,告訴瀏覽器,當 加載資源,如果有服務器文件進行任何更改,從服務器負載 ,否則使用存儲在現有文件瀏覽器 緩存。

要達到上述目的,您可以Configure ETags。但是,這不會避免將http請求作爲緩存文件觸發服務器的成本。

UPDATE

your comment你可以做這樣的事情

<? 
function get_filename_with_version($fname) 
{ 
    return "?filename=" . $fname; // Generate the hash of the content and append it here as a query string 
} 
?> 

<link rel="stylesheet" href="resrc.php<?php echo get_filename_with_version('a.css');?>" /> 
+0

你能告訴我如何將添加頁眉單個資源文件like.js,在PHP – 2012-04-16 09:58:21

+0

我讀到ETag時和最後修改的頭,但我是一個有點困惑我將如何使用它的特定資源文件 – 2012-04-16 09:59:51

+0

我不想把根文件檢查,但對個人的資源文件..這是否意味着我需要加載它們動態像 <鏈接相對=「樣式的」 href =「resrc.php?文件名=一。css「/> 並在其中添加標題 – 2012-04-16 10:06:08

0

如果你使用PHP工作,你可以使用此解決方案:

//Just add the timestamp as parameter to your filename. 
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?<?php echo time(); ?> /> 
<script type="text/javascript" src="scripts/script.js?<?php echo time(); ?>"></script> 
<img src="image.png?<?php echo time(); ?>" /> 
相關問題