Chrome DevTools“禁用緩存”：除了什么之外它實際上做了什么（對於服務工作者腳本）？

Question

我試圖在假設本地磁盤緩存為空的情況下測試我的網站的行為。 我知道每次都有清除緩存和執行Ctrl-F5等的方法，但是在“網絡”選項卡中還有一個“禁用緩存”復選框，似乎應該執行我之后的操作...即禁用緩存。

但是，當我清除緩存時，啟用該選項，並且F5重新加載我的網站幾次，這就是我所看到的：

盡管已啟用“禁用緩存”，但資源已緩存，並且正在從緩存中提供服務！ 那么這個選項實際上做了什么？

編輯

也許我看到的這種行為只與緩存服務工作者腳本有關？ 如果您加載此頁面 （從本指南鏈接到服務工作者的示例），至少對我來說，即使啟用了“禁用緩存”，也會從磁盤緩存中獲取sw.js文件。

Answer 1

有趣的問題！

在您提供的屏幕截圖中， Name列被截斷，因此我無法分辨仍在從磁盤緩存提供的資源。 我會假設它是一個服務工作者腳本，基於“編輯”中的描述。

那么我要回答的問題是“瀏覽器如何緩存服務工作者（SW）腳本？”

1. 當SW被注冊時，瀏覽器將SW腳本存儲在磁盤高速緩存中的單獨數據庫中。 我將這稱為SW數據庫 ，但請注意這不是一個官方術語。 請注意，如果服務工作者調用importScripts() ，那么這些腳本也會存儲在SW數據庫中。 另請注意，當服務工作者腳本更新時，瀏覽器會使用新腳本覆蓋SW數據庫中當前存儲的腳本。 這是Chrome實施 ，其他瀏覽器可能采用不同的方式。 ¹
2. 每次加載頁面時，瀏覽器都會發出一個不可見的請求（即您無法在DevTools中看到這一點），以查看服務工作者腳本是否有任何更新。 IMO，DevTools應公開此請求，以便開發人員更好地了解SW生命周期。
   • 如果腳本的一個字節不同，則瀏覽器更新SW數據庫中的SW腳本。
   • 如果SW腳本未更改，則瀏覽器僅從SW數據庫提供腳本。 這是您在DevTools中看到的請求。 IMO誤導DevTools將此請求描述為(from disk cache) 。 理想情況下，它應該有一些其他名稱，以指示此緩存不受“ 禁用緩存”復選框的影響。

因此，在這種情況下，您是對的： 禁用緩存復選框不執行任何操作。 如果要確保完全清除緩存（包括服務工作者的東西）：

1. 轉到“ 清除存儲”窗格 ，確保已啟用所有復選框，然后單擊“ 清除站點數據” 。

2. 當DevTools仍處於打開狀態時，長按Chrome的重新加載按鈕，然后選擇Empty Cache and Hard Reload 。 有關這些不同選項的說明，請參閱https://stackoverflow.com/a/14969509/1669860 。

   

¹我從Chrome工程師Alex Russell那里得到了這個信息，並且是服務工作者規范的合着者

Answer 2

除了禁用緩存選項之外，在開發人員工具的網絡窗格中，您現在可以右鍵單擊並從彈出菜單中選擇“清除緩存”。

此外，如果您需要經常清除緩存，則可以使用此插件： https ： //chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap