Chrome DevTools "disable cache":除了什么都没有(对于服务工作者脚本),它实际上做了什么?
Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)?
我正在尝试在本地磁盘缓存为空的假设下测试我的站点的行为。我知道每次都有清除缓存和执行 Ctrl-F5 等的方法,但是网络选项卡中还有一个 "Disable Cache" 复选框,看起来像 should 做我要做什么...即禁用缓存。
但是,当我清除缓存、启用该选项并 F5 重新加载我的站点几次时,我看到的是:
尽管已启用 "disable cache",资源已被缓存,并且正在从缓存中提供!那么这个选项到底有什么作用呢?
编辑
也许我看到的这种行为只与服务工作者脚本的缓存有关?如果您将 this page (an example linked from this guide 加载到服务人员),至少对我而言,即使启用了 "disable cache",也会从磁盘缓存中获取 sw.js
文件。
除了禁用缓存选项外,您现在可以在开发人员工具的网络窗格中右键单击并从弹出菜单中选择 "Clear Cache"。
另外,如果需要经常清缓存,可以使用这个插件:
https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap
有趣的问题!
在您提供的屏幕截图中,名称 列被截断了,因此我无法判断仍在从磁盘缓存中提供哪些资源。根据您 "EDIT".
中的描述,我假设它是一个服务工作者脚本
那么我要回答的问题是"how does the browser cache service worker (SW) scripts?"
- 注册 SW 后,浏览器会将 SW 脚本存储在磁盘缓存中的单独数据库中。我将其称为 SW 数据库,但请注意,这不是官方术语。请注意,如果 service worker 调用
importScripts()
,那些脚本也会存储在 SW 数据库中。另请注意,当服务工作者脚本更新时,浏览器会用新脚本覆盖 SW 数据库中当前存储的脚本。这是 Chrome implementation,其他浏览器可能会有所不同。 1
- 每次加载页面时,浏览器都会发出一个不可见的请求(即您在 DevTools 中看不到)以查看服务工作脚本是否有任何更新。 IMO,DevTools 应该公开此请求,以便开发人员更好地了解 SW 生命周期。
- 如果脚本的一个字节不同,则浏览器更新 SW 数据库中的 SW 脚本。
- 如果 SW 脚本没有改变,浏览器只提供来自 SW 数据库的脚本。 这 是您在 DevTools 中看到的请求。在我看来,DevTools 将此请求描述为
(from disk cache)
是一种误导。理想情况下,它应该有其他名称以表明此缓存不受 Disable Cache 复选框的影响。
因此,在这种情况下,您是对的:禁用缓存 复选框没有任何作用。如果你想确保你的缓存被完全清除(包括 service worker 的东西):
- 转到 Clear Storage pane,确保所有复选框都已启用,然后单击 清除站点数据。
当 DevTools 仍然打开时,长按 Chrome 的 Reload 按钮,然后 select 清空缓存和硬重新加载。有关这些不同选项的说明,请参阅 。
1 我从 Alex Russell 那里得到了这些信息,他是 Chrome 工程师和 Service Worker 规范的合著者
我正在尝试在本地磁盘缓存为空的假设下测试我的站点的行为。我知道每次都有清除缓存和执行 Ctrl-F5 等的方法,但是网络选项卡中还有一个 "Disable Cache" 复选框,看起来像 should 做我要做什么...即禁用缓存。
但是,当我清除缓存、启用该选项并 F5 重新加载我的站点几次时,我看到的是:
尽管已启用 "disable cache",资源已被缓存,并且正在从缓存中提供!那么这个选项到底有什么作用呢?
编辑
也许我看到的这种行为只与服务工作者脚本的缓存有关?如果您将 this page (an example linked from this guide 加载到服务人员),至少对我而言,即使启用了 "disable cache",也会从磁盘缓存中获取 sw.js
文件。
除了禁用缓存选项外,您现在可以在开发人员工具的网络窗格中右键单击并从弹出菜单中选择 "Clear Cache"。
另外,如果需要经常清缓存,可以使用这个插件: https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap
有趣的问题!
在您提供的屏幕截图中,名称 列被截断了,因此我无法判断仍在从磁盘缓存中提供哪些资源。根据您 "EDIT".
中的描述,我假设它是一个服务工作者脚本那么我要回答的问题是"how does the browser cache service worker (SW) scripts?"
- 注册 SW 后,浏览器会将 SW 脚本存储在磁盘缓存中的单独数据库中。我将其称为 SW 数据库,但请注意,这不是官方术语。请注意,如果 service worker 调用
importScripts()
,那些脚本也会存储在 SW 数据库中。另请注意,当服务工作者脚本更新时,浏览器会用新脚本覆盖 SW 数据库中当前存储的脚本。这是 Chrome implementation,其他浏览器可能会有所不同。 1 - 每次加载页面时,浏览器都会发出一个不可见的请求(即您在 DevTools 中看不到)以查看服务工作脚本是否有任何更新。 IMO,DevTools 应该公开此请求,以便开发人员更好地了解 SW 生命周期。
- 如果脚本的一个字节不同,则浏览器更新 SW 数据库中的 SW 脚本。
- 如果 SW 脚本没有改变,浏览器只提供来自 SW 数据库的脚本。 这 是您在 DevTools 中看到的请求。在我看来,DevTools 将此请求描述为
(from disk cache)
是一种误导。理想情况下,它应该有其他名称以表明此缓存不受 Disable Cache 复选框的影响。
因此,在这种情况下,您是对的:禁用缓存 复选框没有任何作用。如果你想确保你的缓存被完全清除(包括 service worker 的东西):
- 转到 Clear Storage pane,确保所有复选框都已启用,然后单击 清除站点数据。
当 DevTools 仍然打开时,长按 Chrome 的 Reload 按钮,然后 select 清空缓存和硬重新加载。有关这些不同选项的说明,请参阅 。
1 我从 Alex Russell 那里得到了这些信息,他是 Chrome 工程师和 Service Worker 规范的合著者