Javascript JS performance optimization

A Developer’s Guide To JavaScript Performance Optimization

Learn how to test, measure and optimize JavaScript performance. Detect and fix common problems with Runtime, Memory and Efficiency of your web app. Find out how it can lower cloud costs and even increase the revenue.

JavaScript performance is a huge topic that should be divided into a few categories. In this article we will go over the basics of JavaScript runtime performance that are related to both frontend and backend (a.k.a. Node.js). We will learn how it can affect your application and how to detect and fix problems.  I’ll also share the tips and tricks I’m personally using in applications I’m building in production daily.

Main Key Takeaways

Runtime Performance Optimization

Runtime performance is the concept of the application’s run after it started. For instance – how long does it take for a function to complete? Does a certain process cause a memory leak and slow your app? Pay attention, because these concepts apply both to frontend and backend JavaScript.

Our JavaScript process runs on a single main thread. There are other “helper” threads that offload some of the work, but our functions run on that single main thread. Our functions are initiated by the Event Loop – which holds a queue of tasks (our callbacks) and runs them when the right time comes (timers run out, promises resolve, listeners triggered etc.).

This is why we’d like our functions to run faster. While a function is running, nothing else can happen in the application. Most notably – the application cannot respond to events happening. In the frontend it would leave frustrated users trying to click a button that’s not responding. In the backend, it might make whole pipelines fail due to timeouts or worse – a timeout and a very late suddenly unexpected response.

The importance of memory monitoring and detecting leaks

Memory monitoring is also critical. Our application needs memory to create new objects (and almost everything is an object in JavaScript). If we are not careful, we might initiate more Garbage Collection processes than necessary – which will affect our main thread, as Garbage Collection runs (partially) in the main thread. 

Memory leaks are also a common hazard – if our memory leaks, the application will run slower over time. Garbage Collection cycles will get longer, memory allocation will take longer, cache misses will be more likely to happen – all will contribute to our app slowing down.  In most cases, leaks eventually lead to the app crashing altogether. 

All of the effects above, besides the fact they ruin user experience, cost money. A slow application loses customers, costs more in cloud costs and developers are struggling to just debug and wait for the application to load or run a certain pipeline. It might also lead to strange race conditions and unexpected system behavior.

How to Improve JavaScript Performance?

Here are 7 (lucky number: ) JavaScript performance optimization tips I’m personally using to optimize my application’s runtime. Just follow my checklist below to make sure your application runs as it should

  1. Measure performance – JavaScript engines and ecosystem offer you lots of tools to measure performance. Profile application’s use cases that are critical or widely used to see if a certain function can be optimized or if there’s a memory leak and fix it.
  2. Preallocate and/or reuse arrays or objects to reduce garbage collection instances.
  3. Make sure that for every listener or timer created, there’s a handler that’s responsible to turn it off once it is not needed. This will reduce the chance to have a memory leak.
  4. Chunk your processes into smaller processes – for instance, a function that’s taking 500ms to run might be chunked to 10 50ms pieces and thus allow other processes to run in between.
  5. Defer long running processes to other threads – either use web workers in frontend or worker threads/child processes in backend.
  6. In the frontend there’s a whole bunch of rendering concerns you can optimize:
    1. Avoid layout/forced reflow – don’t measure the DOM after mutating it in the same event loop iteration. Use requestAnimationFrame in order to do the measurement in a later iteration.
    2. Use virtual/infinite scroll or pagination in order to show long lists – this way, the layout calculations will take significantly less time to run.
    3. Make sure your functions take 50ms or less to run, in order to make sure every user interaction gets a response in less than 100ms.
    4. Make sure that during animation your event loop iterations take less than 16ms for the user to perceive smooth animation.
  7. Do not micro-optimize – if there’s no need to optimize, don’t. If you find yourself comparing native methods like foreach and map – it’s a good hint you are micro-optimizing. And always profile to see if you really need to optimize.

With the tips above, you can boost your JavaScript performance right now and they’re quick to implement. After completing those steps your application will run much smoother. 

Good job!

How To Perform JavaScript Performance Test?

The first tip is, for me, the most critical tip. Optimizing your JavaScript application without profiling it is like trying to decide what food is most delicious without tasting it.  You will find yourself at a guessing game. 

Testing frontend applications performance in the browser
  1. Open the chrome developer tools while we are in our application
  2. Go to the Performance tab
  3. Start recording
  4. Perform a scenario in your app you suspect creates a performance issue
  5. Stop the recording
  6. Analyse the results

From the profile you can see how long it took functions to run, how much time was spent on rendering and what function caused it. Moreover, you can see the amount of Garbage Collection invocations and the level of memory at all times and easily detect hints for memory issues like leaks.

Once you find the source of the performance issue, you can fix it. If you find a memory leak, you can use the memory tab in chrome dev tools to easily find a leak.

Testing Node.js applications performance
  1. Start your node application with the –inspect flag (e.g. `node –inspect index`)
  2. Open chrome and browse to `chrome://inspect`
  3. Click on `Open Nodejs dedicated dev tools`
  4. In the new window that opens, go to the profile page and start profiling
  5. Perform a scenario in your app you suspect creates a performance issue (e.g. an api call using postman)
  6. Stop the recording
  7. Analyse the results

You already know what to expect here. You get functions drill down and how long each function took to run. This way, you can focus on long running functions and possibly optimize them. You do not get memory information (except garbage collection instances).

For memory, you can head over to the memory tab – which is similar to the memory tab for frontend applications.

Summary

JavaScript performance is a broad subject. In this article we talked about Runtime Performance. Understanding JavaScript runtime performance techniques can be critical for your applications. Especially when JavaScript applications have become so feature rich and critical.

Frontend and Backend in JavaScript, while sharing common traits utilizing JavaScript engine performance, are each a broad subject in itself. In this article we touched briefly on each topic and highlighted most of the common traits and practices related to performance.

We also learned how to test performance both in frontend and Node.js applications.

Applying the principles in this article – both in front and back end, will make sure your application will run faster, boost your app’s user experience and save money on cloud costs.


Once in a week I publish a FREE newsletter for developers and programmers who are interested in taking their skills to an expert level.

And I invite you to sign up right now. Just a few of my optimization techniques can make a big difference to the performance of your applications.

Sign Up for our FREE newsletter and get our best articles delivered to you by e-mail


What you will learn:

  • How to make simple changes to your code to achieve the HIGHEST JavaScript performance possible
  • An easy, effective way to TEST your code and find places to make improvements
  • Practical tips on how to improve JavaScript MEMORY performance and reduce garbage collection
  • An expert advice on JavaScript from the leading programmers in the field
  • JavaScript Performance hacks and shortcuts to save you time and boost efficiency

Enter your name and email to access your FREE membership

*** We take your privacy very seriously. We hate spam as much as you do, so rest assured that your contact details will never be shared with a third party.

JavaScript Performance Optimization Tips

Node.JS performance optimization

Easy ways to test and improve Node.js performance

Here’s how to measure Node.js code efficiency and significantly boost Node’s performance. Simple tips that will improve your Nodejs code CPU and memory consumption.

JavaScript Memory leaks

Here’s how to find and fix memory leaks in JavaScript

JavaScript memory leaks can be easily found and fixed when you know what and where to look for. To spot a memory leak you need to follow those easy steps.


JS garbage collection

How to optimize JavaScript garbage collection

Find out how garbage collection works in JavaScript and what exactly you need to fix in order to achieve the highest performance of your application.