类选择器效率为什么比元素选择器高？

Question

CSS的选择器的效率是怎么比较出来的？是根据查找DOM树的时间决定的吗？

---

我可不可以理解为

ID选择器只需遍历DOM树找到唯一ID就可以结束遍历。

而

类选择器要遍历完所有DOM树找出所有对应的class类。

所以

ID选择器效率 > 类选择器效率

---

我的理解中，类选择器和元素选择器都要遍历DOM树。

那么为什么说类选择器效率要高于元素选择器？是不是我对这个效率的理解不对。

谢谢解答。

Answer 1

DOM并不是一颗简单的多叉树，而是会加上各种索引信息。所以很多非层级操作也能获得较高的效率。

层级操作就是在层与层之间执行某些操作，比如查找子元素。非层级操作就是并没有明确的层级关系，因此通常需要遍历整颗树或子树。由于树的特性，层级操作效率很高，而非层级操作在未加索引时由于需要遍历的节点较多，效率并不是很高。

简单来说，DOM会为几种常用属性添加索引，比如id、class，但不会为节点类型（元素名称）添加索引。