Question

jquery / javascript中最快的是什么？

$('#myID .myClass')

或

$('.myClass')

CSS最好用什么？

#myID .myClass{}

或

.myClass{}

我现在看到我应该更好地解释。遗憾！

Ofceauce ID是CSS和JavaScript中更快的选择器。但有些时候你需要使用类，因为有多个选择器。

比如说我有我的大HTML文档。在页面中间我有：

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

如果我想要定位所有“myClass”。那么在定位类之前定位ID会更好吗？（然后我不必对整个HTML文档进行domtravel）例如：

会这样：

$（ '＃本身份识别码'）。找到（”。MyClass的）

快于：

$（”。MyClass的）

Answer 1

我在现代浏览器上的testing建议你应该选择其中之一，

$('#id').find('.class') // or
$('.class')

但不是，

$('#id .class')

原因是所有现代浏览器都实现了getElementsByClassName，导致按类名进行几乎恒定的时间查找（假设是哈希实现）。哪种浏览器是现代的另一个主观问题。

Answer 2

它们在大多数现代浏览器中大致相同，因为类名在内部进行哈希处理。不同之处在于旧浏览器没有.getElementsByClassName或等效方法，因此{j}内部解析.myClass并且dom中的每个元素都被遍历并检查类名（或者它在使用XPath时使用XPath）可能的）。

尽可能尝试使用#myID .myClass，因为它允许jQuery直接跳转到#myID并在必要时从那里进行遍历。

Answer 3

让我们暂时考虑一下这个问题，并假装你不知道浏览器是如何在内部构建的，或者它是如何访问DOM的，但你认为无论它做什么都是合乎逻辑的。

因此，是否有理由认为，在两个选择器中，最窄的选择器会更快找到结果？

你有两个选择器，转换为粗略的英语

类myClass的任何元素，它是ID为myID的元素的子元素
班级myClass

至于“什么是最适合在CSS中使用”，这是完全主观的，因为它取决于你是否打算定位 .myClass的所有实例或仅仅是那些#myID。

Answer 4

实际上是个好问题。

假设您已经解析了D个最大深度的N个元素和S个规则的CSS的DOM。然后，为所有元素查找样式的任务具有大约O(N*D*S)的计算复杂度。

显然，并非所有CSS选择器都具有相同的计算复杂度。

例如li.item选择器和li[class ~= "item"]需要完全相同的CPU资源。 li[class = "item"]可以更快地计算，因为它不需要扫描空格。

＃1选择器：

#myID .myClass{} /* #1 */
.myClass{} /* #2 */

需要更多的CPU资源，因为你需要完成与＃2相同的工作量，你需要扫描父/子链（最多D个元素）以找到带有“myID”的元素。

这就是纯CSS选择器。

在jQuery＆amp;朋友情况可能有点不同。从理论上讲，jQuery引擎可以使用document.getElementById()来最小化查找集（因此减少N数），但这与CSS行为不匹配。这是一个例子：http://jsfiddle.net/dnsUF/。这里jQuery报告了一个带有#foo的元素，但实际上有两个这样的元素。

恢复：

在CSS情况下＃2更快
在jQuery案例＃1中可以更快（但在CSS意义上技术上可能不正确）。

以下是关于CSS选择器复杂性的文章： http://www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/ 这是如何通过使用样式集来改进它： http://www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/

Answer 5

ID始终是访问元素的最快方式，因为它们是唯一的。

Answer 6

是的，id是访问元素的最快方法之一。看看这个测试http://mootools.net/slickspeed/。

Answer 7

假设您有许多应用#myID .myClass的元素，

.myClass绝对是访问该元素的更好方法。

Answer 8

更新 - 2015年 - 在这里检查自己
https://jsperf.com/id-vs-class-vs-tag-selectors/2

<强> TL; DR;

使用ID $（＆＃34;＃foo＆＃34;）比linux $ 64上的chrome 41上的CSS $（＆＃34; .bar＆＃34;）快近4倍 < / p>

jquery和CSS中最快的选择器方法 - ID或不？

8 个答案: