Main Key Takeaways
Runtime Performance Optimization
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 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.
- Preallocate and/or reuse arrays or objects to reduce garbage collection instances.
- 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.
- 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.
- Defer long running processes to other threads – either use web workers in frontend or worker threads/child processes in backend.
- In the frontend there’s a whole bunch of rendering concerns you can optimize:
- 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.
- Use virtual/infinite scroll or pagination in order to show long lists – this way, the layout calculations will take significantly less time to run.
- 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.
- Make sure that during animation your event loop iterations take less than 16ms for the user to perceive smooth animation.
- 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.
Testing frontend applications performance in the browser
- Open the chrome developer tools while we are in our application
- Go to the Performance tab
- Start recording
- Perform a scenario in your app you suspect creates a performance issue
- Stop the recording
- 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
- Start your node application with the –inspect flag (e.g. `node –inspect index`)
- Open chrome and browse to `chrome://inspect`
- Click on `Open Nodejs dedicated dev tools`
- In the new window that opens, go to the profile page and start profiling
- Perform a scenario in your app you suspect creates a performance issue (e.g. an api call using postman)
- Stop the recording
- 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.
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:
- An easy, effective way to TEST your code and find places to make improvements
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.
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.