最高效的CSS选择器：标题标签，类或ID？

Question

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

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

或

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

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

Answer 1

如果'效率'表示它如何影响页面的加载时间，那么你应该坚持使用标签名称上的类和ID。谷歌有一个best practices page来编写你可能感兴趣的快速CSS。他们建议的要点是减少浏览器要排序的元素数量。

页面上最相关的一点是“更喜欢标签选择器上的类和ID选择器。”正如我们将在一分钟内看到的那样，这真的只会提高这些课程的效率和ID选择器减少匹配元素的数量。

在我谈到这一点之前，让我们将该页面的建议总和纳入其逻辑结论。我们应该发现编写CSS的最有效方法是将ID应用于页面上的所有内容，并仅使用ID选择器。但是你应该这样做吗？可能不是。

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

1. 无论您的选择器效率如何，您页面上的其他内容可能比CSS的处理时间长得多。如果您花时间进行优化，可能最好在其他地方使用。
2. 您希望保留自己的网页semantic，这绝不意味着为您的网页上的所有内容提供ID。
3. 维持这样的结构会很痛苦
4. 这将是美学上令人不快的HTML

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

对于您的具体示例，最简单的答案是，如果底部选择器减少了匹配项的数量，它们将更有效。

逐个完成：

header与#header

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

header nav与#header .nav

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

这是因为CSS从右到左阅读。一旦找到最右边的后代，它需要通过DOM树返回工作以确定其父项是否匹配。它必须为每场比赛做到这一点。

当选择器无法匹配时，选择器会停止解释。因此，如果它正在寻找导航并在ul中运行，那么它将不会在DOM树上寻找该ul的标题父级。这不应该让我们太过惊讶，但我只是觉得我提到它是为了完整。

这些要点一起使我们得出的结论是，在使用后代选择器时，您希望最右侧的选择器尽可能具体。这样可以最大化不匹配的元素数量，从而最大限度地减少慢速DOM树搜索的数量。

回到示例中的两个选择器：如果您有多个包含多个导航的标头，但只有少数标头具有类.nav，那么右侧将更有效。 如果您只有一个标题ID标题和一个导航标识为nav的标题，那么它们将同样快速。

header nav ul li与#header .nav .menu

以前的相同规则适用于此案例。然而，在这种情况下，快速度的差异因这里有两个后代选择器而不仅仅是一个而放大。

如果您的网页包含多个无序列表，那么您可能希望使用这两个选择器中的第二个来阻止页面上的每个li与此（更）复杂的选择器匹配。

Answer 2

这取决于他们将如何使用。如果只需要设置一次样式，则使用标题{}，否则添加类和/或ID。