Question

答案可能是“这取决于”，但问题永远不会伤害。

基本上，我有几个逻辑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请求与切换页面时缓存的好处是否更好有共识？

我忽略了另一种解决方案吗？

Answer 1

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

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

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

Answer 2

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

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

Answer 3

一般情况下，每页只需要一个CSS文件，您也可以在整个网站上将其设置为全局，以便可以缓存它。

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

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

我真的建议阅读John Rauser的TCP and the Lower Bound of Web Performance

整合CSS / JS与单独页面上的冲突

3 个答案: