Power Up Your JavaScript Performance

Photo by Geeky Shots on Unsplash

As someone living (and coding) in a time reliant on technology and the internet, surely, you’ve also become dependent on performance speed. How many times have we all gotten frustrated and refreshed because 5 seconds of waiting felt like FAR too long? 5 SECONDS!

With dial-up days feeling like a distant memory, the user experience can hinge on performance speed. The most widely used browsers (Google’s V8, Firefox’s SpiderMonkey, etc) have pretty efficient JavaScript engines but, as developers, it’s important to be aware of how you can adjust your code to boost memory optimization and performance.

An Intro to Garbage Collection

Before jumping into what adjustments WE can make, regarding performance, let’s take a look at what JavaScript is doing behind the scenes. In the Memory Lifecycle of any programming language the cycle works as such:

  1. Allocate the memory needed (i.e. create a variable)
  2. Use the allocated memory (i.e. pass that variable as an argument)
  3. Release the memory when no longer needed

Hmm, once programs start getting complex, it seems like it’d be a lot of work to track down the point where an object isn’t needed anymore … and programmers are lazy. Lucky for us, JavaScript has a built in solution for that step — garbage collection. The primary notion of garbage collection is that an object is released from memory once that object is no longer reachable, meaning they are no longer accessible or useable somehow.

A very primitive example of garbage collection would be if we declare a variable to be used at the beginning of our program and overwrite it later in the code. In terms of memory, that original declaration of the variable is no longer “reachable”, so our garbage collector will trash it, or release that memory space. Garbage collection can, of course, get much more complex (and we won’t get into that) but, for our purposes, just know that it’s being performed automatically to free up memory while your program is running.

Great, but what can I do?

It’s great to understand that JavaScript is already helping us out but there MUST be something else (besides utilizing DRY coding principles) that can help with our app’s performance. When starting out in JavaScript, these are a few things to keep an eye on regarding performance:

  1. Local variables are your friend: It’s a general best practice in JavaScript to declare variables locally to avoid unnecessary scope nightmares and it can also help your program run smoother! Remember how the garbage collector releases something from memory once it’s unreachable? It’s a lot more unlikely and will take a lot longer for global variables to be deemed unreachable, keeping them in the browser memory.
  2. You’re a developer — use the developer tools! Chrome (my browser of choice) has some pretty cool things built in for us to work with. Check out the Memory tab in your browser dev tools, next time you run an application. Choose the snapshot option to see what pieces of your code are taking up the most time when running your program. If any percentage is super high, you’ll know that’s a good place to revisit.
Snapshot of a Single-Page App in Chrome

3. Clean your HTML, chunk your DOM: Interacting with the DOM is critical in building a JavaScript app, but should be done intelligently. Somewhat obviously, the less HTML divs that your code has to parse through, the faster the DOM speed will be. Similarly, if you have a ton of difference functions making DOM calls in your .js file, it’ll slow everything down. If you’re able to group DOM actions together, it’ll help avoid screen re-rendering, and excess DOM traversals, among other things.

Clean up that code!

4. Single responsibility saves speed: One of the earliest code principles I learned at Flatiron was that if your method/function is doing more than one thing, it’s doing too much. If your function/loop/array is only performing one (or very few) actions, it can be completed and garbage collected much faster, than if it has to go through several steps.

5. Meh, let’s minify: Can’t be bothered with refactoring but have suuuuper long .js files and a lot of them? You can always minify. Fair warning — this makes code MUCH harder to read, so it isn’t necessarily recommended. It will remove all of the white space within your code, so while it’s not reader-friendly, it’s much quicker for your browser to parse. A simple Google search will return several minifying options.

This is a very elementary introduction to memory storage and performance speed of JavaScript apps, but I’m excited to build, test, and learn more. Do you have any performance-enhancing tips that have made your life as a developer easier?

^ You and your speedy code

Sources:

http://www.monitis.com/blog/8-tips-for-improving-your-javascript-performance/

https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/