answer中"w"发啥音?

Posted 2023-05-10

参考技术A answer
[英] [ˈɑ:nsə] [美] [ˈænsɚ]
w不发音

最合适的方法是：$($(".answer")[0])

【中文标题】最合适的方法是：$($(".answer")[0])

【英文标题】：Most appropriate way to get this: $($(".answer")[0])

【发布时间】：2011-06-17 19:06:15

【问题描述】：

假设我想获取类“.answer”的所有元素中的第一个元素

$($(".answer")[0])

我可以做到以上几点，但优雅和速度之间的最佳平衡是什么？

*更改了问题以反映当前的讨论

【问题讨论】：

根据我自己的经验，我发现.first 在 IE 中的效率确实很低，而$($(foo)[0]) 的速度要快得多。这只在关键代码中很重要（想想.each 在大集合上）

您的版本虽然不优雅，但似乎是迄今为止最有效的。

有趣的是，关于优雅的问题如何变成了性能基准测试。

@box9 这是 SO 力量的惊人例证

【参考方案1】：

以下在功能上都是等效的（虽然不是速度）：

var a0 = $($('.answer')[0]); var a0 = $('.answer').first(); - 见http://api.jquery.com/first/ var a0 = $('.answer:first'); - 见http://api.jquery.com/first-selector/ var a0 = $('.answer').eq(0); - 见http://api.jquery.com/eq/ var a0 = $('.answer:eq(0)'); - 见http://api.jquery.com/eq-selector/

哪个最好？has been hypothesized 选择器版本 应该 比方法版本更快（并且逻辑有些道理），但我还没有找到可靠的跨浏览器、多文档基准来证明这一点是真的。

而且在某些情况下你不能使用选择器，因为你有一个由链式结果产生的 jQuery 对象，并且必须稍后将其削减。

编辑：基于以下@yc 测试的优秀信息，以下是当前（2011 年2 月4 日）测试结果汇总并与.answer:first 的基线进行比较：

:first :eq(0) .first() .eq(0) $($('...')[0]) 铬 8+ 100% 92% 224% 266% 367% 法郎 3.6 100% 100% 277% 270% 309% FF 4.0b 100% 103% 537% 521% 643% 野生动物园 5 100% 93% 349% 352% 467% 歌剧 11 100% 103% 373% 374% 465% 即 8 100% 101% 1130% 1246% 1767% iPhone 4 100% 95% 269% 316% 403% ==================================================== === 加权 100% 92% 286% 295% 405% 主要 100% 95% 258% 280% 366%

Weighted

行显示了按每个浏览器的测试次数加权的性能；流行的浏览器（在这些测试中）的计算量更大。

Major

行显示相同，仅包括主要桌面浏览器的非 beta 版本。

总而言之：假设（当前）是错误的。这些方法比 Sizzle 选择器快得多，而且几乎无一例外，OP 的代码 $($('.answer')[0]) 是所有方法中最快的！

【讨论】：

:eq() 从零开始。也许你在想:nth-child()，它是基于一的？

只需为这些 jsperf.com/selecting-the-first 设置一个 JSPerf。请在您的各种浏览器上运行它:) 我的第一个测试似乎表明，与假设相反，这些方法比嘶嘶声选择器更快。这并不奇怪，因为众所周知，非 CSS Sizzle 选择器非常慢。

请注意表格中的百分比似乎是速度，而不是持续时间。

【参考方案2】：

使用:first 选择器或.first 过滤方法：

$(".answer:first");

或：

$(".answer").first();

【参考方案3】：

我不能说优雅方面，但这里的性能方面实际上可以产生巨大的影响。

看起来，from a set of JavaScript testing，您的原始方法实际上是最最有效的方法，并且与接受的答案链接到的假设相反，非 CSS Sizzle 选择器往往是 比方法选择器效率低很多。这是有原因的。 $('.answer') 可以使用浏览器原生的getElementsByClass() 而无需手动遍历结果。 :first 选择器使这复杂化。在这种情况下，使用嘶嘶声选择器似乎会使选择减慢 4-5 倍。

我认为，对于 jQuery，性能应该胜过优雅，而且所有证据（到目前为止我测试过的每一个浏览器！）似乎都表明 OP 不优雅的解决方案是最快的。

以下是测试运行次数最多的浏览器的结果：

（数字是“每秒操作数”，因此数字越大速度越快，数字越小越慢。）

【讨论】：

我认为在更复杂的文档树上运行测试也是有益的。

出于好奇，您为什么认为 jQuery 的性能胜过优雅？实际上，我的观点恰恰相反，尤其是在用户无法区分的情况下。

@Xavi 对于一种选择，用户无法区分，但如果您正在构建一个 jQuery 密集型应用程序，这些差异可能会叠加，尤其是在低端浏览器中。如果一种方法实际上比另一种方法快 5 倍，那么这种差异就会产生影响。

从根本上说，我这样做是为了反驳越来越多的传统观点，即 Sizzle 选择器更有效。实际上，我很惊讶 OP 的版本是最快的。我期待 .eq(0) 或 .first() 更快。

只是快速指出 yahelc 关于性能很重要的说明。在移动浏览器中，你的 js 的效率对用户体验产生了巨大的、极其显着的影响