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

Question

我正在尝试使用脚本缓存将脚本存储在 localStorage 中。在本例中，我正在尝试 Basket.js，它是由 Addy Osmani 和其他人创建的。对于它适用的情况来说，性能非常棒，但问题是它没有像我预期的那样工作，但说实话，也许它正在工作，但我不理解脚本缓存背后的基本原理。那么让我描述一下我如何使用它:

首先，我设置标记:

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

然后，我将所有脚本包含在以下 block 中:

<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) 服务。