为什么浏览器不从缓存中加载 cdn 文件？答案

【问题标题】：Why isn't the browser loading cdn file from cache?为什么浏览器不从缓存中加载 cdn 文件？
【发布时间】：2015-06-24 15:15:44
【问题描述】：

这里有一个非常简单的例子来说明我使用 CDN 中的 JQuery 来修改页面的问题：

<html>
  <body>
    <p>Hello Dean!</p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>$("p").html("Hello, Gabe!")</script>
  </body>
</html>

当您通过 Internet 连接加载此页面时，该页面会显示“Hello Gabe”。然后当我关闭互联网连接时，页面显示“Hello Dean”并出现错误——JQuery 不可用。

我的理解是CDN在头部响应中有一个很长的Cache-Control和Expire，我理解这意味着浏览器在本地缓存文件。

$ curl -s -D - https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js | head

HTTP/1.1 200 OK
Server: cloudflare-nginx
Date: Fri, 17 Apr 2015 16:30:33 GMT
Content-Type: application/javascript
Transfer-Encoding: chunked
Connection: keep-alive
Last-Modified: Thu, 18 Dec 2014 17:00:38 GMT
Expires: Wed, 06 Apr 2016 16:30:33 GMT
Cache-Control: public, max-age=30672000

但这似乎没有发生。有人可以解释发生了什么吗？另外——我怎样才能让浏览器在某处的缓存中使用 JQuery 的副本？

之所以提出这个问题，是因为我们希望使用 CDN 来为外部库提供服务，但也希望能够离线开发页面——就像在飞机上一样。

我在使用 Chrome 和 Firefox 时遇到了类似的行为。

【问题讨论】：

我也刚开始研究这个问题，但是你找到stackoverflow.com/q/5264783/2336725了吗？
在地址栏输入“about:cache”查看文件是否实际缓存在系统中。

标签： html caching browser-cache cdn offline-caching

【解决方案1】：

没有什么可以处理 CDN。当浏览器遇到脚本标签时，它会向服务器请求它，无论它是托管在 CDN 上还是在您的服务器上。如果浏览器之前在同一个地址上加载过它，服务器会告诉它是否应该重新加载（发送304 HTTP status code）。

您可能正在寻找的是缓存您的应用程序以供离线使用。 HTML5 cache manifest file 是可能的。您需要创建一个文件，列出所有需要缓存以供显式离线使用的文件

【讨论】：

如果2个站点使用相同的jquery CDN地址，他们共享缓存的资源吗？还是特定于站点？想知道我的缓存中有多少个 jquery 副本。

【解决方案2】：

由于上一个答案建议使用缓存清单文件，我只是想让人们意识到此功能正在从 Web 标准中删除。

Mozilla 提供的信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

建议使用 Service Worker 而不是缓存清单。

【讨论】：