jquery和CSS中最快的选择器方法 - ID与否

Fastest selector method in jquery and CSS - ID or not?

本文关键字：方法 选择器 ID 与否 CSS jquery      更新时间：2023-09-26

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>

如果我想定位所有"我的类"。那么，在定位类之前定位 ID 会更好吗？（这样我就不必对整个HTML文档进行domtravel了）例如：

会这样吗：

$（'#myID'）.find（'.myClass'）

速度快于：

$（'.myClass'）

我在现代浏览器上的测试表明您应该选择其中之一，

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

但不是，

$('#id .class')

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

它们在大多数现代浏览器中大致相同，因为类名是在内部散列的。 不同之处在于，较旧的浏览器没有.getElementsByClassName或等效的方法，因此.myClass在内部解析为 jQuery，并且 dom 中的每个元素都被遍历并检查类名（或者在可能的情况下使用 XPath）。

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

让我们从

逻辑上思考一下这个问题，并假装您对浏览器如何在内部构建或它如何访问 DOM 一无所知，但您假设它所做的一切都是合乎逻辑的。

因此，在

两个选择器中，最窄的选择器会更快地找到您的结果，这难道不是合理的吗？

您有两个选择器，它们翻译成粗略的英语为

  1. 类的任何元素myClass ID 为 myID 的元素的子元素
  2. 类的任何元素myClass

至于"在CSS中最好使用什么"，这完全是主观的，因为它取决于您是打算针对.myClass的所有实例还是仅针对#myID子实例

。

其实是个好问题。

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

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

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

#1 选择器在这里：

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

需要更多的 CPU 资源，因为您需要执行与情况 #2 完全相同的工作量，此外，您需要扫描父/子链（最多 D 个元素）以找到带有"myID"的元素。

这就是纯CSS选择器的全部内容。

在jQuery和朋友的情况下可能有点不同。从理论上讲，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/

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

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

#myID .myClass绝对是访问元素的更好方法，假设您有许多应用了.myClass的元素。

更新 -

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

博士;

在 Linux 64 位上使用 ID $（"#foo"） 比我的 chrome 41 上的 CSS $（".bar"） 快近 4 倍

相关文章：