了解缓存？

Question

昨天,我们家里没有电,因此没有互联网.所以我假设我无法在本地使用我的网络应用程序,因为在"index.html"结束时我有:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
        window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>

然而,情况并非如此,它会顺利进行.所以我猜想浏览器记得它上次下载这些js文件.

当我重新加载我的wep-app时,它将无法加载js文件,因为没有Internet连接.这种行为会一次又一次地发生.

在这两种情况下都无法下载:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">

但这不是一个严重的错误.请注意,CSS的叽叽喳喳的自举在我的项目文件是在本地,这就是为什么它是无关紧要的.

我想知道为什么,有什么想法吗？

我在MacBook Pro El Capitan中使用chrome版本52.0.2743.116(64位).

---

我的:浏览器使用了js文件的缓存版本,但即使在Normal Reload上,它也会尝试重新下载它们.

Answer 1

某些外部文件没有在 HTTP 标头中设置远期到期日期。

你会注意到，当我加载带有谷歌字体的页面时，这是响应头：

谷歌字体API

Access-Control-Allow-Origin: *
Cache-Control: private, max-age=86400
Content-Encoding: gzip
Content-Type: text/css; charset=utf-8
Date: Sat, 10 Sep 2016 04:55:29 GMT
Expires: Sat, 10 Sep 2016 04:55:29 GMT
Link: <http://fonts.gstatic.com>; rel=preconnect; crossorigin
Server: ESF
Timing-Allow-Origin: *
Transfer-Encoding: chunked
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

您会注意到，Google 提供的这种字体具有即时过期功能。（我访问了该文件Sat, 10 Sep 2016 04:55:29 GMT，它同时过期）这可能就是它从未加载的原因。

除此之外 - 老实说，我不确定为什么 JS 文件在页面重新加载后变得不可用。其余文件具有远期到期标头，我自己使用 Firefox 版本 48.0.1 进行了测试，没有出现任何问题。我首先使用您的脚本加载页面，然后选择“离线工作”。无论我按多少次刷新或 F5，浏览器都会继续提供这些文件的缓存版本。也许这是您浏览器的设置，但我不太确定。也许其他人有更多这方面的信息。