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

原文 标签 css performance dom css-selectors

所以我最近一直在用 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将涉及搜索 的第二层每在到达第三层之前有子元素的 DOM 元素,此时它仍然会在找到 #sidebar 之前查看几个元素.通过以这种方式指定元素,广度优先搜索将识别 #page并且知道它只需要在这个元素内继续搜索,而不是继续整个 DOM。

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

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

最佳答案

AFAIK没有可行的方法来测试浏览器CSS匹配算法的速度,以及#page #central #sidebar之间的差异和 #sidebar就速度而言,可以忽略不计,不值得担心。

什么 值得担心的是specificity的区别.

有时值得向选择器添加额外的 id/class/element 以确保样式不会被稍后在级联中的简单选择器错误地覆盖。
#page #central #sidebar p具有 3-0-1 的特异性,而 #sidebar p具有 1-0-1 的特异性,这意味着 #page #central #sidebar p将优先。

此外,您提到:

...if #sidebar is in #page #central, it should always be in #page #central. No matter what. On every page.



事实并非如此,了解原因很重要。只是因为一个 id是唯一的,并不意味着它必须在每个页面上都遵循完全相同的页面结构。

例如:一个流行的内容管理系统(Drupal)允许开发者指定在不同页面的不同区域放置块的规则。我可能想要 #search-block#header在主页上,然后在 #sidebar在所有其他页面中。使用更具体的选择器将允许我给出 #search-block不同的样式取决于它的父容器是什么。

关于css - 两个 CSS 规则中较快的 : with/without multiple IDs specified,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4778898/

相关文章:

javascript - 我是否应该延迟加载DOM中包含大量数据会影响性能?

c# - 枚举评估和整数之间的性能比较

css - Div CSS过渡不会在切换时崩溃

javascript - 如何将导航栏分隔符更改为图标

html - 在悬停时设置较宽的绝对定位元素,但位于相反侧

performance - nodejs http with redis,只有 6000req/s

c - 使用RDTSC访问内存中的ARRAY的C中意外输出

javascript - 实例化多个 Mootools 类的性能开销

javascript - 如何使用DOM更改/添加p标签样式?

html - 试图在同一行上有标题和无序列表