Question

在jQuery中引用元素时，以下哪一项最有效：

HTML：

<div id="divId" class="divClass">Div</div>

jQuery的：

var div = $('div');
var div = $('#divId');
var div = $('.divClass');

同时考虑复合参考：

HTML：

<main id="mainId" class="mainClass">
    <div id="divId" class="divClass">Div</div>
</main>

jQuery的：

var mainDiv = $('main div');
var mainDiv = $('#mainId #divId');
var mainDiv = $('.mainClass .divClass');

Answer 1

将id与var mainDiv = $('#mainId #divId');一起使用效果最佳。

查看此jsperf

的结果

如果您定位内部div，只需使用速度更快的id选择器$("#divId")：jsperf。在选择器中使用两个id实际上会减慢速度。

Answer 2

它还取决于浏览器。如果浏览器没有本机选择器实现，或者缺少getElementsByTagName和getElementsByClassName等，那么这些将会“慢”。 getElementById一直是原生的（尽我所知），应该发挥最好的作用。这实际上取决于DOM引擎是否具有缓存，以及在文档解析/呈现期间缓存的内容。

请记住，jQuery uses Sizzle under the hood，所以这不是关于jQuery的问题，而是Sizzle。

Sizzle尝试尽可能使用本地DOM遍历方法，如matchSelector。在某些需要shiv的情况下（如:not(:has(span:eq(6))))），需要非本机DOM遍历。

您应该考虑选择器查询的复杂性，以及选择器启动的DOM树的哪个部分。限制查询总是比从DOM的根开始更快：例如$('#main').find('.someClass') ~~或$('#main .someClass')~~ ¹，而不是$('.someClass')。

也许这个问题太开放了。

¹^{_{Per @nick-f，“Sizzle从右到左处理选择器”，因此$('#main .someClass')与$('#main').find('.someClass')不是同义词。}}

在jQuery中，ID，类名或标记名称的引用是否最有效？

2 个答案: