为什么 .classname 比 element.classname 差答案

【问题标题】：Why .classname is worse than element.classname为什么 .classname 比 element.classname 差
【发布时间】：2011-12-15 18:01:14
【问题描述】：

谁能帮我解释一下原因：

#id .classname

比：

#id element.classname

从渲染/性能的角度来看？

【问题讨论】：

标签： css performance

【解决方案1】：

因为 DOM 具有特殊功能 (getElementByTagName)，专用于通过标签名称查找树中的所有元素。这些函数使用查找表并进行了很好的优化。但是，类名不存在这样的方法，并且查找类名需要遍历所有树并检查现有的类名。通过减小要迭代的树的大小可以使该算法更快，并且使用 element. 前缀可以做到这一点：它减小了树的大小以查找类名。

【讨论】：

但是浏览器不会查找要应用每个 CSS 规则的元素，它会检查哪些规则适用于每个元素...
@solendil：那为什么code.google.com/intl/es-ES/speed/page-speed/docs/rendering.html 会说，“删除多余的限定符。这些限定符是多余的：* ID 选择器由类和/或标签选择器限定，* 类选择器由标签选择器限定（当一个类只用于一个标签，无论如何这是一个很好的设计实践）。”具体来说，第二个要点。
@Jason：对于 ID，很明显，ID 应该是唯一的，因此它们位于查找映射中，任何后续选择器都无济于事。对于类，我想当一个类只被一个标签使用时，渲染引擎会对其进行一些优化......但是指定元素不应该减慢它......无论如何我想这一切都非常依赖于浏览器，因此，根据经验，使用 ID 和元素通常比使用类更有效，而组合选择器会降低性能。
-1 这个答案与问题完全无关，因为在应用 CSS 规则时没有元素查找。浏览器检查哪些规则适用于一个元素，而不是规则适用于哪些元素。
@Guffa：“完全不相关”可能有点过分。即使浏览器的渲染过程以相反的方式工作，在渲染过程之后使用 CSS 选择器（例如，这在 jQuery 中很常见）会导致此答案中暴露的性能考虑因素。

【解决方案2】：

只是因为.classname 必须检查所有元素是否符合指定的类名，而type.classname 只需检查与指定类型匹配的元素。

【讨论】：

但是浏览器不会查找要应用每个 CSS 规则的元素，它会检查哪些规则适用于每个元素..
-1 这个答案与问题完全无关，因为在应用 CSS 规则时没有元素查找。浏览器检查哪些规则适用于一个元素，而不是规则适用于哪些元素。

【解决方案3】：

我认为是因为在第一个示例中，浏览器渲染引擎应该在 #id 元素内搜索每个具有 classname 类的元素。

第二个示例会更快，因为引擎只查找具有该类的每个元素 element。

对不起，文字游戏，但是从性能的角度来看，这应该没有影响。

【讨论】：

但是浏览器不会查找要应用每个 CSS 规则的元素，它会检查哪些规则适用于每个元素...

【解决方案4】：

不是。

对于第一个选择器，浏览器检查元素是否具有类，然后检查是否有任何后代具有 id。

对于第二个选择器，浏览器检查元素是否具有类，然后检查元素是否与标签名称匹配，然后检查是否有任何后代具有 id。

如果选择器具有相同的效果，则第一个选择器更好，因为浏览器只需进行较少的检查即可匹配规则。

更多关于高效选择器的信息：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

【讨论】：

【解决方案5】：

不要过度优化你的代码，让它清晰（这只是关于你和你的习惯，或者你的团队标准），然后再看看性能。

当您的 CSS 选择器成为您的瓶颈时，您将有 1000 名工程师为您工作。

【讨论】：

这个问题不是要不要担心性能。
@JasonTFeatheringham “从渲染/性能的角度来看？”嗯，我的回答是“不，不是因为它太小了，你应该关心它，只关心代码的清晰度”。
我实际上是从 Big O 的角度考虑的，而不是真正的用例。
@JasonTFeatheringham：这没有任何意义
这到底是怎么回事？