HTML - 如何檢查文件（.js或.css）是否已從緩存中加載或拾取？

Question

首先，我需要一種強制瀏覽器始終加載.css和.js文件的方法。 我通過在文件中添加一個sufix來解決它：

之前：

<script type="text/javascript" src="file.js"></script>

后：

<script type="text/javascript" src="file.js?v=1"></script>

這顯然有效。

現在，我需要知道這是否真的有效。 當然，我可以編輯文件並檢查瀏覽器中的更改，但我需要一種更具體的方法，例如瀏覽器中顯示“從緩存加載的文件”/“從文件夾加載的新文件”中的選項。

你能幫助我嗎？

Answer 1

在Chromium / Chrome瀏覽器中打開開發人員工具（alt + cmd / ctrl + I，或右鍵單擊窗口並點擊檢查元素），然后單擊網絡選項卡，它是大小和狀態屬性，告訴您資產是否來自來自瀏覽器緩存，以及是否向服務器發出請求以檢查資產是否過時。

人們可能將304誤認為是瀏覽器緩存中的理想選擇的原因是，如果您通過刷新發送請求來檢查響應，則瀏覽器會添加一個強制檢查服務器的標頭。

因此，如果資產/資源保存在您的瀏覽器中，您將始終檢查服務器是否過時，從而獲得304。

如果您事先打開開發人員工具，那么只需單擊地址欄並按回車鍵，而不是刷新，您應該獲得狀態： 200 OK大小:( 來自緩存） 。

如果由於任何原因您沒有看到具有大小的列，請右鍵單擊該窗口並從屬性列表中選擇它。

**注意：如果您在同一瀏覽器會話期間刷新，則較新版本的Chrome看起來不再發送強制重新驗證標頭。 相反，你會看到200：來自內存緩存。

Answer 2

從服務器加載資源或從緩存中獲取資源是瀏覽器責任區。 從客戶端代碼中，您無法確定實際使用的源（如果您不使用ajax動態加載資源）。 只有您可以查看開發人員工具（或Firebug）中的“網絡”選項卡。