Electron js Profile all Processes and find performance bottlenecks
Introduction
Electron js is cross-platform desktop application development technology it uses chromium and node js. electron js is new still has good community support. We already have desktop application examples of VS code, slack, etc. this seems very cool technology and it is cool by the way but we need to be precise while choosing solutions we cannot simply install np packages and make use of it. We have to keep in mind application memory consumption habits if the application is consuming lots of memory then it is of no use.
There are server ways by which we can monitor your physical memory consumption by your application in real-time (we can use task manager in windows and system monitor in Linux i am sure mac also have something similar ). These stats will give us information such as physical memory consumed, number of threads are in use, CPU load, network information, etc.with this information we can find our application consuming more memory than expected or not, if yes then we must fix it as soon as possible. but how will we find where is the exact problem we need to profile our application first.
The electron has three types of process Renderer process, main process, and GPU process among these Profiling the renderer process is very easy we can simply use browser dev tools to profile it but with this approach, we can only profile the renderer process, not the main process and GPU process. We need some technique that will give users information about every single process running in the application.
What is Profiling
While developing any application developer use packages carelessly initially developer main focus remains on making it working and adding functionality in this hustle-bustle possibility of things can get wrong simple things can make application complicated and more inefficient.developer can fix it if he knows everything about the software but what if any other person who doesn’t know about the software and trying to solve the issue he will get frustrated by finding it manually right to solve this issue developer use profiling technique.
Profiling is the name of a technique that helps the developer to look at what is happening inside of a running application. Using This developer can find the performance bottleneck of the application and solve it.
Electron js multi Process application profiling
As we know electron use a multi-process technique i.e main process, the renderer process, GUP process profiling all the process together is our main task luckily we have native APIs available but there is no direct way like we have (dev tools in browser ) we need to do some extra work to achieve this.
Step 1:
In the first step, we need to collect data from our running application we can use content Tracing Api of the electron.
In the main process/ Browser process (remember don’t write this in the renderer process) of your application.
const { app, contentTracing } = require('electron')
app.whenReady().then(() => {
(async () => {
await contentTracing.startRecording({
include_categories: ['*']
})
console.log('Tracing started')
await new Promise(resolve => setTimeout(resolve, 5000))
const path = await contentTracing.stopRecording()
console.log('Tracing data recorded to ' + path)
})()
})
This is a simple example to collect data from an application here we are using 5 seconds of the timer to collect data. it will collect data from the application for 5 seconds and create one “.temp” you will get this path after 5 seconds in your console.
Step 2
Now we have data we need to visualize this data now
1) Open your chrome browser open dev tools.
2) Go to the Performance tab. you will get the upload icon left-hand side of the upload that created the file in it you will get all data visualized.
On form left-hand side you can choose your process by process id and find the bottleneck in your application.
Conclusion
Here we learned about how to profile our multiprocess electron js application and how to find the bottleneck in our electron js application.
0 Comments