为什么.classname比element.classname糟糕

有人可以帮我解释一下：为什么.classname比element.classname糟糕

#id .classname

是有过之而无不及：

#id element.classname

来自渲染/性能的角度？

来源

2011-12-14 Jason T Featheringham

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

来源

2011-12-14 13:08:25 solendil

但浏览器不会查找适用于，它会检查该规则适用于每个元素... – Guffa

@solendil每个CSS规则元素：那为什么http://code.google.com/intl/es-ES /speed/page-speed/docs/rendering.html说：“删除冗余限定符这些限定符是多余的： *通过类和/或标签选择符合格的ID选择符，* 通过标签选择符限定的类别选择符仅用于一个标签，无论如何，这是一个很好的设计实践）。“具体来说，第二个要点。 –

@Jason：对于ID很明显，ID应该是唯一的，所以它们在查找地图中，任何后续的选择器都无济于事。对于类，我想当一个类只能被一个标记使用时，呈现引擎会对它进行一些优化......但是，指定元素不应该减慢它的速度......无论如何，我想这一切都是依赖于浏览器的，根据经验法则，使用ID和元素通常比类更有效，并且组合选择器会降低性能。 – solendil

只是因为.classname必须检查所有元件为specifyed类名，而仅type.classname HAST检查匹配指定类型的元素。

来源

2011-12-14 13:05:59 oezi

但浏览器不仰望每个CSS规则应用到的元素，它会检查该规则适用于每个元素.. – Guffa

-1这个答案是不是在所有相关这个问题，因为在应用CSS规则时没有元素查找。浏览器检查哪些规则适用于某个元素，而不是规则适用的元素。 – Guffa

-2

不要overoptimize你的代码，说清楚（这只是关于你和你的习惯，或者你的团队的标准），并看到以后的表现。

当你的CSS选择器将是你的瓶颈，那么你就会有1级000的工程师为你工作。

来源

2011-12-14 13:06:59

这个问题不在于是否担心表现。 –

@JasonTFeatheringham“从渲染/性能角度？”嗯有点，我的回答是“不，这不是因为它太少，你应该关心它，只关心你的代码的清晰度”。 –

我真的很关心大O的角度，而不是一个真正的用例。 –

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

因为发动机看起来就像每个元素element与该类第二个例子会更快。

很抱歉的文字游戏，但是这应该是不影响从性能的角度。

来源

2011-12-14 13:08:27 Simone

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

它不是。

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

对于第二个选择器，浏览器检查一个元素是否具有该类，然后如果检查该元素是否与标记名称匹配，则检查是否有任何后裔具有该id。

如果选择器具有相同的效果，第一个选择器是更好，因为浏览器必须执行更少的检查以匹配规则。

来源

2011-12-14 15:07:40 Guffa

为什么.classname比element.classname糟糕

回答

相关问题