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.有关这些不同选项的说明,请参阅/sf/answers/1047865661/.

   

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