If your Javascript code is running slower than you'd like, or if you just want to know how to make your code faster regardless, stick around for some easy to implement ways of making your Javascript run faster
Bottom of Webpage
To make your webpage's loading faster, make sure your Javascript code is at the bottom of your HTML webpage's body
tag.
Web Workers
If your webpage uses time-intensive Javascript operations, web workers can save you a lot of time. Using web workers can mean the difference between an unresponsive and slow webpage, and a smooth running and fast webpage.
Web workers are separate threads created by your main Javascript code to work in parallel with the main process.
You can read about web workers and their JS implementation here
Saving DOM Elements
When manipulating the same DOM element multiple times, to speed up your code, you should define it once and then keep referencing it.
No
const el1 = document.getElementById("demo");
el1.style.color = "green";
const el1 = document.getElementById("demo");
el1.style.color = "blue";
const el1 = document.getElementById("demo");
el1.style.color = "pink";
Yes
const el1 = document.getElementById("demo");
el1.style.color = "green";
el1.style.color = "blue";
el1.style.color = "pink";
Reduce Library Dependancies
Loading libraries in JS can take up a lot of time, make sure to remove any unneeded library dependancies in your Javascript code.
Reduce Loop Activity
In Javascript, loops can take quite a lot of time to finish running. A simple way to make your JS loops run faster is by defining the loop parameters before the loop itself.
No
for (let g = 0; g < arr.length; g++) {
Yes
let arrlen = arr.length;
for (let g = 0; g < arrlen; g++) {
This will speed up your for loop because now, instead of getting the length of the "arr" array every single iteration, it will get that value once and reuse it throughout every iteration.
Avoid Global Variables
Global variables can slow down your JS code. When defining a variable for the first time, make sure to add the var
prefix to make it a local variable instead of a global one.
No
v1 = 9
Yes
var v1 = 9
Conclusion
I hope that these were helpful.
Top comments (7)
Reduce Loop Activity
You should try it yourself. If it's faster at all, we're moving in the realm of micro-optimization
I'm confused about how this works. On my end it looks like the
1
metrics (which are supposedly faster) returns a larger number than the2
metrics?I was getting values similar to:
How and why?
That's why I wrote, if it's faster at all...
Yea I noticed that and wanted more insight, so I dug into it more.
It would appear the execution speed is affected by the order/definition.
I saw improvements when flipping the order of execution where the "faster" method goes second, rather than first and the execution ends up faster. I'm not really sure why this is.
I also removed the slower/faster pieces of code so the code only focuses on only 1 implementation and got similar behavior where the faster version does go faster, but only a little.
So end all, yes the "faster" optimization is an optimization. But even then you're only looking at slightly faster execution speeds in the realm of
.05
of a second improvements for 10 million elements. (at least on my machine)For that last one, it depends on where you're creating your variable. You declared a global variable in both cases if you're in the global context. Also, globals dont slow down code. They can make understanding and maintaining your code more difficult if used improperly.
I have a question about the reduce loop activity. Why it's not the same using array.length or a local variable? Array.length is not a method so why there will be less activity?
Because code needs to look for property every time for loop iterates and then send the property value, when you store the result of Array.length, it's just a number, your code doesn't need to look for anything, it can just pass the value.
That's why it faster, I am not sure if the speed difference matters that much. Probably not.