javascript - JSPerf 测试结果随着测试运行而变慢?

标签 javascript jquery jsperf

背景:因此,我尝试进行一项测试,以了解使用 jQuery 的 on.() 绑定(bind)“点击”事件的三种方法的性能差异。 .我看到了一些相当大的差异(比我预期的大得多),当一位同事运行结果时,他注意到,如果你改变测试运行的顺序,结果会改变,但同样“不正常”。


所以,我决定做一个非常简单的测试:

1) 一位家长 <div>包含 100 个 child <div> s,每个里面只有一个数字 (1-100) 和 class值“目标元素”。

2) 每个元素都有一个click事件绑定(bind)到它,使用这个:

$(".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 个测试运行,所有测试都调用完全相同的测试:

运行 1 ---> triggerClicks("#context1");

运行 2 ---> triggerClicks("#context1");

运行 3 ---> triggerClicks("#context1");

您可以在此处查看测试:http://jsperf.com/jsperf-perf-test

我测试过的所有浏览器的结果都大不相同,随着运行的继续,结果越来越慢:

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

火狐 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 的严重错误?

最佳答案

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

runs before each clocked test loop, outside of the timed code region

这意味着代码在每个测试用例之前运行,而不是只运行一次。因此,在第二个测试用例中,您将有两个事件处理程序附加到每个元素,而在第三个测试用例中则有三个。

这就是为什么在准备字段正下方有一个“拆卸”字段的原因:它应该用于撤消您在设置中所做的操作,以避免出现这种情况。如果将此添加到拆解中:

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

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

Updated version here.

关于javascript - JSPerf 测试结果随着测试运行而变慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29062955/

相关文章:

javascript - HTML5 Canvas 碰撞检测 "globalCompositeOperation"性能

Javascript变量在评估中递增?

javascript - 调整 Fabricjs 矩形的大小以保持边框大小

javascript - 在通过 bind() 绑定(bind)的函数中使用绑定(bind) this 和函数作用域的 this

jquery - Bootstrap 3 中的数字向上和向下(微调控件)

javascript - 如何在jsperf中指定测试浏览器?

javascript - Angular 7+ : Images in assets folder does not appear

javascript - 如何在javascript中制作页面顶部按钮?

javascript - 用于计算两个 JavaScript 对象之间差异的 jQuery 函数

javascript - 测试和比较 jQuery 插件的性能