代码之家 › 专栏 › 技术社区 › Matrym

jquery选择器的最佳性能

jquery-selectors jquery

Matrym · 技术社区 · 16 年前

这将获取并存储特定链接的背景色:

var origColor = $("ul.relatedAlbums li a").css("background-color");

但是有很多这样的联系,我觉得这是低效的。我认为有一种方法可以告诉选择器查询在第一次匹配之后停止,从而节省处理时间。我是这样想的:

var origColor = $("ul.relatedAlbums li a:first").css("background-color");

这是正确/有效的方法吗?人们说使用CSS伪类很慢,但我不确定这是否适用。这个语法是一样的,对吗?

5 回复 | 直到 15 年前

RamboNo5 16 年前

你不需要 :first 因为css方法只查看匹配元素集中第一个元素的属性。

获取Style属性的值集合中的第一个元素匹配的元素。

Anurag 16 年前

听起来很奇怪,我在Safari和Firefox上获得了“A:First”的速度,在Chrome和Opera上获得了更快的速度。 these tests . 然而,这些结果是针对页面上近12000个链接的,所以在这里或那里花费一毫秒是不值得的。

游猎

火狐

铬

歌剧

要真正优化这个,您不应该选择所有链接。为第一个链接分配一个唯一的ID,并仅访问该ID。这里是一个 new test 通过搜索一个元素,它会使其他技术失去比例。不用说,这显然会非常快,但这只是一个实际速度的比较。

好吧,我忍不住补充 jQuery style performance numbers 从1.0天开始:)

Safari(速度快112000%)

alt text http://tinyurl.com/2b2w2fc

火狐(快30000%)

alt text http://tinyurl.com/25xjzs4

铬(快24000%)

alt text http://tinyurl.com/28w9fgq

Opera(快38000%)

alt text http://tinyurl.com/27lsz2u

设置:

gnarf 16 年前

jquery的选择器引擎处理 :first 通过首先搜索 ul.relatedAlbums li a 然后对所有匹配的元素应用过滤器。虽然这个过滤器很短:

first: function(elem, i){
  return i === 0;
}

它仍然为选择器中的每个元素生成一个函数调用。

这个 .css(prop) 方法将返回 jQuery.curCSS(elems[0], prop) . 因此 首先 选择器纯粹是浪费性能。

user375700 16 年前

Rambono5说的,但是如果你只想编辑第一个元素的背景色,你可以使用

var origColor = $("ul.relatedAlbums li a:first").css("background-color", "red");

就像你说的,但我想你也可以用

var origiColor = $("ul.relatedAlbums li").first().css("background-color", "red");

我没有尝试过,但我认为它应该可以工作,而且我相信它更快,因为您不需要进行选择器解析。

看一看: -api.jquery.com/first-selector/ - http://api.jquery.com/first/ 更多信息

Steve Wortham 16 年前

我不认为:第一个选择者会给你带来很多好处。

使用选择器提高性能的最佳方法之一是使用带有ID选择器的可选上下文参数。

像这样的…

var origColor = $("ul.relatedAlbums li a", "#surroundingDiv").css("background-color");

第二个上下文选择器实际上告诉jquery引擎首先搜索dom中的surroundingdiv。然后使用第一个选择器进一步缩小这些结果。

由于ID选择器是迄今为止所有选择器中速度最快的,因此根据上下文的相对大小(与DOM的其余部分相比),此技术有时可以将性能提高一倍。