DEV Community

Cover image for Avoid slow Javascript code

Avoid slow Javascript code

Oscar Ortiz on June 14, 2021

Table of contents Introduction Unused Variables Loop Activity Javascript Loading Decreasing Dom Access Conclusion Introducti...
Collapse
 
hadaward profile image
Hadaward

There is another way to do the for loop:

for(var i=0, k=arr.length; i < k; i++) {}

The first division to define "i" is always called once and you can define as many variables as you like, this is even better because instead of creating a global variable you can use "let" and make local variables (it has better performance and keeps the code organized)

Collapse
 
metalmikester profile image
Michel Renaud

The examples in the article should use let instead of var anyway. Nice one with the "k" in your example.

Collapse
 
cleveroscar profile image
Oscar Ortiz

You’re are correct, I still need to revise it and edit it! I really appreciate the feedback!

I know “let” is the new way to declare variables and “var” was pretty much the old school way.

Thread Thread
 
metalmikester profile image
Michel Renaud

It's not so much "new" vs. "old" school as they are not quite the same. "var" is basically available everywhere whereas "let" is limited to a scope.

Collapse
 
amansaxena001 profile image
Amansaxena001

Block scope is best either with let or IIFE

Collapse
 
lexlohr profile image
Alex Lohr

Accessing the length outside the loop can sometimes make it easier to read for the developer, but also just like that you have implemented a faster loop iterator.

Loops are already heavily optimized in most JS interpreters. Unless the length could change inside the loop, the length will be cached by the engine.

If you don't need to break or return from inside the loop, consider using array methods like forEach, reduce or map, which too are already optimized and can improve readability in some cases.

Collapse
 
lexlohr profile image
Alex Lohr

That being said, never forget the golden rule of performance: avoid premature optimization. And also the corollary: performance is more often an issue than you think.

Developers usually have strong PCs, unlike most of our user base, so negligible bottle necks for us may be the reason for them to dislike our product for being slow or draining their device's battery.

Collapse
 
valeriavg profile image
Valeria

Optimization needs to be measurable. You wont notice memory leaks by looking at the code. Instead, you should use profiler, lighthouse and other utilities at hand to find and mitigate performance problems. Unused variables are bad for readability but they hardly have any effect on the performance

Collapse
 
jamesthomson profile image
James Thomson

Exactly. Unless the unused variables are being constantly re-declared there should be no performance implications. The GC will clear it up from memory pretty quickly.... not that I'm condoning leaving unused variables in your codebase, but I think this is a moot point in terms of performance.

Collapse
 
cleveroscar profile image
Oscar Ortiz

You’re right! I appreciate the feedback! I’ll make sure to add some of your info into the details.

I appreciate the feed back!

Collapse
 
val_baca profile image
Valentin Baca

It's been a while, but I actually ran the numbers on micro-optimizing the array-for-loop. Granted, this was pre-ES6 and the jsperf site is now gone, but I found that this was the fastest loop:

for (var i = 0, len = myArray.length; i < len; ++i) {
  // blah blah
}
Enter fullscreen mode Exit fullscreen mode

stackoverflow.com/questions/534942...

Collapse
 
rubinelezi profile image
Rubin Elezi
  • "Decrease DOM Access" That is very true, I have written a article about accessing the DOM as less as possible. A example can be when you are adding multiple elements to the DOM, with data maybe coming from an API. You should not attach them one by one, this is a huge performance killer on low end devices.

For more you can read: dev.to/rubinelezi/stop-touching-th...

Collapse
 
mwrpwr profile image
Joseph Maurer

You should do another post about ways to profile and speed up JavaScript! Good post!

Collapse
 
emil profile image
Emil • Edited

I think Array.length is very cheap since the size is not determined on each access

Collapse
 
cleveroscar profile image
Oscar Ortiz

Woah! Thank you guys so much for all the feedback and support! I promise to fix my mistakes and reword things to help myself and those understand better.