Question

我一直在阅读很多关于jQuery优化的内容，以及如何改变你的选择器以减少DOM遍历的数量，但我没有在通常的缩小过程之外听到很多关于CSS优化的内容。除了减少字符数和服务器请求之外，还有什么方法可以优化CSS加载/处理吗？

Answer 1

您绝对可以优化选择器的性能。一个关键点是CSS解析器从右到左读取选择器，而javascript选择器引擎（如jQuery等）从左到右读取它们。基本上，一般原则是相同的 - 您希望选择器的每个部分尽可能少地匹配，以减少必须搜索的DOM节点以确定匹配。

这意味着，就像javascript一样，在CSS中选择一个简单的id是获得元素的最快方式。选择所有*或基于属性（[href*=foo]）进行选择都是最慢的。

阅读顺序在优化jQuery选择器和CSS选择器之间产生了差异：你不能通过从ID开始获得速度。例如，如果你写：

#mainContent ul li

在jQuery中，你首先要找到ID为mainContent的元素，这个元素非常快，然后挖掘它的子代。

但是，在CSS中，您从所有li元素开始，然后查看它们是否有ul祖先，然后检查它们是否在#mainContent内。慢得多。

速度可能提升

然而，您还应该知道，CSS解析比javascript DOM遍历要快得多 - 所以即使你有很多复杂的“慢”选择器，你也不太可能看到通过优化它们。这是一篇关于性能提升的好文章：http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ - 作者指出，通过创建一个庞大，复杂的样式表和文档（6000个DOM元素和2000个CSS规则），他可以将渲染时间增加大约20ms。对于更“正常”的页面，您的收益因此可能不到20毫秒 - 可能不值得努力。

我的观点是，在编写CSS时要记住选择器性能，但不要让它使样式表的可读性或可维护性降低。在大多数情况下，不值得优化现有的样式表，除非你能识别出一些实际上不必要的慢的选择器。

以下是关于这个主题的一些更好的阅读：

Answer 2

在阅读了人们为回答这个问题而发布的一些资源后，我偶然发现了这个（十一岁）的宝石，这仍然和编写时一样有用：

https://developer.mozilla.org/en/Writing_Efficient_CSS

我在研究中发现的另一个重大问题是，你不应该牺牲干净（可维护）代码或CSS效率的语义最佳实践，因为增益太小了。尽管如此，我仍然希望我的代码尽可能干净有效，而且这里的答案在编写CSS时给了我很多思考。

Answer 3

是的，你可以在选择器匹配效率方面让你的CSS更好。通过使选择器尽可能具体，您可以减少HTML渲染器在DOM中搜索匹配元素所需的工作量。

例如，在您知道要设置样式的所有跨度将是元素中div元素的直接子节点且id为#thing的情况下。它会更快：

#thing > div > span.my-class

大于

#thing span.my-class

因为这会限制选择器必须搜索的元素才能找到匹配项。

Answer 4

如果您有多个样式表，请合并样式表（请记住保持正确的顺序）

您还可以将静态内容托管在不同的服务器上作为您的应用程序（为服务静态内容而优化的http服务器），例如Lighttpd

是否优化CSS优于最小化字符数？

4 个答案: