更快的两个CSS规则：有/没有指定多个ID

所以我最近在Concrete5上做了很多工作。我注意到，不过，默认的主题已经被像这样定义许多 CSS规则：更快的两个CSS规则：有/没有指定多个ID

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

由于“侧边栏”是一个ID应该只有一个整页的“侧边栏”（假设它验证，我正在照顾它）。因此，如果#sidebar在#page #central中，它应该总是在#page #central。无论。在每一页上。

通过这样的逻辑，以下规则不完全一样的事情：

#sidebar p{line-height:24px}

测试这一点，果然，它的工作。所以我的问题是 - 哪个会有更好的表现？有没有速度相关的原因，Concrete5团队采用更长的规格，还是仅仅是为了帮助未来的开发者找到#sidebar div？无论哪种情况，我都可以看到它的速度更快。

如果壳体1更快（#page #central #sidebar）：

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

如果壳体2是更快（#sidebar）：

如果浏览器搜索的顺序整个文档它的写入，而不是处理DOM就像一棵树，那么这将是执行单个线性搜索，而不是三个线性搜索。事实上，即使在最好的情况下，它足够聪明，可以识别先前找到的DOM元素的开始点和结束点（基本上是深度优先搜索），但它仍然需要读取尽可能多的代码行一个线性搜索 - 首先它会读取，直到找到#page，那么它将开始从#page开始读取，直到它找到#center，然后它会从#center开始读取，直到找到#sidebar。唯一的区别就是从一个搜索切换到另一个搜索时涉及的微量开销

来源

2011-01-24 stevendesu

小故事：你使用的任何东西越多，解析速度就越慢。

ID总是唯一的，所以你应该只使用一个;但即使是类，指定任何其他元素或标准总是会变得更慢。

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

这篇文章远远更深入到究竟你是问什么。

来源

2011-01-24 05:32:21 scragz

抛开性能问题，这些并不总是翻译成相同的东西。

#header { 
    background: blue; 
} 

#home #header { 
    background: red; 
}

这是一个完全有效的级联使用，使一个页面看起来不同于另一个。我始终使用此模式，通常是因为我将class或id指定给我的body元素，作为CSS和JavaScript的钩子。

来源

2011-01-24 05:26:26 alex

我确实意识到这一点，但我并未打算删除特殊格式所需的任何元素。例如，`#page #central＃main`和#page＃central.leftSidebar＃main`这两行分别替换为`＃main`和`.leftSidebar＃main`。这样我使用最少数量的规格，同时仍然保持格式。 – stevendesu 2011-01-24 13:24:05

我不知道性能，我也不关心，但把多个ID选择在一起肯定是从只使用一个ID选择意味着不同的，而且我敢肯定人们并不链选择一样，出于性能的原因比什么都重要。

#page #central #sidebar p

这仅发现p在#sidebar如果#sidebar是在#central其内部#page。因此，不会发现这些#sidebar S：

<body> 
    <div id="sidebar"></div> 
</body> 

<body> 
    <div id="page"> 
     <div id="sidebar"></div> 
    </div> 
</body> 

<body> 
    <div id="central"> 
     <div id="sidebar"></div> 
    </div> 
</body>

同样，不知道性能，但当然，浏览器就到这里做更多的工作，因为它必须检查DOM层次结构中的每个元素，因为它从右到左解析这个选择器。这是一个真正的原因;如果您的CSS只是在#page #central中发现了样式#sidebar，那么浏览器必须在尝试应用样式之前执行这些检查。

#sidebar p

此发现p在#sidebar，无论在DOM#sidebar可以位于其中。

而且，也许我误解你的问题，但对于这样的：

由于“侧边栏”是一个ID应该只有一个整页的“侧边栏”（假设它验证，这是我”小心照顾它）。因此，如果#sidebar在#page #central中，它应该总是在#page #central。无论。在每一页上。

不，并不总是如此。您可以将#sidebar放置在任何地方，只是具有全部三个ID的选择器只会在 当中生效，并且它生活在#page #central中。满足您的假设的唯一方法是确保您的标记的结构是这样的。你的样式不能也不会知道你的标记，特别是如果它被用来在一个站点上设置多个页面的风格。这样说，如果你可以确保你的标记总是包含#page #central #sidebar在那个结构中，那么单独选择#sidebar没有问题。我的观点是，不同的选择器意味着不同的事情，并且出于性能原因你不会选择其中之一 - 更常见的是，它不是那样。

来源

2011-01-24 05:26:59 BoltClock

我的想法ID必须是唯一的。 – Starx 2011-01-24 05:40:30

@Starx：您倾向于使用样式表来设置网站中多个页面的样式;不是每个页面都将具有完全相同的结构或ID'd元素;例如在主页中，`body`可能有一个类或ID为`home`。这就是多个班级/ ID选择器派上用场的地方。 – BoltClock 2011-01-24 05:42:04

我的坏...我没有注意到单独的身体标签：D – Starx 2011-01-24 06:58:51

AFAIK没有可行的方法来测试浏览器的CSS匹配算法的速度，以及#page #central #sidebar和#sidebar之间的区别就速度而言是如此微不足道以至于不值得担心。

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

有时候值得在选择器中添加一个额外的id/class /元素，以确保样式不会被后面级联中的简单选择器错误覆盖。

#page #central #sidebar p具有3-0-1的特异性，而#sidebar p具有1-0-1的特异性，这意味着#page #central #sidebar p将优先。

另外，你提到：

...如果#sidebar是#page #central，它应该永远是#page #central。无论。在每一页上。

这是非常不是这种情况，并且了解原因很重要。仅仅因为id是唯一的，并不意味着它必须遵循每个页面上的相同页面结构的确切。例如：一个受欢迎的内容管理系统（Drupal）允许开发者指定在不同页面的不同区域上放置块的规则。我可能希望#search-block位于主页上的#header，然后是所有其他页面中的#sidebar。使用更具体的选择器将允许我根据它的父容器是什么给#search-block不同的样式。

来源

2011-01-24 05:32:05 zzzzBov

更快的两个CSS规则：有/没有指定多个ID

回答

相关问题