強制瀏覽器在更新後重新載入css

當我更新服務器上的css文件時，許多客戶端瀏覽器將繼續使用舊的緩存css文件加載頁面一段時間。強制瀏覽器在更新後重新載入css

在搜索了很多帖子並將不同想法放在一起後，我想出了最簡單，最便宜的方法。

凡有任何CSS文件被鏈接，追加href與文件的最後修改日期的時間，像這樣：

<link rel="stylesheet" type="text/css" href="main.css?t=<?=filemtime('main.css')?>" />

我使用CakePHP的，所以我在佈局文件做是這樣的：

<? $t = filemtime(CSS . 'main.css'); ?> 
    <?=$html->css("schedule.css?t={$t}") ?>

所以鏈接的css文件對最終的額外的標籤，但它保持不變，只要文件沒有被修改。這意味着瀏覽器可以像往常一樣緩存它。然而，一旦文件被修改，鏈接將改變，並且瀏覽器不會錯過節拍。

仍然使用這種方法，對於使用某些沒有意圖的東西，感覺有點髒。對於正在發送的「消息」是沒有用的，因爲消息的內容很重要，而不是識別它的存在。

這裏是我的問題：

是否可以承認有客戶看到修改後的HTML與瀏覽器緩存過時的樣式表（或JavaScript爲此事）的風險？
這是一個黑客或合法的解決方案？
有沒有更好的解決方案？

來源

2012-04-16 Jason Galuten

對於第二個問題：不，它不是。事實上，它更像是成爲一種慣例（如果還沒有的話）。 – 2012-04-16 01:10:12

對於支持它的設備，您可以在清單文件上創建和管理時間（請參閱教程：http：//www.html5rocks.com/en/tutorials/appcache/beginner/）。附加的時間戳被廣泛使用，然而，可能是一個更好的解決方案。 – rjz 2012-04-16 01:11:50

我不認爲你的方法有任何問題。更常見的是，這被稱爲緩存清除或緩存失效。

但是，由於您使用的網址如：http://site.com/assets/mystyle.css?29320202020，因此CDN可能存在問題。 CDN會看到GET參數，並認爲它是一個動態請求，所以它會向你的服務器請求文件，這違背了在CDN中有一個緩存副本的目的。

爲什麼我要做的是將緩存清除參數包含在我的文件名中：http://site.com/assets/mystyle.2390202202.css。我使用優秀的Assetic library來做到這一點，並且只寫了一些簡單的代碼，以便我的模板知道它需要mystyle.css和mystyle.2390202202.css由Assetic實時生成並插入到模板中。

這種方法應該能讓你在處理CDN時很好地緩存清除功能。

其他可能的解決方案：

的ETag：瀏覽器將發送到與ETag的服務器發送一個請求（可鑫卡特作爲文件的哈希），而服務器將響應如果文件沒有改變，則沒有修改的標題響應。下行：仍然需要HTTP請求。
設置expires標題：服務器會告訴瀏覽器該文件將在特定日期到期，如果該日期還沒有，瀏覽器將不會向服務器請求副本並使用其本地緩存複製。缺點：如果服務器上的文件在日期之前發生變化，瀏覽器的用戶將需要手動進行硬刷新。

這就是爲什麼我寧願只使用一個緩存無效參數：我可以設置expires頭的文件，以在5年內到期。瀏覽器不應該爲該文件發出http請求，除非我更新文件並更改緩存清除參數。

來源

2012-04-16 01:16:17 F21

+1表示「緩存清除」。這有助於搜索谷歌。查詢字符串是否會導致瀏覽器每次下載文件？我會做一些測試。我很猶豫是否接受這個答案，因爲我仍然認爲應該有一種更好的方式來告訴瀏覽器該文件的新版本比使用php框架來重命名它更新。 – 2012-04-16 19:07:25

用其他可能的解決方案更新了我的答案，但我認爲緩存清除可能是最好/最有效的。 :) – F21 2012-04-16 23:27:05

CakePHP有一個非常簡單的解決方案。只是取消註釋這一行：

//Configure::write('Asset.timestamp', true);

從core.php

根據該文件，這將

應用時間戳與最後修改時間靜態資產（JS，0CSS，圖像）。將添加包含時間的querystring參數該文件已被修改。這對於使瀏覽器緩存失效很有用。

這是非常簡單的工作，並且大部分時間都可以工作，但它不是萬無一失的。大多數代理不會使用「？」來緩存資源在URL中，所以如果你想解決這些情況，你應該實現一個更復雜的解決方案，就像phpdev所建議的那樣。

來源

2012-05-15 22:10:06 lurkit

哇，謝謝。很高興知道關於蛋糕！ – 2012-05-16 15:00:30

強制瀏覽器在更新後重新載入css

回答

相關問題