使用緩存刷新頁面

Question

我正在嘗試刷新頁面，但想要使用緩存並且無法弄清楚如何執行此操作。 有兩種情況：

• 如果我單擊 URL 欄並按回車鍵（或從其他地方訪問頁面），它將從緩存中重新加載頁面/圖像。 偉大的！

• 如果我單擊刷新按鈕或使用 Javascript 刷新頁面，它會再次抓取所有圖像並永久保存。 不是很好！

我試過： top.location.reload(false); 和top.location.reload(true); （我是從 iFrame 中發送的）並且都沒有使用緩存。 我避免使用location ，因此它不會兩次出現在瀏覽器歷史記錄中。

問題：如何使用緩存的圖像重新加載頁面？ 是否有不同的 javascript function 或者這是一個 mod_expires 問題？

提前感謝您的幫助！

編輯：（來自 chrome 的信息：開發者工具）

• 導航到頁面時，我得到所有圖像的“來自緩存”
• 刷新頁面時，我得到所有圖像的“304 - 未修改”（並且下載每個圖像都需要時間）

編輯 2：（來自圖像的標題，safari：開發人員工具）

Javascript：top.location.reload（假）； （沒有緩存！）

Status Code:304 Not Modified

Request Headers
Cache-Control:max-age=0
If-Modified-Since:Tue, 28 Jun 2011 07:13:17 GMT
If-None-Match:"104684ae-a7d-66e41d40"
Referer:http://getdirectus.com/dev/media.php
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
Cache-Control:max-age=157680000
Connection:Keep-Alive
Date:Tue, 28 Jun 2011 16:56:50 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:56:50 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.0.54

導航到頁面：（使用緩存）

Status Code:200 OK

Response Headers**
Accept-Ranges:bytes
Cache-Control:max-age=157680000
Connection:Keep-Alive
Content-Length:2685
Content-Type:image/jpeg
Date:Tue, 28 Jun 2011 16:54:20 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:54:20 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Tue, 28 Jun 2011 07:13:17 GMT
Server:Apache/2.0.54

Answer 1

window.location.reload( false );的文檔； 說它將從緩存中加載。 如果這沒有發生，那么您可能會看到瀏覽器錯誤。 看看您是否可以在另一個瀏覽器中復制該問題。

編輯（供您編輯）：您看到這種行為是因為您將來沒有設置 Expires header。 您需要在 Apache 中添加 Expires header 。

Answer 2

window.location.href = window.location.href;

如果位置包含# ，請務必在設置href之前將其刪除。

Answer 3

您的第二個請求是通過手動刷新頁面發起的。 當你這樣做時，瀏覽器會發送一個額外的cache-control:max-age=0 header 請求。 這就是 304（未修改）的來源。

如果您在站點內導航（使用鏈接），瀏覽器將繼續使用其緩存。

Answer 4

如果您想在客戶端啟用緩存，請注意發送Expire標頭，例如使用mod_expires

Answer 5

使用這個站點，我只得到了帶有location.refresh(true);的綠色圖像。 . 使用location.refresh(); 或location.refresh(false); 我得到了紅色的圖像。 工作正常，我猜。

Answer 6

這里有兩件不同的事情需要考慮：

1：請求...瀏覽器->服務器

2：響應...服務器 -> 瀏覽器

當您刷新頁面時，您無法繞過瀏覽器向服務器請求頁面資產。

您可以做的是確保服務器發送的響應最少。

實現這一點的最佳方法是在響應標頭中使用etags 。 這樣，瀏覽器將向服務器發送一個if-none-match請求，並在沒有修改任何內容的情況下返回304 Nothing changed響應。