使用 Basket.js 进行脚本缓存，我做错了吗？

Question

我正在尝试使用脚本缓存将脚本存储在 localStorage 中。在这种情况下，我正在尝试由 Addy Osmani 和其他人创建的 Basket.js。在使用它的情况下，性能很棒，但问题是它没有像我预期的那样工作，但老实说，也许它正在工作，我不了解脚本缓存背后的基本原理。所以让我描述一下我是如何使用它的：

首先，我设置标记：

<script src="/framework/plugins/base/basket.js"></script>

然后，我将所有脚本都包含在以下块中：

<script>basket.require({url:'/framework/plugins/base/jquery-2.1.1.js',expire:168},{url:'/framework/plugins/base/jquery.ui-1.10.4.js',expire:168},{url:'/framework/plugins/forms/dropzone/dropzone.js',expire:168});</script>

当我加载我的测试页面时，一切正常，除了刷新文档时它确实如此。一旦它被缓存......闪存！它工作得很好，但我的问题是脚本缓存本身。我总是需要刷新文档才能看到它的效果。

老实说，我认为脚本缓存将脚本存储在 localStorage 中并执行它们，因此您可以两全其美。不过，好像不是这样的。

我做错了什么还是任何脚本缓存模型都是这样工作的？总是在第二次运行？

Answer 1

您说“总是必须刷新文档才能看到其效果”是正确的。据我了解，缓存仅在首次加载资源后发生。简单地说，basket.js 会看到 jquery 是必需的，并将其缓存在 localstorage 中。然后使用它从客户端加载脚本，并通过这样做削减对服务器的资源请求，以便在后续加载时使用 jquery。这加快了重复加载时的页面加载时间，从而加快了刷新时的响应时间。

如果最初没有将资源加载到客户端，basket.js 无法将脚本缓存到本地存储。

关于浏览器缓存机制及其实现的基本解释可以在here 找到。

也就是说，如果您希望在初始加载页面时加快资源加载时间，我建议您使用内容交付网络 (CDN) 服务。