DEV Community

Cover image for 6 times faster loops in Javascript

6 times faster loops in Javascript

Eckehard on March 19, 2024

Javascript is fast. Really fast - at least if it´s running in a modern browser. So, in general you should not care too much about performance. But ...
Collapse
 
kooiinc profile image
KooiInc

Not sure how these results are obtained. Maybe you should also publish the code you used to test.

I Tried to reproduce using the information you gave us and with a few new approaches: see this snippet. The results are different.

Collapse
 
efpage profile image
Eckehard

Results will greatly depend on your machine and the browser. I added my test code at the end of the post so you can try the tests I did.

Collapse
 
kooiinc profile image
KooiInc • Edited

Right, so you're telling us you tested a text with 4625 lines, but in the snippet you are testing a text with 251 lines - the result of which you use here.

Thread Thread
 
efpage profile image
Eckehard

Oh, sorry, my fault! 4625 was the file length, not the line count. I changed the text, thank you for the hint!

You will find that results will greatly change on different machines. On and Intel(R) Core(TM) i7-1185G7 for..of was the winner, but the speed factor was only 2.7 to the slowest result.

Thread Thread
 
kooiinc profile image
KooiInc

Ok, both cases are now covered in my snippet. And yes, it (ofcourse) also depends on the used hardware.

BTW I would advice to always use semicolons for line ends in EcmaScript.

Thread Thread
 
efpage profile image
Eckehard

I have done a lot coding in C and Pascal, but did not miss the semicolons for any reason. Beside of personal taste, is there any technical reason to use semicolons?

Thread Thread
 
kooiinc profile image
KooiInc

Most of the time it's not relevant. I've coded Java/ECMAScript since its conception (besides pascal, c, c++ and c#). Still every now and then I run into a problem because of the interpreters' automatic semicolon insertion *). So I force myself to use them.

*) for example

function add(a, b) {
  return
    a + b
}
add(1,2); // undefined
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lexlohr profile image
Alex Lohr

Maybe

const lines = text.replace(/(\n|$)/g, "x$1")
Enter fullscreen mode Exit fullscreen mode

Might be worth a try, too.

Collapse
 
efpage profile image
Eckehard

In my setup regEx-replace was about 20% slower than the slowest solution, which is still not bad. Things might change if the task get´s more complicated, but in general I found that regEx performance is quite reasonable, Not top of the list, but also not much slower than hand optimized code. If you take into account that RegEx expressions can be quite complex, this is still an amazing result.

Collapse
 
efpage profile image
Eckehard

Thank you for the hint, I´ll add this to the post.

Collapse
 
artydev profile image
artydev

Yes 'good old loop performs much better' ;-)

Collapse
 
codewithshahan profile image
Programming with Shahan

VERY insightful post. Performance testing under a particular workload is a great way to ensure more positive UX.

Collapse
 
efpage profile image
Eckehard

Sure, but we should also look for the numbers. A delay of 50 ms will hardly be recognized by the user, which could mean:

  • doing 10 Mio. string operations
  • or waiting for a single response from the backend or a single database request.

Often it is not easy to find the reason for slow interactions. Doing things as simple as possible could be a good advice to reduce workload.

Collapse
 
codewithshahan profile image
Programming with Shahan

Yep.. small changes, big results.