1

这个问题的答案可能是“视情况而定”，但问它永远不会有坏处。

基本上，我有几个逻辑 css/js 文件（everything, index, user）。我无法将所有 CSS 合并到一个文件中，因为一些单独的页面共享样式规则并覆盖其中的一些组件。例如

/* everything.css */
body {
   /* lots of important rules here */
}

/* index.css */
body {
   background-color: blue;
}

/* user.css */
body {
   background-color: red;
}

如您所见，由于这些冲突，我无法将所有 CSS 合并到一个文件中。这更适用于 JavaScript。

我的问题是：将每个页面的 CSS/JS 合并到一个文件中以减少请求数量是否更好，或者这是否超过了缓存单个文件以访问其他页面的好处。

everything.css相当大，但是一旦您访问index或user，它将被缓存，因此如果您访问另一个，则不必再次加载。 另一方面，将其分开会导致额外的请求。

对于每个页面有一个 CSS/JS 请求与切换页面时缓存的好处是否更好，是否有共识？

还有其他我忽略的解决方案吗？

4

3 回答 3

1

一般情况下，您只希望每页只有一个 CSS 文件，您也可以将其设置为跨站点全局，以便可以对其进行缓存。

浏览器在开始渲染页面之前需要 CSS，并且初始 TCP 连接将受到启动缓慢和其他连接开销的影响（尽管现代浏览器会推测性地打开 TCP 连接以尝试克服其中的一些问题）

慢启动意味着将 CSS 作为两个文件检索可能比将其作为一个更大的文件检索要慢，而且它会释放连接以开始接收其他内容。

我真的会推荐阅读 John Rauser 的TCP 和 Web 性能的下限

于 2012-05-31T20:16:57.600 回答
1

正如您所说，这取决于 - 如果您没有太多要链接的 css 和 javascript 文件，那么您实际上可以从拥有多个文件中看到一些性能优势。虽然每个文件都会产生一个单独的请求，但这些请求是由大多数浏览器并行完成的，这通常会为客户端带来轻微的性能提升（当然，由于额外的请求，服务器会受到更多的影响，但实际上这应该可以忽略不计）。

如果您正在查看每页 2 个 css 文件 - 1 个用于您的站点范围样式，1 个用于您的页面特定文件，我不会担心将它们组合成 1 个。但是，如果您有大约 20 个 css 文件，那么也许您应该将它们结合起来。

此外，您显然应该缩小您的 css 文件并在您的 Web 服务器上启用 gzip/deflate 压缩。

于 2012-05-21T15:14:28.460 回答
1

对于 JavaScript，我会说，总是将其连接并缩小到一个文件中。唯一的例外是带宽很重要（移动）。如果你有冲突，你可能没有正确组织你的 JavaScript。在学习 JavaScript 设计模式中有一个很好的介绍如何在 JavaScript 中使用命名空间和模块。

对于 CSS，这取决于。我总是尝试将核心样式框架保持在一起，然后根据需要加载自定义样式。像Less这样的工具可以使这变得容易得多。

于 2012-05-21T15:16:43.807 回答