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

Question

在呈现网页和应用样式时，浏览器是索引ID和类名以进行高效搜索，还是每次指定ID或类名以到达正确的元素时都从顶部遍历整个DOM。

出于优化的原因，我想知道是否值得给浏览器提示（更长的选择器）某个ID的对象在哪里

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

而不是：

#my-id

如果DOM相当大，前者会产生更好的性能吗？

Answer 1

它实际上与您的想法相反。

请记住，浏览器从右到左解析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 */

Answer 2

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

对于你的"暗示"项目，它将首先搜索第一个项目，然后搜索第二个项目，再搜索第三个项目，最后停止。正如你可能看到的，这是更低效的。

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

Answer 3

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

Answer 4

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