Javascript jQuery性能：$（'；#选择器'；）.live（）与手动绑定（处理ajax请求时）

在处理异步加载的内容时，从性能角度来看，以下两个方面是否存在任何差异：

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

并在每次加载内容后手动绑定（）所需的事件：

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

---

可能有一点，但我不担心。对我来说，

.live（）

方法看起来更容易维护，所以我会使用它。只要没有任何东西慢得令人痛苦，就不必担心JavaScript的性能。

有不同的成本，让我们看看它们：

$('#mybutton').live('click', function(e){ doSomething(); });

这里有两个主要成本：

• #mybutton

  选择器需要立即运行，无需任何理由（结果被丢弃，我们只需要选择器……我们绑定到

  文档

  ）。在这种情况下，这是一个非常低的成本…在其他情况下，它并不便宜，而且非常浪费（例如

  [attr=something]

  ）
• 现在，每个弹出到

  文档

  的

  单击

  都必须根据此选择器进行检查，每次单击的评估成本随您期望的单击次数而变化

---

现在让我们看看另一种方法：

$('#mybutton').click(function(e){ doSomething(); });  

这里还有两个主要成本：

• #mybutton

  选择器运行，但每个ajax请求只运行一次。然而，我们不是在浪费它，我们在使用结果

• 单击

  处理程序绑定到实际元素，而不是

  文档

  ，因此每次运行时都会有绑定成本，而不是一次

但是，不存在每次单击的成本，选择器调用本身也不会被浪费……因此总体上更好，因为您使用的是一个ID，在其他情况下并非如此

---

在您的情况下，由于您处理的是一个ID（并保证使用单个元素），这要便宜得多。：

$('#mybutton').click(function(e){ doSomething(); }); 

---

在其他情况下，您绑定了数百个元素，这显然是赢家，尽管这会更好

从success函数的外观来看，您正在附加一个事件，因为该元素现在在html中可用？是这样吗

如果是这种情况，那么如果通过单击调用的函数始终相同，则可以使用“live”。Live允许您绑定到尚不存在的事件。所以你可以在你的文件准备好之前把它放进去。然后，当ajax更新主文档时，该事件应该始终有效。您不必每次都分配它

因此，您不必在每次从ajax调用返回时都执行某些操作，您可以在不依赖document.ready的情况下进行设置，并且保证可以正常工作，从而获得性能优势

---

嗯。

我不同意。我正在构建的应用程序大量使用了淡入淡出、动画、工具提示、图库和类似的东西，因此我希望确保所有内容都能尽可能顺利地加载。如果代码是以一种良好的方式组织的，那么它就不难维护。我将把所有的东西都封装在一个函数中，这个函数可以在任何情况下重用。好的，只要你仔细考虑了这个值。很多人在完全没有必要的情况下对优化大惊小怪，这就是我的建议。是的，我同意你的观点，在简单的情况下，试图节省200毫秒是浪费时间。@nemesis:@Nick的意思是

文档

对象，页面上所有元素的容器

live

事件绑定在那里，因此它们可以捕获事件，无论它们发生在页面的何处。@Simon-你不能阻止它冒泡，不能使用

.live（）

，这就是

.live（）

首先获取事件的方式……如果你停止冒泡（这意味着另一个绑定），则

.live（）

处理程序不起作用。@尼克-我的意思是一直冒泡到顶部-你可以给它上下文，这样它就不会进入根目录。至少我是这样读的。很抱歉造成混淆。@Simon-对……这是答案底部的注释，其中

.delegate（）

总是更好（它在下面使用

.live（）

，带有上下文……但仍然没有不必要地运行选择器）。@Nick Ah没有看到这个注释。注意它相当新，因此必须再次点击文档：）。谢谢你的指点。