最高效的CSS选择器：标题标签，类或ID？ [英] The Most Efficient CSS Selector: Header Tag, Class or ID?

问题描述

由于我们在HTML5中有新的元素（HEADER，FOOTER，SECTION ...），我们应该如何构造CSS选择器以提高性能？

  header {} 
 header nav {} 
 header nav ul li {} 
  

或

  #header {} 
 #header .nav {} 
 #header .nav .menu {} 
  

还是以其他更高效的方式？

解决方案

影响页面的加载时间，那么您应该通过标记名称坚持类和ID。 Google有一个最佳做法网页用于编写快速CSS，您可能发现有趣。他们的建议的要点是减少浏览器排序的元素数量。

页面上最相关的一点是，在标签选择器上的类和ID选择器。稍后我们会看到，当这些类和ID选择器减少匹配元素的数量时，这只会提高效率。

在我开始之前，让我们从这个页面的建议的总和到它的逻辑结论。我们应该发现，编写CSS的最有效的方法是通过对页面上的所有内容应用ID，并且只使用ID选择器。但你应该这样做吗？可能不是。

编写CSS时，还有其他因素需要考虑。以下是一些：

1. 很可能您的网页上还有其他东西需要花费比处理CSS更长的时间你的选择器是多么低效。


2. 您希望保留您的网页 semantic ，这绝对是


3. 保持这样的结构将是一种痛苦。


4. 这将是美学上不愉快的HTML

我从中得出的都是遵循效率的最佳实践，只要你不牺牲太多的上述点，特别是第一和第二。

对于你的具体例子，最简单的答案是底部选择器将更有效率，如果他们减少匹配项目的数量。 / p>

一个接一个地浏览它们：

c>与 #header

如果页面上有多个标题元素，ID将始终更高效。如果只有一个标题，那么它们应该同样快。

header nav 与 #header .nav

Google最佳做法页面告诉我们，后代选择器是CSS中效率最低的选择器。

这是因为CSS从右到左读。一旦找到最右边的后代，它需要通过DOM树返回，以确定其父对象是否匹配。它必须为每个匹配这样做。

当选择器失败匹配时，选择器停止解释。因此，如果它正在寻找一个导航并运行一个ul，它不会去DOM树寻找该ul的标头父。这不应该给我们太多的惊喜，但我只是想我会提到它的完整性。

这些点在一起，导致我们得出的结论，大多数选择器在使用后代选择器时尽可能具体。这使得不匹配的元素的数量最大化，因此最小化慢速DOM树搜索的数量。

回到你的示例中的两个选择器：如果你有多个头，在其中有多个导航，但只有少数他们有类 .nav ，那么右边会更有效率。
如果您只有一个标题的ID为header，一个nav的ID为nav，那么它们同样很快。

header nav ul li 与 #header .nav .menu

相同的规则从前适用于这种情况。然而，在这种情况下，速度的差异由于这里有两个后代选择器而不是只有一个而被放大。

如果您的页面有多个无序列表，那么您可能想要使用这两个选择器中的第二个，以防止您的网页上的每个 li 匹配此（更复杂）的选择器。

As we have new elements in HTML5 (HEADER,FOOTER,SECTION...), how should we structure our CSS selectors to improve performance?

header {}
header nav {}
header nav ul li{}

OR

#header {}
#header .nav{}
#header .nav .menu{}

Or in some other, more efficient way?

解决方案

If by 'efficiency' you mean how it affects the load time of the page, then you should stick to classes and IDs over tag names. Google has a best practices page for writing speedy CSS that you might find interesting. The gist of their advice is to reduce how many elements the browser has to sort through.

The most pertinent point on the page is, again, to "prefer class and ID selectors over tag selectors." As we'll see in a minute, this really only improves efficiency when those class and ID selectors reduce the number of matched elements.

Before I get to that, though, let's take the sum of the advice from that page to its logical conclusion. We should find that the most efficient way to write CSS is by applying an ID to everything on your page and only use ID selectors. But should you do this? Probably not.

The reason why is that there are other factors to consider when writing CSS. Here are a few:

1. It is likely that there are other things on your page that take much longer than the processing of CSS, no matter how inefficient your selector is. If you're spending time on optimization, it might be better spent elsewhere.
2. You want to keep your webpage semantic, which definitely does not mean giving everything on your page an ID.
3. It would be a pain to maintain such a structure
4. It would be aesthetically unpleasing HTML

What I draw from all of this is to follow the best practices for efficiency so long as you don't sacrifice too many of the above points, especially the first and second.

For your specific examples, the simplest answer is that the bottom selectors will be more efficient if they reduce the number of matched items.

Going through them one-by-one:

header vs. #header

The ID will always be more efficient if there are multiple header elements on your page. If there is just one header, then they should be equally speedy.

header nav vs. #header .nav

The Google best practices page tells us that the descendant selectors are the most inefficient selectors in CSS.

This is because CSS reads right to left. Once it finds the right-most descendant, it needs to work its way back through the DOM tree to determine if any of its parents match. And it has to do this for every match.

It happens that selector stops interpreting when it fails to match. So if it's looking for a nav and runs across a ul, it won't go up the DOM tree looking for a header parent of that ul. This shouldn't surprise us too much, but I just thought I'd mention it for completeness.

These points together lead us to the conclusion that you want the right-most piece of a selector to be as specific as possible when using descendant selectors. This maximizes the number of elements that don't match, therefore minimizing the number of slow DOM tree searches.

So back to the two selectors in your example: if you have multiple headers with multiple navs in them, but only a handful of them have the class .nav, then the right will be more efficient. If you have just one header with an ID of header and one nav with an ID of nav, then they will be equally speedy.

header nav ul li vs. #header .nav .menu

The same rules from before apply to this case. In this case, however, the difference in speediness is amplified by the fact that there are two descendant selectors here, rather than just one.

If your page has multiple unordered lists, then you'll probably want to go with the second of those two selectors to prevent every li on your page from matching this (more) complicated selector.

这篇关于最高效的CSS选择器：标题标签，类或ID？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！