問題描述
關於 CSS 和瀏覽器的快速問題。我試著搜尋 SO,發現一些類似的帖子,但沒有確定。
我在我的 Web 專案中使用一個或兩個 CSS 檔案。這些在我的網頁的 HEAD 中引用。一旦我打到我的一個頁面,CSS 是否被快取,這樣每個請求都不是 re-downloaded?但願如此。 IE,Firefox 和 Safari 的處理方式有所不同嗎?如果瀏覽器關閉,在開啟新的瀏覽器例項時,首次訪問時是否重新整理 CSS?
最佳解決方案
您的檔案可能會被快取 – 但它取決於…
不同的瀏覽器具有稍微不同的行為 – 最明顯的是處理從伺服器發出的模糊/有限的快取頭。如果你發出一個清晰的訊號,瀏覽器就會服從,幾乎所有的時間。
目前最大的差異是在不同的 Web 伺服器和應用伺服器的預設快取配置中。
一些 (例如 Apache) 可能會使用 HTTP 標頭提供已知的靜態檔案型別,鼓勵瀏覽器對其進行快取,而其他伺服器可能會在每個響應中傳送 no-cache 命令 – 無論檔案型別如何。
…
所以,首先,看一些優秀的 HTTP caching tutorials 在那裡。 HTTP Caching & Cache-Busting for Content Publishers 是我真正的開眼界:-)
下一步安裝和解決 Firebug 和 Live HTTP Headers add-on,以找出您的伺服器實際傳送的頭。
然後閱讀您的 Web 伺服器檔案,以瞭解如何調整他們完美 (或者說你的系統管理員為你做) 。
…
關於瀏覽器重新啟動時會發生什麼,這取決於瀏覽器和使用者配置。
作為經驗法則,希望瀏覽器在每次重新啟動後更有可能與伺服器簽入,以檢視是否有任何更改 (請參閱 If-Last-Modified 和 If-None-Match) 。
如果正確配置伺服器,則應該能夠返回一個 super-short 304 Not Modified(花費很少的頻寬),之後瀏覽器會正常使用快取。
次佳解決方案
到你的問題的第一部分 – 是的,瀏覽器快取 css 檔案 (如果瀏覽器的配置沒有停用) 。許多瀏覽器具有組合鍵以重新載入沒有快取的頁面。如果您對 css 進行了更改,並希望使用者立即檢視它們,而不是等待下次瀏覽器重新載入檔案而不進行快取時,您可以透過向 URL 新增一些引數來更改 CSS irir 的服務方式,如下所示:
/style.css?modified=20012009
第三種解決方案
它確實取決於傳送與 CSS 檔案的 HTTP 標頭作為以前的答案狀態 – 只要你沒有附加任何快取有效的東西到 href 。例如
<link href="/stylesheets/mycss.css?some_var_to_bust_cache=24312345" rel="stylesheet" type="text/css" />
預設情況下,一些框架 (例如 rails) 將它們放入。
但是,如果您收到類似 firebug 或 fiddler 的內容,您可以在每個請求中看到您的瀏覽器正在下載什麼 – 這對於找出您的瀏覽器正在做什麼尤其有用,而不僅僅是它應該做什麼。
所有瀏覽器都應該以相同的方式遵循快取標頭,除非配置為忽略它們 (但必定是異常)
第四種方案
可能值得注意的是,IE 不會使用 @import 方法快取由其他 css 檔案呼叫的 css 檔案。所以,例如,如果你的 html 頁面連結到”master.css”,它透過 @import 拉入”reset.css”,那麼 reset.css 不會被 IE 快取。
參考文獻
注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。