有条件加载的异步资源的 Modernizr.load 和性能（缓存）答案

【问题标题】：Modernizr.load and performance (cache) for conditionally loaded async resources有条件加载的异步资源的 Modernizr.load 和性能（缓存）
【发布时间】：2012-11-11 01:18:51
【问题描述】：

我在这里阅读了大约十几篇帖子，this one seemed closest，但我并没有完全弄清楚。

我在 HTML5 Boilerplate 上构建，尽管是自定义 Modernizr 构建。我计划使用 yepnope/modernizr.load 功能进行条件加载。

H5BP 中的 .htaccess 删除了 Etags 并添加了过期标头（我猜 Modernizr.load 需要过期标头）。它还设置了“access plus X”的过期时间

这在充分利用缓存以“加速”浏览体验方面有何作用。是否会在每个页面上加载满足条件的每个资源，还是会跳过缓存的内容？

如果仅更改了其中一个组件（我正在加载的资源之一）而我的 Modernizr 版本没有更改怎么办？

发布后我意识到这可能更适合网站管理员论坛（问题中没有实际代码......）但我想我不确定是否会有涉及代码的答案所以现在，我'会让它意识到也许它应该被迁移。抱歉，这种级别的编码和配置对我来说是新的。

谢谢

【问题讨论】：

标签： javascript performance asynchronous modernizr html5boilerplate

【解决方案1】：

每个资源都是独立缓存的。所以，如果你加载一个名为foo.js的javascript文件，这个文件会被缓存一年：https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess#L245

如果您将modernizr 脚本更改为新版本，这不会更改foo.js 的缓存结束日期，该日期将保持不变。

为了破坏缓存，您需要更改文件名（例如：foo-v1234123.js）、路径或添加查询字符串（foo.js?v=1）。如果您对foo.js 进行更改，则只需将此版本号加一即可强制浏览器重新下载文件并重新缓存。

如果您正在开发一个简单的网站并且没有大型项目，则使用查询字符串手动执行此操作可能是更简单的解决方案。否则，我建议通过 git 或类似的方式挂钩版本号 - 但为了您的理智，这需要自动化。

希望有帮助！

【讨论】：

我知道来自样板文档的缓存破坏和版本更新（感谢您指向资源，也许其他人不会）...我只是不明白如何缓存资源将与告诉他们加载的 JS 交互。是的，出于您提到的原因，弄清楚如何自动化版本控制是当务之急。谢谢。
好吧，您的 JS 代码实际上不知道浏览器缓存状态。浏览器缓存一个 URL 并在请求某个 URL 时直接提供文件，而无需往返服务器；但总而言之，您的 javascript 不会知道文件是从缓存中还是从域中提供的。如果这不是您要问的，那么我认为误解了您的问题。
关于自动版本控制，这个问题有一些答案：stackoverflow.com/questions/12876479/… 我认为 grunt/yeoman 正在寻找包含在他们工具带中的解决方案。