Chrome DevTools“禁用缓存”：除了什么之外它实际上做了什么（对于服务工作者脚本）？

Question

我正在尝试在假设本地磁盘缓存为空的情况下测试我的网站的行为。我知道每次都有清除缓存和执行Ctrl-F5等的方法，但是在“网络”选项卡中还有一个“禁用缓存”复选框，似乎应做我所做的事情之后......即禁用缓存。

但是，当我清除缓存时，启用该选项，并且F5重新加载我的网站几次，这就是我所看到的：

尽管已启用“禁用缓存”，但资源已缓存，并且正在从缓存中提供服务！那么这个选项实际上做了什么？

修改

也许我看到的这种行为只与缓存服务工作者脚本有关？如果您加载this page（从this guide链接到服务工作者的示例），至少对我来说，即使启用了“禁用缓存”，也会从磁盘缓存中获取sw.js文件。

Answer 1

有趣的问题！

在您提供的屏幕截图中，名称列已被截断，因此我无法确定仍在从磁盘缓存提供的资源。我假设它是一个服务工作者脚本，基于您的编辑＆＃34;中的描述。

我回答的问题是＆＃34;浏览器如何缓存服务工作者（SW）脚本？＆＃34;

1. 当SW注册时，浏览器将SW脚本存储在磁盘缓存中的单独数据库中。我将此称为 SW数据库，但请注意，这不是一个官方用语。请注意，如果服务工作者调用importScripts()，那么这些脚本也会存储在SW数据库中。另请注意，当服务工作者脚本更新时，浏览器会使用新脚本覆盖SW数据库中当前存储的脚本。这是Chrome implementation，其他浏览器也可能采用不同的方式。 ¹
2. 每次加载页面时，浏览器都会发出一个不可见的请求（即您无法在DevTools中看到这一点），以查看服务工作者脚本是否有任何更新。 IMO，DevTools应公开此请求，以便开发人员更好地了解SW生命周期。
   • 如果脚本的一个字节不同，则浏览器会更新SW数据库中的SW脚本。
   • 如果SW脚本没有更改，浏览器只会从SW数据库中提供脚本。 此是您在DevTools中看到的请求。 IMO误导DevTools将此请求描述为(from disk cache)。理想情况下，它应该有一些其他名称，表示此缓存不受禁用缓存复选框的影响。

因此，在这种情况下，您是对的：禁用缓存复选框不执行任何操作。如果要确保完全清除缓存（包括服务工作者）：

1. 转到Clear Storage pane，确保已启用所有复选框，然后点击清除网站数据。

2. 当DevTools仍处于打开状态时，请长按Chrome的重新加载按钮，然后选择清空缓存和硬重新加载。有关这些不同选项的说明，请参阅https://stackoverflow.com/a/14969509/1669860。

   

¹ 我从Chrome工程师Alex Russell那里得到了这个信息，并且是服务工作者规范的合着者

Answer 2

除了禁用缓存选项之外，在开发人员工具的网络窗格中，您现在可以右键单击并选择＆＃34; Clear Cache＆＃34;从弹出菜单中。

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