Javascript - What will be the most efficient between these two techniques?

Question

I'm creating a little confettis generator in Javascript (and jQuery). I'll use setInterval() to increase top position of each confetti every 0.06s and I wonder : what will be the most efficient / the most performant technique between technique A and technique B, below ?

---

Technique A : thousands confettis but 1 confetti = 1 individual setInterval() for setting its top position :

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

Technique B : thousands confettis but 1 global setInterval() which goes look after every confetti and then change top position of each one :

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

I'm learning Javascript language and I'm looking for the best practices and techniques in terms of optimization and performance. So if you could please give me some explanations with your answer, it would be very apreciated!

Answer 1

Note that you are mixing JS and JQuery, in your code you should change

confeti.css(), confeti.position()

to

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

Since you need a JQuery object

Edit:

Due to the Dandavis comment, I made a deeper search and I have to say that he is right, after reading several articles they all confirm his theory. So I made some tests to the code to find which code has a better performance.

At the beginning I thought that the second option will be better, since that it only create a setInterval, but I could find that I was totally wrong.

The cost of the setInterval is insignificant in compared to the costs of the JQuery .littleConfetti selector. The Option B is very slow in the first execution of the interval, that's because it's the first time that search for the .littleConfetti elements, the following times that the interval is executed, the execution time drops dramatically, although not enough to beat the Option A.

I executed each test 20 times and all the times are in milliseconds. The test results are:

confettisQty = 1000

• Option A: 144

• Option B: 240(first time)/130(following times)

confettisQty = 10000

• Option A: 695

• Option B: 21278(first time)/ 1134(following times)

confettisQty = 100000

• Option A: 12725

• Option B: 946740(first time)/10568(following times)

So, after the tests we can say that Option A was better. In spite of that the CSS option will perform better.