Ray*_*Ray 3 css optimization traversal
我一直在阅读很多关于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时记住选择器性能是很好的,但不要让它使样式表的可读性或可维护性降低.在大多数情况下,不值得优化现有样式表,除非您可以识别一些实际上非常慢的选择器.
这里有一些关于这个主题的更好的阅读: