logo标签列表

为什么浏览器不能从缓存加载CDN文件？

htmlcachingbrowser-cachecdnoffline-caching
8
这里有一个非常简单的例子，使用从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中遇到了类似的行为。
我也刚开始研究这个问题，但你是否已经找到了https://dev59.com/cm435IYBdhLWcg3wtCWQ？ - Teepeemm
2
请查看您的系统中是否实际缓存了该文件，以在Chrome浏览器的地址栏中键入“about:cache”进行检查。 - user3091440
2个回答
4
没有必要处理CDN。当浏览器遇到脚本标签时，无论它是托管在CDN上还是在您的服务器上，它都会向服务器请求它。如果浏览器先前加载了它，使用相同的地址，服务器会告诉它是否应该重新加载（发送304 HTTP状态码）。
你可能正在寻找的是将你的应用程序缓存以供离线使用。这可以通过HTML5缓存清单文件实现。您需要创建一个列出所有需要为显式离线使用缓存的文件的文件。
如果两个网站使用相同的CDN地址来获取jquery，它们是否共享缓存资源？还是说这是特定于网站的？想知道我在缓存中有多少份jquery副本。 - gdbj
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接