Question

获取并存储特定链接的背景颜色：

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

但是有很多这样的链接，我觉得这是无效的。我想有一种方法可以告诉选择器查询在第一次匹配后停止，从而节省处理时间。这就是我想象的那样：

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

这是正确/有效的方法吗？人们说使用css伪类很慢 - 但我不确定这是否适用。这只是具有相同的语法，是吗？

Answer 1

听起来很奇怪，我在Safari和Firefox上的“a：first”速度一直更快，而these tests上的Chrome和Opera速度更慢。然而，这些结果是在页面上的近12,000个链接，所以这里或那里的毫秒不值得拉头。

<强> Safari浏览器

<强>火狐

<强>铬

<强>戏

要真正优化此功能，您永远不应选择所有链接。为第一个链接分配唯一ID，并仅访问该链接。这是一个搜索单个元素的new test，它会使其他技术不成比例。毋庸置疑，这显然会非常快，但这实际上只是比较快多了。

好的，我无法拒绝在1.0天内添加jQuery style performance numbers：）

Safari（快112,000％）

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

Firefox（快30,000％）

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

Chrome（速度提高24,000％）

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

Opera（快38,000％）

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

设定：

Answer 2

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

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

Answer 3

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

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

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

.css(prop)方法将返回jQuery.curCSS(elems[0], prop)。因此，:first选择器纯粹是一种浪费性能。

Answer 4

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/ 了解更多信息

Answer 5

我不认为：第一选择器会给你带来很多。

使用选择器提高性能的最佳方法之一是将可选的context参数与id选择器一起使用。

像这样......

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

第二个上下文选择器实际上告诉jQuery引擎首先在DOM中搜索#surroundingDiv。然后使用第一个选择器进一步缩小这些结果。

由于id选择器是迄今为止所有选择器中最快的选择器，因此该技术有时可以使性能提高一倍，具体取决于与DOM的其余部分相比的上下文的相对大小。