Question

我有一个很大的内容幻灯片，我正在制作的页面开始使用大量的事件触发器。其中大约一半使用livequery插件。

我是否会通过在幻灯片之间卸载这些事件来看到速度提升，因此只有活动幻灯片绑定了事件？

本地livequery也比livequery插件快得多吗？（因为它的功能当然不太好）

也会是这样的： http://dev.jquery.com/attachment/ticket/2698/unload.js

解开livequery事件？

我真的只需要知道卸载/加载一个事件监听器需要多长时间，以及如果我让它们保持运行它们正在吃多少个循环。此外，关于直播活动的任何信息都很棒。

Answer 1

我需要更多详细信息才能提供实际代码，但您可能需要查看Event Delegation：

事件委托是指在父对象上使用单个事件侦听器来侦听在其子对象（或更深层次的后代）上发生的事件。事件委托允许开发人员在他们的事件监听器应用程序中稀疏，同时仍然对事件做出反应，因为它们发生在高度特定的目标上。这被证明是在事件丰富的Web项目中保持高性能的关键策略，其中数百个事件监听器的创建可以快速降低性能。

一个快速，基本的例子：

假设您有一个带图像的DIV，如下所示：

<div id="container">
    <img src="happy.jpg">
    <img src="sad.jpg">
    <img src="laugh.jpg">
    <img src="boring.jpg">
</div>

但不是4张图片，而是100张或200张。您希望将点击事件绑定到图像，以便在用户点击它时执行X操作。大多数人的第一个代码可能如下所示：

$('#container img').click(function() {
    performAction(this);
});

这将绑定一大堆事件处理程序，这将阻碍页面的性能。通过事件委派，您可以执行以下操作：

$('#container').click(function(e) {
    if($(e.target)[0].nodeName.toUpperCase() == 'IMG') {
        performAction(e.target);
    }
});

这只会将1个事件绑定到实际容器，然后您可以通过使用事件的target属性并相应地委派来确定所点击的内容。但是，这仍然是一种痛苦，如果不使用jQuery的live函数完成所有这些操作，您实际上可以获得显着的性能提升：

$('#container img').live('click', function() {
     performAction(this);
});

希望这有帮助。

Answer 2

如果按“原始liveQuery”表示live()，则表示是，live()明显快于liveQuery()。后者使用setInterval定期查询整个文档树中的新元素，而前者使用event delegation。

活动代表团获胜。简而言之，无论您调用了多少个选择器live()，每个事件类型注册的document上都会有一个处理程序（例如click）live() liveQuery() 1}} with。

至于你的另一个问题，听起来你是绑定到每个幻灯片的元素，并想知道再绑定和绑定是否具有高性能？我会说WRT记忆，是的。 WRT CPU周期，编号

要明确的是，使用{{1}}方法，CPU永远不会睡觉。

Answer 3

为了它的价值。我们刚刚对此事进行了一些测试。我们创建了一个包含div的div页面，每个div都需要有一个onclick处理程序，显示一个显示其id的警告对话框。

在一个案例中，我们使用DOM Level 0事件注册并直接在html中为每个事件定义事件处理程序：onclick =“_ do_click（this）;”。在另一种情况下，我们使用DOM级别2事件传播，并在包含div上定义了单个事件处理程序。

我们发现，在100,000个div中，FireFox的加载时间差别可以忽略不计。花了很长时间。在Safari中，我们发现DOM级别0花费了两倍于DOM级别2的时间，但仍然比FireFox案例快四倍。

所以，是的，它确实会带来更好的性能，但似乎你真的必须尝试制造明显的惩罚。

jquery解绑事件速度增加

3 个答案: