除了减少字符数之外，优化CSS还有更多的事情吗? [英] Is there more to optimizing CSS than minimizing character count?
问题描述
我已经阅读了很多有关jQuery优化以及如何更改选择器以减少DOM遍历量的信息，但是在通常的缩小过程之外，我对CSS优化的了解还很少.除了减少字符数和服务器请求之外，还有什么方法可以优化CSS加载/处理?
I've been reading a lot about jQuery optimization and how you can alter your selectors to cut down on the amount of DOM traversal, but I haven't heard much about CSS optimization outside of the usual minifying process. Is there any way to optimize your CSS loading/processing outside of just reducing character count and server requests?
推荐答案
您绝对可以优化选择器以提高性能.一个关键点是CSS解析器从右到左读取选择器，而javascript选择器引擎(如jQuery等)从左到右读取它们.但是，基本上，基本原则是相同的-您希望选择器的每一部分都尽可能地匹配元素，以减少为了确定匹配而必须搜索的DOM节点.
You can definitely optimise your selectors for performance. One key point is that CSS parsers read selectors right to left, whereas javascript selector engines (like jQuery etc) read them left to right. Basically though, the general principles are the same - you want each piece of the selector to match as few elements as possible, to cut down on the DOM nodes that have to be searched in order to determine a match.
这意味着，就像javascript一样，在CSS中选择单个裸ID是获取元素的最快方法.选择所有内容*或选择基于属性([href*=foo])的速度最慢.
That means, just like javascript, selecting a single, bare id in CSS is the fastest way you can get to an element. Selecting everything *, or selecting based on attributes ([href*=foo]) are among the slowest.
阅读顺序在优化jQuery选择器和CSS选择器之间造成了区别:您不能通过以ID开头来提高速度.例如，如果您编写:
The reading order creates a difference between optimising jQuery selectors and CSS selectors: you don't gain speed by starting with an ID. For example, if you write:
#mainContent ul li
在jQuery中，您首先要找到ID为mainContent的元素，该元素非常快，然后再挖掘其子元素.
In jQuery, you are starting by finding the element with the ID mainContent, which is very fast, then digging through it's children.
但是，在CSS中，您从所有li元素开始，然后查看它们是否具有ul祖先，然后检查它们是否在#mainContent内部.慢得多.
In CSS, though, you are starting with all li elements, then looking to see if they have a ul ancestor, then checking if they're inside #mainContent. Much slower.
可能的速度提高
但是，您还应该知道CSS解析比JavaScript DOM遍历快得多，因此，即使您确实有很多复杂的慢速"选择器，也不太可能看到CSS的性能大幅提高.优化它们.这是一篇有关性能提升的好文章: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/-作者指出，通过创建一个巨大的，复杂的样式表和文档(6000个DOM元素和2000个CSS规则).对于更正常"的页面，您的收益因此可能会少于20毫秒-可能不值得.
You should also know, however, that CSS parsing is much, much faster than javascript DOM traversal - so even when you do have lots of complex, 'slow' selectors, you're unlikely to see a huge gain in performance by optimising them. Here's a good article on the increases in performance: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ - the author points out that he could increase rendering time by about 20ms by creating a huge, complex stylesheet and document (6000 DOM elements, and 2000 CSS rules). For a more 'normal' page, your gains would therefore likely be less than 20ms - probably not worth the effort.
我的观点是，在编写CSS时最好牢记选择器的性能，但不要让它使样式表的可读性或可维护性降低.在大多数情况下，不值得优化现有样式表，除非您可以确定某些选择器的速度确实过慢.
My view is that it's good to keep selector performance in mind while you're writing CSS, but don't let it make your stylesheets less readable or maintainable. In the majority of cases, it's not worth optimising an existing stylesheet, unless you can identify some selector that is really unnecessarily slow.
以下是关于该主题的一些好读物:
Here is some more good reading on the subject:
- http://css-tricks.com/6386-ficiently-rendering-css /
- http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
- http://css-tricks.com/6386-efficiently-rendering-css/
- http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
这篇关于除了减少字符数之外，优化CSS还有更多的事情吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
