基本上，是
$("#someid")
或者
$(".someclass")
比...快
$("[someattr='value']")
我会想象它是（也就是说，通过 id 选择最快，然后是类，然后是属性），但是有人确定吗？
在 jQuery 中，按类或 id 选择是否比按其他属性选择更快？
IT技术
javascript
jquery
jquery-selectors
2021-02-01 00:49:09
6个回答
ID绝对是最快的。部分原因是 ID 应该是唯一的，因此在 DOM 中找到 ID 后，API 停止搜索。
如果必须使用类或属性选择器，则可以通过指定可选的上下文参数来提高性能。
例如...
$(".someclass", "#somecontainer")
哪里somecontainer有像 div 一样的东西，用 class 包围一个元素someclass。在somecontainer包含一小部分 DOM的情况下，这可以提供巨大的性能优势。
更新：
几年前我围绕上下文参数做了一些测试。阅读下面的评论后，我很好奇是否有任何变化。事实上，现在的浏览器似乎已经改变了这一场景。也许它也与 jQuery 的改进有关？我不知道。
这是我经过 10,000 次迭代后的结果（代码如下）：
IE9
$(".someclass") - 2793 毫秒
$(".someclass", "#somecontainer") - 1481 毫秒
铬 12
$(".someclass") - 75 毫秒
$(".someclass", "#somecontainer") - 104 毫秒
火狐 3.6
$(".someclass") - 308 毫秒
$(".someclass", "#somecontainer") - 357 毫秒
所以在这三大现代浏览器中，context 参数似乎只对 IE9 有帮助。较旧的浏览器也将从上下文参数中受益。但考虑到这些浏览器中的每一种的流行程度和平均所有内容，净收益现在有点小了。
这是代码，以防有人想自己尝试...
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startTime = new Date().getTime();
for (i = 0; i < 10000; i++)
{
s = $(".someclass");
}
$("#withoutcontext").html(elapsedMilliseconds(startTime));
startTime = new Date().getTime();
for (i = 0; i < 10000; i++)
{
s = $(".someclass", "#somecontainer");
}
$("#withcontext").html(elapsedMilliseconds(startTime));
});
function elapsedMilliseconds(startTime)
{
var n = new Date();
var s = n.getTime();
var diff = s - startTime;
return diff;
}
</script>
</head>
<body>
<h1>jQuery Selector Performance: Context vs No Context</h1>
<h2>$(".someclass")</h2>
<span id="withoutcontext">---</span> ms<br /><br />
<h2>$(".someclass", "#somecontainer")</h2>
<span id="withcontext">---</span> ms<br /><br />
<hr />
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<div id="somecontainer">
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="someclass">someclass</p>
</div>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
</body>
</html>
按ID选择是最快的，因为它直接映射到getElementByID，另外2个要检查每个元素来确定被选中的元素。
如果您必须选择使用类或属性，请尝试将搜索包含在 ID 中。前任。
$("#someid .someclass")
ID 是唯一的，如果您只想在此处选择一个/第一个元素，则等效
$("#someid") => 75,695 ops/sec，最快
$(.unique_class') => 45,257 次操作/秒，慢 40%：页面上只有一个类
$(".someclass").first() => 42,217 ops/sec，慢 46%：页面上有多个类，选择第一个元素
$(".someclass:eq(0)") => 18,324 ops/sec，慢 76%：页面上有多个类，选择选定索引处的元素
ID 和类选择器，至少在单独使用时，往往更快，无论是对于 jQuery 还是 CSS。这主要是因为浏览器在其 DOM/CSS 引擎中针对 ID 和类优化了算法。
在具有最新 jQuery 版本的现代浏览器中，任何被浏览器理解为支持的 CSS 选择器的选择器字符串都将由 处理document.querySelectorAll()，只要使用标准 CSS 选择器，就可以提供最佳性能。非标准选择器或旧浏览器由 jQuery 和/或 Sizzle 库处理，它们尽最大努力利用 DOM 的 get-element(s) 方法来遍历 DOM。
要记住的最重要的事情是，由于 DOM 实现不同，性能会因浏览器（版本）而异。至少，我相信事情是这样的。
id 总是最快的，因为它在页面上是唯一的。类“可能”比属性更快，但这取决于。
这里真正的关键是选择一个class，ID 可能不会比选择class更快。这将取决于页面和浏览器。在我的测试中，选择了一个包含有限数量元素的复杂页面，其中包含一个“class”，其中 class 元素的父元素具有一个 id，例如：
<div id='iamout'>
<div class='aonther'>
<div class='iamin'>stuff</div>
<div class='iamin'>stuff</div>
</div>
</div>
像这样的选择器$('.iamin','#iamout')并不总是那么快$('.iamin')
并非所有浏览器都支持按类名（本机）选择，但现代/较新的浏览器支持，因此它可能会根据您拥有的浏览器提供更好的性能。
如果您需要获得最佳性能，则需要测试您的确切页面。