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

Question

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

委托绑定+数据属性

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"));
});

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

单个直接绑定 + 封闭值

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);
});

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

如果我们使用第一种方法，那么我们会因为委托事件处理程序而获得一些性能，但会因为我们正在创建一个 jQuery 对象并读取数据属性而损失一些性能。

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

Answer 1

哪个性能更好？

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

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

因此，委托方法性能更高。

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

在阅读了this question 的一些答案后，我找到了最新版本的谷歌浏览器指南Fix Memory Problems。在该页面上有一个section，它描述了如何在 Chrome 选项卡中监控特定于 javascript 的内存。我将每个代码 sn-ps 保存为单独的 HTML 页面（即分别为 buttonClickDelegate.html 和 buttonClicks.html）并在单独的选项卡中打开它们。从下面的屏幕截图中可以看出，委托方法使用的内存更少。

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

因此，firefox 似乎在委托方法中使用了更多内存，除非这只是整个应用程序内存，而不是特定于 JavaScript 代码。