性能开销

如果我的标记看起来像这样：性能开销

<button id="button-1" class="nice"> 
<button id="button-2" class="nice"> 
<button id="button-3" class="nice">

，我定义以下的jQuery：

$(".nice").click(function() { 
    // something happens 
});

多少事件监听器成立？ 1或3？
如果我有1000个按钮而不是3个，应该使用事件委托吗？
如果这些类在标记中包含大量元素，那么在元素类中不定义jQuery调用是否最好，性能明智？

来源

2009-07-20 fingerprint

1）3个事件监听器都指向相同的函数。

2）那要看你要完成

3）尝试做一些基准测试，看看那里的性能损失变得明显的。我已经选择了多达1000个元素，然后同时进行动画制作 - 而且（在FF中）性能命中直到大约600-700个元素都不明显。性能当然取决于浏览器和JS引擎。一些（Chrome）会比其他（IE）更快。值得一提的是，对于该网站，我使用了与您的问题相同的方法。

来源

2009-07-20 04:06:41

你用什么工具进行基准测试？ – fingerprint 2009-07-20 14:55:22

如果您使用Firefox，请尝试使用firebug（http://getfirebug.com）。 – SolutionYogi 2009-07-20 17:09:54

我通常只写我自己的，不太难。 – 2009-07-20 21:33:08

1）3

2）是

3）是的，正如你所说的使用事件代表团这jQuery是可以通过.live功能。要小心，太多.live功能也会影响性能，所以请考虑本地事件委派。

来源

2009-07-20 04:56:05 redsquare

完全同意！您必须将事件侦听器添加到包含所有这些好元素的父元素。这将大大提高性能。

来源

2009-07-20 04:58:50 stoimen

是的，因为的$()函数返回一个数组和click()被应用到所有在其中的元件。
是的。如果有大量可触发事件的节点，或者这些节点的数量可能发生变化，委派通常可以获得最佳效果。这允许您只需要初始化事件侦听器一次，而不管DOM发生了什么。如果你打算有超过100个节点，我会使用事件委托来处理事件。
是的。这会改善你的响应时间（特别是对于非常大的列表[请参考基准]），以及使你的初始化O（1）而不是O（n）。

来源

2009-07-20 09:08:54

回答

相关问题