Cover image by Fachstelle für Öffentliche Bibliotheken NRW on Flickr.
If you're a bit like me you probably think a lot about how to make your software even better. One big point of cause is, to increase the performance TO THE MAX. Today I'll tell you the well kept performance secrets senior JS devs hiding from you.
1. Global variables only
Shadowing clutters your metal model of the software and often you need access to stuff you didn't anticipate when starting your project. If you always reuse your global namespace, you can be safe not to clutter your memory.
// instead of
const a = "Hello";
const b = "World";
// write
a = "Hello";
b = "World";
2. Short variable names
Never go over board with the length of a variable, parsing time is a big problem in modern JavaScript, so only use more than one letter for a variable name when your global namespace is finally full.
// instead of
loginTimeout = 2300;
// write
a = 2300;
3. Don't use functions
Functions are the root of all evil! Not only do they add mental overhead to your code by cluttering it with indirections, they also slow it down. So when in doubt, always in-line your code.
// instead of
const substract = (x, y) => x - y;
a = substract(2000, substract(500, 50));
// write
a = 2000 - (500 - 50);
4. setTimeout all the way
Often you need to get stuff done quickly and the synchronous way is just not what cuts it. The best thing to do is replacing all the loops with setTimeout calls, so the event-loop takes care of everything.
// instead of
let x = 1;
while (x < 1000) {
console.log(x);
x++;
}
// write
x = 1;
const fastLoop = () => {
console.log(x);
x++;
if (x < 1000) setTimeout(fastLoop, 1);
}
fastLoop();
5. Object access through with
If you've written any amount of meaningful JavaScript code in your life, you probably ended up with huge objects that you need to dig deep into. Would't it be nice to get rid of all these dots operators that slow you down while you code? Well the with operator got you covered here. Less code to parse means faster code.
// instead of
console.log(u.profile.name);
console.log(u.profile.birthday);
console.log(u.profile.town);
// write
with(u.profile) {
console.log(name);
console.log(birthday);
console.log(town);
}
7. Cached randomness
Get yourself to the next tabletop shop and buy a bag of dice. They will help you to get random values you can cache in constants for later use. Calculating random values is rather slow and should be done static.
// instead of
myRandomNumber = Math.random();
// write
r = 17;
Conclusion
There are many easy ways to speed up your code that even starters can follow. It's already the 1st of April 2018, so I don't understand why we should settle with slow software.
April Fool's!
Top comments (30)
Holy fuck, it took me way too long to realize this was a joke :D
Well done, sir!
slow clap
I went through the first first one thinking I'm not so sure about that, does it really increase performance though? Got to the second one and thought I guess this makes sense, but readability-wise no... "no more than two letters"... ohhh, I see what's going on here.
This will start popping up in search results given the organic boost of dev.to and a lot of newbies will NOT know this was a joke...not everybody reads the conclusion! You might want to consider changing the post title sometime in the future.
Reading this in mid-August meant I didn't realize it was an April fool - I certainly wasn't fooled that these were performance improvements. Instead, it read to me like a snarky jibe aimed at those seasoned ex-perl devs and the like who had some very bad habits. Those habits happened to serve fairly well as a way of keeping one's job.
Haha, interesting interpretation :D
I never used Perl, I just read once that it was the reason PHP was invented and if you had to invent PHP to solve something, things probably went awry XD
Just so I don't get flamed, I did say "perl and the like"! PHP started life as 2 perl scripts designed to make perl easy to use to create web pages, from there it exploded into the most popular web programming language for a good 10 years.. can't have been that bad! PHP4 did have some crazy performance hacks that made it run faster, like not splitting your classes into separate files, just one long huge file made a super difference to performance!
Just was making fun here :)
I started my career with PHP and was a PHP developer for 5 years or so.
I did laugh hard over your suggestions, but I just had to try number 4 in console, what a hilarious way to code! x'D
Now I understand that you tried to go from simple to complex ideas, but variable names really ring a bell that this is a joke - maybe little too early.
Translate to spanish and post it december 28th.
Great article K! Any downside of each code you introduced? By the way, you post is appeared on April 2nd in Japan :). So you should be serious!
I was reasoning about how deferring things to the event loop like that would make things better when I realized the date this article was published xD
And, tbh, I only started really doubting things when I got to the with section :P