最有效的CSS选择器：标题标签、类或ID？

Question

最有效的CSS选择器：标题标签、类或ID？

3

随着HTML5出现了新的元素，例如HEADER、FOOTER和SECTION等，我们应该如何构建CSS选择器以提高性能呢？

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

或者

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

还可以用其他更有效率的方式吗？

- GajendraSinghParihar

CSS 意为层叠样式表，这意味着您可以尽可能地重用它来应用于其他标记，因此这取决于您的网站/应用程序... - Toping

假设我在页面中只使用一次头文件，那么使用 header 还是 #header 没有区别，对吧？ - GajendraSinghParihar

1

请投反对票的人留下评论？ - GajendraSinghParihar

浏览器会更快地找到类，但在您的情况下，“更快”可能是无法察觉的。 - Toping

我绝对不同意关闭这个问题。它怎么不是建设性的？ - Andre Figueiredo

2个回答

0

这取决于它们将如何使用。如果它们只需要被样式化一次，那么使用header {}，否则添加类和/或ID。

- user1929705

你从一个假设出发，认为导航栏中只会有一个li或ul元素，这并不完全正确。 - Toping

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jamesplease · Accepted Answer

如果“效率”指的是如何影响页面加载时间，那么你应该使用类和ID选择器而不是标签名。Google有一篇关于编写快速CSS的最佳实践页面，可能会让你感兴趣。他们的建议要点是减少浏览器需要排序的元素数量。

该页面上最重要的建议是，“优先使用类和ID选择器而非标签选择器。”但我们稍后将看到，只有当这些类和ID选择器减少匹配元素数时，才能真正提高效率。

然而，在我讨论这个问题之前，让我们把该页面的建议总结一下。我们应该发现，编写CSS的最有效方式是在页面上的所有内容中应用一个ID，并且仅使用ID选择器。但是你应该这样做吗？可能不应该。

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

1. 无论您的选择器多么低效，您的页面上可能有其他比处理CSS更耗时的东西。如果你花时间进行优化，最好把它花在其他地方。 2. 您希望保持您的网页语义，这绝对不意味着在页面上的所有内容都添加ID。 3. 维护这样的结构将是很麻烦的。 4. 这将导致HTML不美观。

我从所有这些中得出的结论是，遵循效率的最佳实践，只要你不牺牲太多以上提到的因素，特别是第一和第二个。

对于您的特定示例，最简单的答案是底部选择器如果减少匹配项的数量，则更高效。

逐个进行如下说明：

vs. #header 如果页面上有多个标题元素，则ID将始终更有效。如果只有一个标题，则它们应该同样快速。

vs. #header.nav

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

这是因为CSS从右到左读取。一旦找到最右侧的后代，它需要通过DOM树向后工作以确定其任何父项是否匹配。并且需要为每个匹配项执行此操作。

当选择器无法匹配时，解释就停止了。因此，如果正在查找nav并运行到ul，则它不会上溯DOM树以查找该ul的header父项。这不应让我们感到惊讶，但我只是想提及一下以保持完整性。

这些要点共同表明，使用后代选择器时，您希望选择器的最右侧部分尽可能具体。这最大化了不匹配的元素数量，从而最小化了缓慢的DOM树搜索次数。

所以回到您示例中的两个选择器：如果您有多个标题和多个导航，并且只有少数具有类 .nav，那么右侧选择器将更有效率。如果您只有一个带有ID为header的标题和一个带有ID为nav的导航，则它们的速度相同。 header nav ul li vs. #header .nav .menu 此案例适用于前面提到的相同规则。然而，在这种情况下，速度的差异被两个后代选择器放大，而不仅仅是一个。

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