除了最小化字符数之外，还有更多优化CSS的方法吗？

Question

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

Answer 1

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

这意味着，就像javascript一样，在CSS中选择一个单独的空id是访问元素的最快方法。Selecting everything *或selecting based attributes ([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。对于一个更“正常”的页面，你的收益可能会少于20ms --可能不值得你花这么大的力气。

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

下面是一些关于这个主题的更好的读物：

• http://css-tricks.com/6386-efficiently-rendering-css/
• http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 2

在阅读了人们发布的一些回答这个问题的资源后，我偶然发现了这个(11年前的)珍品，它仍然像它写的时候一样有帮助：

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

我在研究中发现的另一个重要问题是，您不应该牺牲干净(可维护)的代码或语义最佳实践来提高CSS效率，因为收益太小了。尽管如此，我仍然希望我的代码尽可能干净和高效，并且这里的答案给了我在编写CSS时需要考虑的很多东西。

Answer 3

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

例如，如果您知道所有想要设置样式的跨度都是id为#thing的元素中div元素的直接子元素。这样做会更快：

#thing > div > span.my-class

比

#thing span.my-class

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