CSS优化，嵌套选择器和ID /类名的浏览器索引

在渲染网页和应用样式时，浏览器是否索引ID和类的名称以进行高效搜索，或者每次浏览ID时是否从顶部遍历整个DOM或类名称被指定到达正确的元素。CSS优化，嵌套选择器和ID /类名的浏览器索引

我想知道优化的原因，以及是否值得让浏览器提示（更长的选择器）到某个ID的对象所在的位置。即

#container #one-of-many-container-siblings #my-id

代替：

#my-id

请问前者产生更好的性能，如果DOM是相当大的？

来源

2011-05-27 Michael Waterfall

它实际上与你所想的相反。

请记住，浏览器从右到左解析CSS选择器。

此：

#container #one-of-many-container-siblings #my-id

将采取更多措施，以配合比这

#my-id

参见：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

考虑你刚刚问的问题，我建议你阅读本文章：

http://css-tricks.com/efficiently-rendering-css/

它会帮助你编写更高效的选择：

#main-navigation { }  /* ID (Fastest) */ 
body.home #page-wrap { } /* ID */ 
.main-navigation { }  /* Class */ 
ul li a.current { }  /* Class * 
ul { }     /* Tag */ 
ul li a { }    /* Tag */ 
* { }      /* Universal (Slowest) */ 
#content [title='home']  /* Universal */

来源

2011-05-27 17:09:35 thirtydot

我明白了，非常有趣。我感觉浏览器分析样式表然后应用每种样式，即遇到一个选择器，找到它匹配的元素，应用样式属性，转到下一个选择器。然而，它看起来好像实际上是通过HTML文档的，并且对于每个元素它都会经历所有的CSS规则并找出哪个适用。因此，从左到右的读取对于排除而不是包含进行更好。 – 2011-05-29 08:45:39

非常感谢这些信息 - 非常有用！在提出问题之前，我进行了一次快速搜索，并且我努力寻找关于（幕后）浏览器如何处理和呈现这些文档的详细信息。很高兴知道这些事情是如何工作的！ – 2011-05-29 08:54:33

使用较短的版本总是会更快，因为执行的检查较少，但是我不知道为什么需要优化页面上的CSS。

来源

2011-05-27 17:07:48

效率可能是大型网站/应用程序的一个因素。看看他的答案中提供的“thirtydot”链接：http：//css-tricks.com/efficiently-rendering-css/ – 2011-05-29 08:59:05

最好使用2个或更少的选择器作为性能的经验法则。

来源

2011-05-27 17:07:50 m4tt1mus

在HTML/CSS的ID的定义是一个元素的单个实例。假设你遵循该规则，那么你所需要的就是该元素的ID。浏览器将搜索并找到该元素并停止。

随着你的“暗示”，它将首先搜索第一个项目，然后是第二个，然后是第三个，然后停下来。正如你可能看到的，这样做效率更低。

在处理类时，可能会变得更加模糊和模糊，但一般规则是选择器越少越好。如果你发现自己在做三到四个或五个选择器，那么可能需要考虑一些重构，比如在战略位置添加类或ID，或者甚至不用CSS选择器。

来源

2011-05-27 17:12:27 Shauna

CSS优化，嵌套选择器和ID /类名的浏览器索引

回答

相关问题