在HEAD中使用未缩小的样式或在外部文件中使用缩小的样式是否更具性能？

Question

我喜欢将CSS封装到单独的文件中的想法。这也带来了能够轻松缩小CSS的附加优势。但我知道从服务器中提取这些单独文件所需的开销会对性能产生负面影响。

为了解决后一点，人们经常建议内联样式或者至少将CSS放在html文档的HEAD中。我不打算内联，因为编辑风格变成了一场噩梦。我可以考虑把它放在头脑中以提高性能，但我不想把它放在那里缩小。我无法阅读它，一旦缩小就必须调整CSS会很痛苦。

所以我的问题是，在性能方面，这两者之间有什么更好的选择？

1. 缩小外部CSS文件
2. CSS置于HEAD但未缩小

Answer 1

您在评估中不考虑浏览器端缓存。对于在多页网站中使用相同CSS文件的情况，在外部文件中提供CSS几乎总是更好。这样做的原因是，一旦在第一页访问时下载CSS，假设您已正确设置到期标头，浏览器将不需要在后续页面加载时下载CSS，直到过期TTL通过。这甚至适用于网站上的多个用户会话，这样如果用户在几天/几周后访问网站，他们可能根本不需要下载CSS。如果您提供了页内CSS，则需要在每次加载页面时下载它。

同样，缩小通常不会带来很大的性能提升，因为大多数服务器到浏览器的连接都会对传输的内容执行文本压缩。

当然，正如您所指出的那样，在外部文件中维护CSS通常要容易得多。

Answer 2

最好的选择是：

1. 将它们全部缩小并在服务器端捆绑它们，例如bundles用于Asp.Net或brewer用于nodejs，这样就可以消除上面提到的开销。

Answer 3

扩展我的评论：

通常，在优化网页加载时，您希望最大限度地减少浏览器发出的HTTP请求数量，因为这些请求在时间上是昂贵的;甚至对小文件的请求也要求浏览器将其请求发送到服务器，等待响应，然后相应地采取行动。从这个角度来看，最好的办法是将页面的所有代码放在一个文件中。然而，这将是一个页面维护的噩梦，它也没有考虑浏览器对资源的缓存，如@MikeBrant所述。

单个css文件（可能由几个连接的缩小文件组成）是样式（css）和内容（html）分离以及性能之间的良好折衷。这同样适用于javascript。如果您使用的是像JQuery这样的公共库，您还可以考虑使用Javascript的内容交付网络（CDN），因为用户的浏览器可能已经从访问其他站点缓存了库。 Google的CDN提供了许多有用的库。

通常，通过优化图像，启用服务器压缩以及删除无关的javascript，您将获得远远超过缩小或内联CSS的性能。图像几乎总是页面中“最重”的元素，通常很容易将图像尺寸缩小20-50％并保持良好的质量。