Performance Profiling – Chrome DevTools & Electron‑Performance

Performance Profiling – Chrome DevTools & Electron‑Performance

Chrome DevTools (renderer)

• Open DevTools → Performance panel.
• Record a session, look for long tasks, layout thrashing, paint time.
• Use performance.now() in your code to measure custom sections.

Main‑process profiling

const { performance } = require('perf_hooks');
const start = performance.now();
// … heavy work …
const duration = performance.now() - start;
console.log(`Main work took ${duration.toFixed(2)} ms`);

Memory profiling

• DevTools → Memory → take a heap snapshot.
• Look for detached DOM trees or large JS objects.

Use electron‑performance (third‑party)

npm install electron-performance

const { monitor } = require('electron-performance');
monitor(app);

It logs CPU, memory and event‑loop lag.