<LINK rel=SUBRESOURCE href="file"> 不缓存，尽管有正确的缓存头。似乎下载了两次，响应为 200OK
Posted
技术标签:
【中文标题】<LINK rel=SUBRESOURCE href="file"> 不缓存，尽管有正确的缓存头。似乎下载了两次，响应为 200OK【英文标题】：<LINK rel=SUBRESOURCE href="file"> doesn't cache, despite having correct cache headers. Appears to download twice with a 200OK response 【发布时间】：2014-07-22 22:16:57 【问题描述】：我在我的网站上使用 Glyphicons，它们是 Bootstrap 3 的一部分。在查看开发控制台的“网络”选项卡时，我意识到它们加载较晚（当浏览器的解析器到达时），并且有空间通过将该元素更快地引入浏览器来提高性能。
在 Chrome 中，可以通过以下方式执行此操作：
<link rel="subresource" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff">
在文档的<HEAD>中。
我看到 DOMContentLoaded 时间增加的方式表明该文件加载了两次（首先在屏幕截图的第 5 行，然后在第 2 行到最后一行）。我的怀疑进一步证实了它通过 HTTP 响应代码 (200) 加载了两次，这告诉我它两次都来自远程服务器，而不是从缓存中获取。
您可以在此处查看开发控制台的外观： http://oi60.tinypic.com/2t9n7.jpg （如果 tinypic 出现故障，它在我的 Dropbox 中：https://www.dropbox.com/s/vlwgywatg9rsg8v/subresourcenotcached.png）
该资产的 HTTP 版本上的缓存标头是，但值得注意的是，对于 HTTP 和 HTTPS，开发控制台上的网络选项卡输出看起来相同。
HTTP/1.1·200·OK(CR)(LF)
Server:·cloudflare-nginx(CR)(LF)
Date:·Mon,·02·Jun·2014·17:49:06·GMT(CR)(LF)
Content-Type:·application/octet-stream(CR)(LF)
Content-Length:·23320(CR)(LF)
Connection:·close(CR)(LF)
Last-Modified:·Thu,·13·Feb·2014·22:45:07·GMT(CR)(LF)
Expires:·Sat,·23·May·2015·17:49:06·GMT(CR)(LF)
Cache-Control:·public,·max-age=30672000(CR)(LF)
Access-Control-Allow-Origin:·*(CR)(LF)
CF-Cache-Status:·HIT(CR)(LF)
Accept-Ranges:·bytes(CR)(LF)
CF-RAY:·13457c53f04d0378-LAX(CR)(LF)
(CR)(LF)
是否有人了解我如何让这个 .woff 文件缓存并正确利用 Chrome 中的 LINK SUBRESOURCE 功能？
【问题讨论】：
如果您查看“initiator”列，似乎第一个实例来自解析器（那将是您的<link rel="subresource"...>），然后第二个实例来自脚本。我认为 Bootstrap 本身正在提出这个请求，尽管我不能确切地说出在哪里。
没错。我首先通过 LINK SUBRESOURCE 调用该文件，希望它被缓存。 bootstrap.min.css 引用该文件，并且当在浏览器中绘制 DOM 并且遇到需要显示该 .woff 文件内容的 SPAN 时，正常过程是此时请求 .woff 文件。它应该使用 304 的 HTTP 状态（文件未更改）进行获取，而不是使用 200 OK 成功消息执行新的 HTTP 请求（并重新下载）...
【参考方案1】：
这是当前 Chrome 中的一个错误。看看https://code.google.com/p/chromium/issues/detail?id=312327
【讨论】：
以上是关于<LINK rel=SUBRESOURCE href="file"> 不缓存，尽管有正确的缓存头。似乎下载了两次，响应为 200OK的主要内容，如果未能解决你的问题，请参考以下文章
<link rel=preload> 必须有一个有效的 `as` 值
<link rel="preload" 的 `type` 值不受支持（字体预加载）
如何将 <link rel=preload> 应用于@font-face？