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

我一直在阅读很多关于jQuery优化的内容,以及如何改变你的选择器以减少DOM遍历的数量,但我没有听说过通常的缩小过程之外的CSS优化.除了减少字符数和服务器请求之外,有没有什么方法可以优化CSS加载/处理？ 您绝对可以优化选择器的性能.一个关键点是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时记住选择器性能是很好的,但不要让它使样式表的可读性或可维护性降低.在大多数情况下,不值得优化现有样式表,除非您可以识别一些实际上非常慢的选择器.

这里有一些关于这个主题的更好的阅读：

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