jQuery 哪个更快：选择器还是方法？
假设我有 $('mySelector:first'); 和 $('mySelector').first();。哪种方式最有效？我查看了源码，但仍然无法弄清楚。
看起来在第一种情况下，jQuery 会遍历每个项目，直到获得第一个项目：
CHILD: function( elem, match ) {
var type = match[1],
node = elem;
switch ( type ) {
...
case "first":
while ( (node = node.previousSibling) ) {
if ( node.nodeType === 1 ) {
return false;
}
}
if ( type === "first" ) {
return true;
}
node = elem;
...
}
}
在第二种情况下，jQuery 对集合进行切片，但我不确定它的效率如何：
function first() {
return this.eq( 0 );
};
function eq( i ) {
return i === -1 ?
this.slice( i ) :
this.slice( i, +i + 1 );
};
Let's say I have $('mySelector:first'); and $('mySelector').first();. Which way is the most efficient? I looked in the source, but still couldn't figure it out.
It looks like in the first case jQuery goes through every item until gets the first one:
CHILD: function( elem, match ) {
var type = match[1],
node = elem;
switch ( type ) {
...
case "first":
while ( (node = node.previousSibling) ) {
if ( node.nodeType === 1 ) {
return false;
}
}
if ( type === "first" ) {
return true;
}
node = elem;
...
}
}
In second case jQuery slices the collection, but I am not sure how efficient it is:
function first() {
return this.eq( 0 );
};
function eq( i ) {
return i === -1 ?
this.slice( i ) :
this.slice( i, +i + 1 );
};
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
当前接受的答案与跨多种浏览器的测试不一致将
:first和:eq(0)与.first()和.eq(0)进行比较。对于当前主要的桌面浏览器：
$('foo').first()几乎比$('foo:first')快四倍如果你想检查方法，这里是测试及其当前结果。
The current accepted answer is not consistent with tests across many browsers comparing
:firstand:eq(0)to.first()and.eq(0).For the current major desktop browsers:
$('foo').first()is almost four times faster than$('foo:first')If you want to inspect the methodology, here are the tests and their current results.
第二个必须在获取第一个之前获取选择器中的所有项目。因此，如果选择器有 10,000 个项目，它将获取所有 10,000 个项目，然后获取该组中的第一个项目。我希望第一个在这方面会更好，因为它会在搜索时进行过滤（并在找到第一个后停止）。但在大多数情况下可能微不足道。
当然，如果你要链接函数，那么它可能是不可避免的：
The second would have to fetch ALL the items in the selector before getting the first. So the if the selector was 10,000 items it would fetch all 10,000 then the first from that group. I would hope the first would be better in this regard since it would filter as it searches (and stopping after the first was found). Probably trivial in most cases, though.
Of course if you are chaining functions then it may be unavoidable:
在我的测试中，
$('mySelector:first');比$('mySelector').first();更快您可能也对这个感兴趣；
In my tests,
$('mySelector:first');is faster than$('mySelector').first();You may also be interested in this;
比较
$('li:first')和$('li').first()，我敢打赌第一个一定更快。因为例如，在包含 100 li 的文档中，第二个查询将简单地构建一个包含 100 个项目的列表，然后从中返回第一个；另一方面，第一个查询将在第一个 li 返回后立即停止。即使查询是由浏览器本地处理的，它仍然比第一个查询占用更多的内存。
Compare
$('li:first')to$('li').first(), I bet the first one must be faster. Because for example, in a document containing 100 li, then the second query would simply build a list of 100 items and then, return the first one from it; on the other hand, the first query will stop right there after the first li is returned.Even the query is handled natively by the browser, it still takes more memory than the first one.