加载 jquery - 防止 CDN 服务器往返答案

【问题标题】：loading jquery - prevent CDN server roundtrip加载 jquery - 防止 CDN 服务器往返
【发布时间】：2016-07-08 18:38:07
【问题描述】：

在重复加载时，查看 chrome 开发工具网络选项卡，我看到 jquery.min.js 的返回状态为“304 Not Modified”，时间/延迟有时长达一秒。

我还可以在 devtools 中看到 jquery 的响应标头是 'Expires:Thu, 31 Dec 2037 23:55:55 GMT' ，但它仍然返回 304

对于我网站的其他文件，例如 cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js ，我看到返回状态为“200 OK”和“（来自缓存）”尺寸过小，并且它们的延迟/时间超短（我猜这意味着 100% 缓存结果，没有远程往返）

我如何告诉浏览器如果 jquery url 存在于缓存中以使用它没有任何远程流量？我需要尽可能快的网站加载时间。

谢谢！

【问题讨论】：

您的两个 JS URL 示例对我来说都按预期工作 - F5'ing 页面将从它们中获得 304，但在没有 F5'ing 的情况下加载页面（通过单击页面链接) 正在从缓存中完全提取这两个文件。你到底是如何测试的？
有趣 - 刷新似乎是导致问题的原因！为什么会这样？
使用 F5 刷新将始终向 Web 服务器请求所有资源 - 即使它们中的大多数会以 304 的形式返回。这是设计使然，是一件好事 - 用户通常不应该手动刷新页面，如果他们这样做了，那么您应该让他们有机会获得更新的资源。我建议通过打开 Fiddler 进行测试（只是为了避免在 Chrome 开发工具中查看缓存响应的噪音），并像普通用户一样行事，看看在普通用户会话期间实际发生了多少 HTTP 流量，看看是否有任何你真正可以调整的东西。
如果您发布答案，我会将其标记为已接受！

【解决方案1】：

使用 F5 刷新将始终向 Web 服务器发出请求以获取所有资源 - 尽管其中大多数将返回为 304。

这是设计使然，是一件好事 - 用户通常不应该手动刷新页面，如果他们这样做了，那么您应该让他们有机会获得更新的资源。

我建议通过打开 Fiddler 进行测试（只是为了避免在 Chrome 开发工具中查看缓存响应的噪音），并像普通用户一样行事，看看在普通用户会话期间实际发生了多少 HTTP 流量，以看看有什么你真的可以调整的。

【讨论】：

【解决方案2】：

当 Chrome 将文件（如您的 jquery.min.js 文件）放入缓存时，它会跟踪服务器上次修改的时间。每当它再次看到该文件时，它会询问服务器它是否已更改，并且您看到的 304 响应表明服务器已确认没有更改并且 Chrome 应该使用缓存的版本。

如果没有这样的检查，您的页面将无法知道位于您提供的 URL 的文件是否已更改。另请参阅此处的答案：How “304 Not Modified” works?。

但是，浏览器并不总是必须进行此项检查。提供的文件也有一个Expires 值，它告诉浏览器在检查是否有更改之前等待多长时间。如果您之前获取的文件没有“过期”，浏览器将直接使用缓存中的文件。

当您看到 200 OK 和 (from cache) 指示符时，表示该文件是直接从缓存中使用的。

见：

【讨论】：

我很困惑。对于我的站点的其他文件，例如 cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js ，我看到“200 OK”和“（来自缓存）”的大小不足，它们的延迟/时间超短。为什么jQuery没有得到同样的效果？
@kofifus 你提的很好，304返回码意味着与CDN有额外的通信。我将编辑我的答案来解决这个问题。
谢谢，我也编辑了我的问题。我的主要观点是 - 有没有办法让我直接从缓存中提供 jQuery 而无需任何远程通信？
@kofifus 最直接的方法是从 CDN（或您可能托管文件的任何地方）使用 Expires 标头提供它，该标头提供了一个很长的未来日期。这在我添加的性能最佳实践链接中进行了讨论。 Service Workers 是相关的，但并非所有浏览器都支持。
好的，那么有没有一个 CDN 会返回 jquery 且永不过期或类似的东西？还是我需要以某种方式向 CDN 询问？