Question

这是一个非常简单的例子来说明我使用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>

当您使用互联网连接加载此页面时，该页面会显示“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获得了类似的行为。

Answer 1

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

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

Answer 2

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

Mozilla提供的信息：

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

建议使用服务工作者而不是缓存清单。

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

2 个答案: