css - 两条 CSS 规则中较快的一条 : with/without multiple IDs specified

Question

所以我最近一直在用 Concrete5 做很多工作。然而，我注意到默认主题有许多 CSS 规则，它们的定义如下:

#page #central #sidebar p{line-height:24px}

因为“侧边栏”是一个 ID，因此整个页面上应该只有一个“侧边栏”(假设它通过验证，我正在注意它确实如此)。因此，如果 #sidebar 在 #page #central 中，它应该总是在#page #central 中。无论。在每一页上。

按照这个逻辑，下面的规则做完全相同的事情:

#sidebar p{line-height:24px}

测试了一下，果然成功了。所以我的问题是 - 哪个性能更好？ Concrete5 团队采用更长的规范是否有与速度相关的原因，或者仅仅是为了帮助 future 的开发人员找到 #sidebar div？在任何一种情况下，我都可以看到它更快的论据。

如果情况 1 更快(#page #central #sidebar):

如果浏览器使用广度优先搜索算法来定位正确的 DOM 元素，那么查找 #sidebar 将涉及搜索第二层的 EVERY DOM 元素children 在它到达第三层之前，此时它在找到 #sidebar 之前仍然有几个元素。通过以这种方式指定元素，广度优先搜索将识别 #page 并知道它只需要在该元素内继续搜索，而不是继续搜索整个 DOM。

如果情况 2 更快(#sidebar):

如果浏览器按照文档的写入顺序搜索整个文档，而不是将 DOM 视为一棵树，那么它将执行一次线性搜索而不是三次线性搜索。事实上，即使在最好的情况下，它足够聪明，可以识别先前找到的 DOM 元素的起点和终点(本质上是深度优先搜索)，它仍然需要读取与线性搜索 - 首先它会读取直到找到 #page，然后它会从 #page 的开头开始读取直到找到 #center，然后它会从 #center 的开头开始读取，直到找到 #sidebar。唯一的区别就是从一种搜索切换到另一种搜索所涉及的开销很小

Answer 1

简短的故事:你使用的东西越多，解析的速度就越慢。

ID 始终是唯一的，因此您应该只使用一个；但即使使用类，指定任何其他元素或标准也总是会变慢。

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

那篇文章更深入地探讨了您要问的问题。