委托和数据属性与事件处理程序性能中的闭包

Question

什么是更高效的分配事件的方式？
不考虑代码质量，因为它是一种基于意见的事情。

委托绑定+数据属性

＆＃13;

＆＃13;

var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  $("<button/>").text(this.key).data("value", this.value).appendTo($container);
});

$(document).on("click", "button", function() {
  console.log($(this).data("value"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

＆＃13;

＆＃13;

＆＃13;

单个直接绑定+关闭值

＆＃13;

＆＃13;

var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  var x = this;

  $("<button/>")
    .text(x.key)
    .click(function() {
      console.log(x.value);
    })
    .appendTo($container);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

＆＃13;

＆＃13;

＆＃13;

如果我们使用第一种方法，那么由于委托事件处理程序，我们赢得了一些性能，但由于我们正在创建一个jQuery对象并读取数据属性，所以会失去一些性能。

第二种方法会占用更多内存吗？

Answer 1

  

哪个性能更高？

我在jsperf.com上创建了this test。我测试了三种不同的浏览器，并且在每种情况下，委托方法被证明每秒允许更多的操作：

--------------------------------------------
| Approach     | Chrome | FF     | MS Edge |
--------------------------------------------
| Delegate     | 1650   | 1612   | 611     |
| non-Bindings | 1623   |  558   | 320     |
--------------------------------------------

因此，委托方法更高效。

  

第二种方法会占用更多内存吗？

在阅读this question的部分答案后，我找到了最新版本的Google Chrome指南Fix Memory Problems。在该页面上有一个section，其中介绍了如何在Chrome标签中监控特定于javascript的内存。我将每个代码段保存为单独的HTML页面（分别是 buttonClickDelegate.html 和 buttonClicks.html ），并在单独的选项卡中打开。正如在下面的屏幕截图中可以观察到的那样，委托方法使用的内存较少。

然而，我按照this guide中的技术与Firefox的内存使用情况进行了比较。在使用委托方法打开单个页面后，内存从1.17 MB开始并上升到1.59 MB（单击每个按钮然后拍摄最终快照，并启用记录调用堆栈）。使用非委托方法，内存从1.07 MB开始并上升到1.24 MB（单击每个按钮然后拍摄最终快照，并启用记录调用堆栈）。

所以似乎firefox在委托方法中使用了更多内存，除非它只是整个应用程序内存而不是JavaScript代码特有的。