2011-11-30 144 views
5

當我做一個頁面時,鏈接它到一個CSS文件,並在瀏覽器中打開它,它工作正常。 但是,如果在非常短的時間段內再次進行更改並刷新頁面,則不會反映該更改。但過了一段時間後,當我再次刷新頁面時,顯示的變化。如何防止瀏覽器緩存CSS文件?

因此,瀏覽器在某種程度上保持CSS文件緩存並過期。如何使瀏覽器緩存沒有CSS或HTML文件。 如果我可以阻止它在特定的域名會更好。

我在Ubuntu上使用Chrome和Firefox瀏覽器,試圖阻止瀏覽器從緩存CSS文件的 'localhost' ...如何做到這一點...

謝謝...

回答

4

您可以通過按Ctrl+Shift+J打開Developer Tools,然後在右下角找到齒輪圖標。當你點擊它時,你應該看到一個選項來禁用緩存。

+0

不工作。我只是檢查,我有mod_pagespeed模塊從谷歌啓用。這是造成麻煩嗎?謝謝... –

+0

好的,我刪除了pagespeed,它在不禁用緩存的情況下工作,但似乎這仍然是正確的方法。所以我會將這個答案標記爲接受...謝謝... –

+5

沒有看到任何齒輪。 – doublejosh

1

這將有助於瞭解網站的託管方式,因爲您可以在大多數Web服務器中配置此網站。

另外,最好引入緩存清除機制,當您更改CSS文件的內容時,該機制會修改相關CSS文件的鏈接。然後,瀏覽器將重新加載CSS文件,因爲HTML引用了另一個URL。

清除緩存的機制的一個很好的例子是在軌道上的紅寶石3.1資產管道也minifies文件和的gzip他們,如果瀏覽器支持他們:

Rails 3 - Asset Pipeline -- What does it mean to me?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

3

一些簡單因爲這應該工作:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}"> 

只需更換{CURRENT_TIMESTAMP}機智h服務器端代碼中的實際時間戳。這使得瀏覽器認爲它是一個新文件,因爲查詢字符串,它將被再次下載。您也可以使用文件的實際修改時間(如果您使用的是PHP,則爲filemtime('/path/to/css/screen.css')),這樣可以防止不必要的下載。

+0

由於pagespeed模塊而不工作。它在'''後面省略...所以讓我卸載pagespeen並再試一次......感謝這個想法,儘管......它本質上非常簡單和優雅...... –

0

看似不雅但堅如磐石的方法是在內容發生變化時給資產一個新的名稱。這解決了問題,爲所有用戶,不只是你:

<link rel="stylesheet" src="/css/screen_034.css"> 
<link rel="stylesheet" src="/css/screen_035.css"> 
<link rel="stylesheet" src="/css/screen_036.css"> 

或許(但它更是一個痛苦的在IDE改變,有時會導致緩存無關的問題):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034"> 

在大型生產環境中,其他任何工作都不會發生,其中數百萬份舊版css文件可能位於各種中間或瀏覽器緩存中。某些客戶端忽略緩存控制標題,並且您不希望緩存被顛覆,至少在生產中不會。

在開發中,您可以按Ctrl + Shift + J(Chrome)並關閉緩存。

相關問題