Question

我在Javascript（和jQuery）中创建一个小的confettis生成器。我会使用setInterval（）每0.06秒增加每个五彩纸屑的顶部位置，我想知道：技术A和技术B之间最有效/最高效的技术是什么？下面是什么？

技术A：数千个confettis但是1个confetti = 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：成千上万的confettis但是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 setInterval选择器的成本相比，.littleConfetti的成本无关紧要。选项B在第一次执行间隔时非常慢，因为它是第一次搜索.littleConfetti元素，执行间隔的次数，执行时间急剧下降，虽然不足以击败期权A.

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

confettisQty = 1000

选项A：144

选项B：240（第一次）/ 130次（次数）

confettisQty = 10000

选项A：695

选项B：21278（第一次）/ 1134次（以下次）

confettisQty = 100000

选项A：12725

选项B：946740（第一次）/ 10568次（以下次）

因此，在测试之后我们可以说选项A更好。尽管CSS选项会表现得更好。

Javascript - 这两种技术之间最有效的是什么？

1 个答案: