js / css的分离及其对缓存的影响答案

【问题标题】：separation of js / css and it's effect on cachingjs / css的分离及其对缓存的影响
【发布时间】：2011-11-28 21:01:30
【问题描述】：

假设我有以下设置：

Page1.html

Page2.html

有人告诉我，合并两个 js 和额外的 css 文件会更好地进行缓存？但是单独的文件不会也被缓存吗？我看不出这有什么不同（除了可维护性之外——我个人喜欢这种分离）。

组织这样的事情最高效和最明智的方式是什么？

免责声明:: 微优化不是这里的问题 - 我想在开始我的项目之前知道最佳实践是什么，这样我以后就不必重新讨论了。

【问题讨论】：

【解决方案1】：

好处是：

如果用户访问 Page1，然后是 Page2，他们的浏览器会获取：

Page1.html
-> master.css
-> page1.css
-> page1.js

然后，过了一段时间：

Page2.html
-> [ no need to re-fetch cached items ]

如果 page1.css page2.css 和 page1.js page2.js 基本相似，那么（最坏的情况）可以节省两次 DNS 查找和两次 HTTP 协商，这可能是相当慢。

至少，您可能不必为 page2.css 和 page2.js 两次“收听”大约 1KiB 的传入 HTTP 标头。（尽管所有主要浏览器都可能将这些请求链接在一起。）

【讨论】：

何时需要分离？说 page1.js 是 2kb 而 page2.js 是 60kb？这是不是一成不变的，而更像是一种对你有用的东西？？
..." “排除常见的东西”可能是一般规则。既然你有一个 master.css，我会假设（希望？）page1.css 和 page2.css 是实际上很短...？在这种情况下，我建议将它们直接嵌入到 HTML 中（如果它们非常短）或将它们放入 master.css 中（如果它们不相互冲突）；同样，对于JavaScript…
其他要做的事情是确保正确设置缓存标头，以便浏览器避免在第 2 页上使用 'if-modified-since' 获取组件

【解决方案2】：

这里有几件事需要考虑：

附注：如果您担心服务器端组织，您可以在开发时将文件分开，并将文件合并为一个作为构建的一部分。

【讨论】：

我（作为一般经验法则）在投入生产之前确实已经将我的 css 和 js '编译/合并' - 我想我主要关心的不是两页示例，而是 30 页示例（非常大的应用程序） - 单个文件大小可能很小，但集体可能会变得很重。但就像我提到的那样，这是一个特定情况 - 通常结合选择文件并继续前进？
小补充：根据我的经验，js 和 css 资源之间通常存在差异——尤其是在开发相当丰富的客户端时：我的 Javascript 代码往往是特定于页面的，而我的 css 更可重用（查看object oriented css)。
CSS 只是为了补充问题 - 我没有遇到任何我需要它的项目（小的特定 css 可以保留在全局文件中）。其中的 JS 部分是我主要关心的问题。我正在实现 MVC/P，我的视图由 javascript 大量操作，每个视图都将具有截然不同的特性和功能。我现在正处于设计阶段，我正在尝试尽可能多地考虑可重用的功能。
归结起来，如果合并的文件很大，我想我会将文件分开（我第一次访问您的网站时必须加载约 1MB 的 js 不会留下正面印象），它可以分成更小的（可缓存的）文件，在您的子页面上“按需”加载。
您可以想到的另一种策略是“作弊”，方法是在其他轻量级页面上预加载资源，例如用户在启动应用程序之前可能会访问的登录页面。这将填满缓存，从而加快应用加载速度。