Javascript - 这两种技术之间哪一种最有效？

Question

我正在用 Javascript(和 jQuery)创建一个小五彩纸屑生成器。我将使用 setInterval() 每 0.06 秒增加每个五彩纸屑的顶部位置，我想知道:技术 A 和技术 B 之间最有效/性能最高的技术是什么？

<小时/>

技术 A:数千个五彩纸屑，但 1 个五彩纸屑 = 1 个单独的 setInterval() 用于设置其顶部位置:

for(var i=0; i<confettisQty; i++)
{
    var confetti = document.createElement("div");
    confetti.css("top","-100px");
    $("body").appendChild(confetti);

    setInterval(function(){
        var newTopPosition = confetti.position().top + 10;
        confetti.css("top", newTopPosition);
    },
    60);
}

技术 B:数千个五彩纸屑，但有 1 个全局 setInterval()，它会照顾每个五彩纸屑，然后更改每个五彩纸屑的顶部位置:

for(var i=0; i<confettisQty; i++)
{
    var confetti = document.createElement("div");
    confetti.addClass("littleConfetti");
    confetti.css("top","-100px");
    $("body").appendChild(confetti);
}

setInterval(function(){
    $(".littleConfetti").each(function(){
        var newTopPosition = $(this).position().top + 10;
        $(this).css("top", newTopPosition);
    });
},
60);

我正在学习 Javascript 语言，我正在寻找优化和性能方面的最佳实践和技术。因此，如果您能给我一些关于您的答案的解释，我将非常感激!

Answer 1

请注意，您正在混合 JS 和 JQuery，您应该在代码中进行更改

confeti.css(), confeti.position()

到

$(confeti).css(), $(confeti).position()

因为您需要一个 JQuery 对象

编辑:

由于丹达维斯的评论，我进行了更深入的搜索，我不得不说他是对的，在阅读了几篇文章后，他们都证实了他的理论。所以我对代码做了一些测试，看看哪些代码性能更好。

一开始我认为第二个选项会更好，因为它只创建一个setInterval，但我发现我完全错了。

与 JQuery .littleConfetti 选择器的成本相比，setInterval 的成本微不足道。选项B在第一次执行interval时非常慢，因为这是第一次搜索.littleConfetti元素，接下来执行interval的时候，执行时间急剧下降，尽管还不足以击败选项 A。

每个测试我执行了 20 次，所有时间都以毫秒为单位。测试结果为:

五彩纸屑数量 = 1000

• 选项A:144

• 选项B:240(第一次)/130(后续)

五彩纸屑数量 = 10000

• 选项A:695

• 选项B:21278(第一次)/1134(后续)

五彩纸屑数量 = 100000

• 选项A:12725

• 选项B:946740(第一次)/10568(后续次数)

因此，经过测试，我们可以说选项 A 更好。尽管如此，CSS 选项的性能会更好。