Question

背景：所以，我正在尝试进行测试，以查看使用jQuery的on.()绑定“点击”事件的三种方法的性能差异。我看到了一些非常大的差异（比我预期的大得多），当一位同事运行结果时，他注意到，如果你改变测试运行的顺序，结果会发生变化，但同样“出类拔萃”。

所以，我决定做一个非常简单的测试：

1）一个包含100个子<div>的父<div>，每个只有一个数字（1-100）和class值“target-element”。

2）每个元素都绑定了一个click事件，使用：

$(".target-element", "#context1").on("click", logClick);

3）click事件只是将文本值设置为局部变量：

function logClick() {
     var sTextVal = $(this).text();
}

4）然后，我设置了一个“触发器”功能来调用所有子<div>的点击次数：

function triggerClicks(context) {
    $(context).find(".target-element").each(function() {
        $(this).click();
    });
});

5）然后，我设置了3个测试运行，全部调用 EXACT 相同的测试：

运行1 ---＆gt; triggerClicks("#context1");

运行2 ---＆gt; triggerClicks("#context1");

运行3 ---＆gt; triggerClicks("#context1");

我测试过的所有浏览器的结果都是不同的，随着运行的继续而不断变慢：

Chrome 41

Run 1 ---> 59.91 Ops/sec (±6.55%) - fastest
Run 2 ---> 32.72 Ops/sec (±5.06%) - 45% slower
Run 3 ---> 23.69 Ops/sec (±3.39%) - 59% slower

Firefox 36

Run 1 ---> 52.69 Ops/sec (±10.21%) - fastest
Run 2 ---> 26.70 Ops/sec (±6.38%) - 48% slower
Run 3 ---> 15.95 Ops/sec (±24.55%) - 73% slower

IE 9

Run 1 ---> 26.98 Ops/sec (±14.43%) - fastest
Run 2 ---> 11.77 Ops/sec (±8.89%) - 54% slower
Run 3 ---> 7.54 Ops/sec (±6.85%) - 70% slower

那我在这里错过了什么？我意识到这是一个重复测试并且正在处理很多元素，但这不应该大大影响运行的结果。任何人都可以看到为什么会因为我的代码而发生这种情况，而不是JSPerf的严重错误？

Answer 1

如果您查看表单中准备代码字段旁边的帮助文本：

在每个时钟测试循环之前运行，在定时代码区域之外

这意味着代码在每个测试用例之前运行，而不仅仅是一次。因此，在第二个测试用例中，每个元素都有两个事件处理程序，第三个测试用例中有三个事件处理程序。

这就是为什么有＃34; teardown＆＃34;在准备字段的正下方：它应该用于撤消您在设置中所做的事情以避免这种情况。如果你把这个添加到拆解：

$(".target-element", "#context1").off("click");

然后在添加新的事件处理程序之前删除现有的事件处理程序，并且测试需要大约相同的时间才能运行。