Step by step || Performance optimization in electron application

 Performance optimization in electron application

Introduction

Hello my I am JHM, I am an electron js developer 

Electron js technology uses Chromium under the hood it's the same technology chrome browser uses. Even if chrome browser is one of the most used browsers out there, it is still infamous for its high CPU and memory usage.  electron js application also consumes more ram and CPU  . better performance is always needed in any desktop application for better acceptance in the real market. After development, it becomes very important to optimize the application but mostly we don't find any specific way to start with. I was also continuously searching for articles related to electron js optimization but I haven't found anything specific for my needs. so here in this article, I will discuss all those ways I tried and got results to improve performance.

Keep your eye on changes you have made

It might sound stupid but this is the easiest way to track where is the problem this technique will not only save your time but also the headache of searching root cause of low performance. you can simply undo the things which you think was working fine .

Load distribution

I remember while I was working on an electron js application I faced a situation where my application was freezing the entire system. I was not even able to close my application. This usually happens when you block the main thread of your application. As we know electron js application has three types of Processes

1. Main Process

2. Renderer Process

3. Gpu Process

 

Among this Main thread is very very important its backbone of electron js application  always make sure you will put a minimum load on main thread otherwise your application we start responding slowly 

Too many IPC calls, So many Intervals, Huge mathematical calculations, More CPU-intensive tasks are some common reasons to block the main thread.

Here we know we need to load balance the things but now the question is how to load balance the app without breaking functionality?

This depends on code to code but lets me make it easy for you. when we say load balancing we mean distributing a load of processes with other processes.

E.g if currently, you have one process doing everything then create one more process and distribute the load.

But there are two different ways to create a subprocess

1. Child process

2. Hidden renderer process

You can make use of a child process when your code is completely independent and when you need electron js in the process they always preferred to use the hidden renderer process because it will give you the interface of electron js.

https://www.npmjs.com/package/electron-load-balancer

Check heap memory 

Heap memory is used to save your strings functions objects etc in the memory on a temporary basis it automatically gets cleans up by our v8 but sometimes if code has some problem it continuously keeps up heaping which is not good so keep tracking your heap memory utilization also if it's increasing that's okay but it should come down after some time.

To track memory you can use electron native contentTracing API or you can use heap snapshot npm module

https://www.npmjs.com/package/heapsnapshot

This package will help you to record data in separate files to make or generate graphs. It creates a “.heapsnapshot” file at a given location which you need to open in your Dev tools -> performance -> upload button. The moment you open that the graphs will generate which will show the status of heap memory initially it will show details of all types of memory but you just need focus on JS Heap section to observe the graph line it should go up and it should come down if it's not coming down the there is something wrong in code and your app is facing an issue of memory leakage.

Check GPU Acceleration

In the electron, we have an option given then to disable GPU acceleration. Sometimes when you are developing any game or you want to use some library that requires high graphics then that time GPU acceleration is important but if you are using just a normal app then that time consumes more ram and CPU unnecessary read more about it.

https://www.electronjs.org/docs/tutorial/offscreen-rendering#gpu-accelerated

If you want to disable GPU acceleration the simply use 

app.disableHardwareAcceleration() 

I personally found a big drop in CPU and memory usage when in disabled GPU acceleration.

Conclusion

here we have seen what could be the possible reasons that can slow down or freeze your electron js application and solutions to improve performance.