CSS性能优化

Question

通常我建站时，会将所有CSS放入一个文件中，并一次性定义与一组元素相关的所有属性。就像这样：

#myElement {
    color: #fff;
    background-color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 14pt;
}

.myClass {
    font-size: 12pt;
    padding: 5px;
    color: #ee3;
}

我一直在考虑将我的定义分成多个文件（如colours.css、layout.css、fonts.css等），因为我看到有人建议这样做。就像这样：

/* colours.css */
#myElement {
    color: #fff;
    background-color: #000;
    border-color: #ccc;
}
.myClass {
    color: #ee3;
}

/* layout.css */
#myElement {
    padding: 10px;
    border: 1px solid;
}
.myClass {
    padding: 5px;
}

/* fonts.css */
#myElement {
    font-size: 14pt;
}
.myClass {
    font-size: 12pt;
}

为了减少HTTP请求，我将在发布之前合并文件并删除空格，所以这不是问题，但我的问题是：重复使用所有这些选择器会导致浏览器性能问题吗？

或者，是否有任何工具可以通过合并不同文件的定义来避免（潜在的）问题？ 即：将在我的第二个示例中给出的输入（3个不同的文件）组合成一个文件，就像第一个示例一样。

- nickf

Answer 1

浏览器将不得不查找所有定义，然后将它们相加，并根据最新的定义覆盖不同的属性。因此，会有一些轻微的开销。

话虽如此，即使在五年前的硬件上也不会很明显，而且现今的浏览器在这方面相当高效。

- William

Answer 2

我无法评论性能，但我在我的网站上尝试了这种方法，最终还是回到了一个大文件。

我的原因：

• 我厌倦了在三四个不同的文件中为div.foo创建规则，并且如果我想更改该div，则需要打开三四个文件。
• 有时分离函数并不像应该的那样容易。要在IE中使div居中，您可能必须将父元素的文本居中，即使这不是标准方式。现在我的布局与我的字体混合在一起。
• 随着代码的增长，我找到事物的最简单方法是搜索我想要的元素。但是我必须打开几个文件才能查看所有规则，也许这个元素在这个文件中没有规则，所以我找不到匹配项。

所以我回到了使用main.css和iehacks.css的方式。然后松了一口气。

- Nathan Long

---

谢谢您的见解。在开始做某事之前听到这些经验故事总是很有帮助的。 - nickf

Answer 3

正如William所说，浏览器解析CSS时不会出现任何问题。但是，您可能会遇到一个问题，即客户端可以向单个主机打开的HTTP请求数量。通常默认为两个。因此，如果您将CSS放在多个文件中，则可能希望将它们放在单独的子域中，这将被视为不同的主机，从而允许HTML页面与CSS文件同时加载。

- anon

---

正如我所说，我会在推出之前将它们合并成一个文件。 - nickf

Answer 4

渲染/解析速度不应该有任何明显的差异。正如其他人所说，计算机足够快，可以相当快地渲染CSS。

你的问题实际上在于加载页面所需的请求数量。额外的网络请求会增加页面加载时的开销。加载一个大文件比加载几个小文件要快得多。这对客户端（浏览器）和提供所有CSS文件的服务器都有影响。

只要在生产中合并文件，你就应该没问题了。

Yahoo's YUI Compressor是一个将CSS文件压缩为较小文件的相当不错的工具。我上次检查时，它不能定义（至少我上次看它时是这样），但真的没有必要担心会有足够的性能损失。

- Dan