jquery - jQuery 选择器的最佳性能

Question

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

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

但是这样的链接很多，我感觉这效率很低。我想有一种方法可以告诉选择器查询在第一个匹配后停止，从而节省处理时间。这是我想象的这样做的方式:

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

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

Answer 1

虽然听起来很奇怪，但在 these tests 上，我在 Safari 和 Firefox 上得到的“a:first”始终更快，而在 Chrome 和 Opera 上则更慢。 。然而，这些结果是针对页面上近 12,000 个链接的，因此这里或那里的一毫秒不值得大惊小怪。

Safari

火狐浏览器

Chrome

歌剧

<小时/>

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

好吧，我忍不住添加 jQuery style performance numbers从 1.0 天开始:)

Safari(快 112,000%)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Safari%204.0.5%20on%20Intel%20Mac%20OS%20X%2010_5_8%29&chts=000000,10&cht=bhg&chd=t:61,69,68268&chds=0,68268&chxt=x&chxl=0:%7C0%7C68.3K&chsp=0,1&chm=ta%2861%29,000000,0,0,10%7Cta:first%2869%29,000000,0,1,10%7Ct#firstLink%2868.3K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Firefox(快 30,000%)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Firefox%203.6.4%20on%20Intel%20Mac%20OS%20X%2010.5%29&chts=000000,10&cht=bhg&chd=t:36,69,10883&chds=0,10883&chxt=x&chxl=0:%7C0%7C10.9K&chsp=0,1&chm=ta%2836%29,000000,0,0,10%7Cta:first%2869%29,000000,0,1,10%7Ct#firstLink%2810.9K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Chrome(速度提高 24,000%)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Chrome%205.0.375.70%20on%20Intel%20Mac%20OS%20X%2010_5_8%29&chts=000000,10&cht=bhg&chd=t:274,154,103377&chds=0,103377&chxt=x&chxl=0:%7C0%7C103.4K&chsp=0,1&chm=ta%28274%29,000000,0,0,10%7Cta:first%28154%29,000000,0,1,10%7Ct#firstLink%28103.4K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Opera(快 38,000%)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Opera%209.80%20on%20Intel%20Mac%20OS%20X%29&chts=000000,10&cht=bhg&chd=t:43,22,10346&chds=0,10346&chxt=x&chxl=0:%7C0%7C10.3K&chsp=0,1&chm=ta%2843%29,000000,0,0,10%7Cta:first%2822%29,000000,0,1,10%7Ct#firstLink%2810.3K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

设置:

• 操作系统:OS X 10.5.8
• Opera:10.10，版本 6795
• Chrome:5.0.375.70
• Safari:4.0.5 (5531.22.7)
• Firefox:3.6.4