为什么 HTML5 缓存清单中列出的静态资源会被下载两次？答案

【问题标题】：Why the static resources listed in HTML5 cache manifest are downloaded twice?为什么 HTML5 缓存清单中列出的静态资源会被下载两次？
【发布时间】：2013-09-06 03:25:53
【问题描述】：

我在缓存清单的显式缓存部分中列出了 HTML 引用的静态资源（CSS 和 javascript 文件），就像现代移动 Web 应用程序通常所做的那样。但是令人惊讶的是在chrome中发现这些静态资源在没有任何本地缓存的情况下第一次访问web应用程序被下载了两次，因为缓存是用来最小化带宽的。我认为它们被下载两次的原因是它们在缓存清单和 HTML 中被引用。

如果在两个地方都引用了资源，为什么浏览器不共享资源？是符合 HTML5 标准还是 chrome 有 bug？

【问题讨论】：

您在静态资源上设置了哪些过期标头？
@robertc 除了Expires 标头外没有其他设置。
好的，你把它设置成什么？
@robertc 设置为未来一周。

标签： html web-applications mobile html5-appcache

【解决方案1】：

在使用缓存清单时，我几乎在所有浏览器（Chrome、IE 和 Firefox）中都看到了这种行为。据我所知，资源确实被下载了两次，因为它们在缓存清单和 html/css 中都被引用。初始加载用于加载页面本身，第二次加载用于加载应用缓存。

现在，即使需要执行第二个请求来加载 appcache，也应该从常规浏览器缓存中提供资源，因为原始请求可能会将其加载到浏览器缓存中。但是，所有浏览器似乎都以不同于常规浏览活动的方式处理 appcache 加载并绕过缓存。

就 HTML5 规范而言，规范建议浏览器可以实现一种机制来使用现有下载，但它是可选的：

从设置了同步标志和手动重定向标志的 URL 清单 URL 的来源获取资源。如果这是升级尝试，则使用缓存组中最新的应用程序缓存作为 HTTP 缓存，并尊重与该缓存相关的 HTTP 缓存语义（例如过期、ETag 等）。用户代理也可能有其他缓存也受到尊重。

如果有问题的资源已经因为其他原因被下载，那么现有的下载过程有时可以用于此步骤，由获取算法定义。

可能已经被下载的资源的一个示例是第一次看到网页上的大图像。图像将被下载以满足页面上的 img 元素，并在缓存清单中列出。根据取图规则，该图只需要下载一次，既可以用于缓存，也可以用于渲染网页。

source

【讨论】：