Electron crossplatform performance

Electron Cross-Platform Performance & Architecture

Process Architecture & Isolation

Electron applications operate across distinct processes isolated by Chromium sandboxing. Enterprise applications must maintain strict process boundaries:

+-------------------------------------------------------------------------+
|                              Main Process                               |
|  - Node.js Environment (Full System Privilege)                          |
|  - Manages Application Lifecycle & Native Menus / Tray                  |
|  - Controls BrowserWindow instances & Native APIs                       |
+-------------------------------------------------------------------------+
       |                                              |
       | IPC (ContextBridge)                          | UtilityProcess API
       v                                              v
+-----------------------------+         +---------------------------------+
|     Renderer Process        |         |        Utility Process          |
|  - Chromium Web Engine      |         |  - Background Node.js Work      |
|  - Isolated DOM Rendering   |         |  - Non-blocking CPU tasks       |
|  - `nodeIntegration: false` |         |  - Heavy Data Ingestion         |
|  - `contextIsolation: true` |         +---------------------------------+
+-----------------------------+

---

Security Hardening & Safe IPC Design

1. Mandatory Secure BrowserWindow Configurations

Enforce strict security flags on all BrowserWindow instances:

// main/windowFactory.ts
import { BrowserWindow, app } from 'electron';
import * as path from 'path';

export function createSecureWindow(): BrowserWindow {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    show: false, // Prevent white flashing during load
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      contextIsolation: true,       // Enforce IPC bridge separation
      nodeIntegration: false,        // Disable node access in renderer
      nodeIntegrationInWorker: false,
      sandbox: true,                 // Enable Chromium Renderer Sandbox
      webSecurity: true,             // Enforce Same-Origin Policy
      allowRunningInsecureContent: false,
    },
  });

  win.once('ready-to-show', () => {
    win.show();
  });

  // Enforce Navigation Restraints
  win.webContents.on('will-navigate', (event, url) => {
    const parsedUrl = new URL(url);
    if (parsedUrl.origin !== 'https://app.yourdomain.com' && !url.startsWith('file://')) {
      event.preventDefault();
      console.warn(`Blocked unauthorized navigation to: ${url}`);
    }
  });

  // Prevent New Windows / Popups
  win.webContents.setWindowOpenHandler(({ url }) => {
    // Open external URLs in default system browser securely
    if (url.startsWith('https:')) {
      require('electron').shell.openExternal(url);
    }
    return { action: 'deny' };
  });

  return win;
}

2. Type-Safe ContextBridge IPC Layer

Preload Script (preload/index.ts):

import { contextBridge, ipcRenderer } from 'electron';

export interface DesktopAPI {
  fetchSystemStats: () => Promise<{ cpuLoad: number; memoryFreeMB: number }>;
  onUpdateStatus: (callback: (status: string) => void) => () => void;
}

const api: DesktopAPI = {
  fetchSystemStats: () => ipcRenderer.invoke('system:get-stats'),
  onUpdateStatus: (callback) => {
    const handler = (_event: unknown, status: string) => callback(status);
    ipcRenderer.on('app:update-status', handler);
    // Return cleanup function to prevent memory leaks
    return () => ipcRenderer.removeListener('app:update-status', handler);
  },
};

contextBridge.exposeInMainWorld('desktopAPI', api);

Main Process IPC Handler (main/ipcHandlers.ts):

import { ipcMain } from 'electron';
import * as os from 'os';

export function registerIpcHandlers() {
  ipcMain.handle('system:get-stats', async (event) => {
    // Validate sender frame identity
    if (!event.senderFrame.url.startsWith('file://') && !event.senderFrame.url.startsWith('http://localhost')) {
      throw new Error('Unauthorized IPC invocation');
    }

    const freeMem = os.freemem() / (1024 * 1024);
    const loadAvg = os.loadavg()[0];

    return {
      cpuLoad: Math.round(loadAvg * 100) / 100,
      memoryFreeMB: Math.round(freeMem),
    };
  });
}

---

Memory Management & Performance Tuning

1. Offloading Heavy Computation to utilityProcess

Never execute CPU-intensive tasks (PDF parsing, compression, cryptography) in the main process or renderer thread.

// main/utilityManager.ts
import { utilityProcess, MessageChannelMain } from 'electron';
import * as path from 'path';

export function runBackgroundJob(taskData: any): Promise<any> {
  return new Promise((resolve, reject) => {
    const child = utilityProcess.fork(path.join(__dirname, 'workerTask.js'));

    child.on('spawn', () => {
      child.postMessage({ type: 'START_TASK', payload: taskData });
    });

    child.on('message', (message: any) => {
      if (message.type === 'SUCCESS') {
        resolve(message.result);
        child.kill();
      } else if (message.type === 'ERROR') {
        reject(new Error(message.error));
        child.kill();
      }
    });

    child.on('exit', (code) => {
      if (code !== 0) reject(new Error(`Worker exited with code ${code}`));
    });
  });
}

2. V8 Garbage Collection & Memory Leak Prevention

• Avoid Global Listeners: Always unregister ipcRenderer.on listeners when React/Vue components unmount.
• Window Dereferencing: Always set window reference variables to null on window close to allow GC.

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  mainWindow = createSecureWindow();
  mainWindow.on('closed', () => {
    mainWindow = null; // Essential for V8 memory cleanup
  });
}

3. Chromium Command Line Performance Flags

Configure optimized runtime parameters before app initialization:

// main/index.ts
import { app } from 'electron';

// Hardware acceleration tuning
app.commandLine.appendSwitch('enable-gpu-rasterization');
app.commandLine.appendSwitch('enable-zero-copy');

// V8 Memory limits for resource-constrained clients
app.commandLine.appendSwitch('js-flags', '--max-old-space-size=4096');

// Disable unneeded features to save startup time
app.commandLine.appendSwitch('disable-breakpad'); // If custom crash reporter is used

---

Cross-Platform OS Customization

Feature	Windows	macOS	Linux
Window Frame	Windows Mica / Acrylic API	Vibrancy / Title Bar Overlay	Standard GTK decorations / Frameless
App Updates	NSIS / Squirrel.Windows	autoUpdater with Signed DMG/Zip	AppImage / DEB / Snap
Shortcuts	Ctrl+Shift+X	Cmd+Shift+X	Ctrl+Shift+X
Tray / Dock	System Tray notification icons	Dock badge & context menu	AppIndicator / StatusIcon

---

Common Anti-Patterns & Critical Pitfalls

Anti-Pattern	Impact	Architectural Fix
remote Module Usage	Severe performance degradation & critical remote code execution vector	Use explicit ipcMain.handle / ipcRenderer.invoke
Sync IPC (sendSync)	Freezes Chromium renderer event loop, causing visual stutter	Use asynchronous invoke / handle promise patterns
Synchronous Node File System Calls in Renderer	Unresponsive UI render thread	Delegate file operations to Main/Utility processes asynchronously
Orphaned IPC Event Listeners	Memory leak holding DOM elements in V8 heap	Return and invoke unbind functions on component destroy
Missing Content Security Policy (CSP)	Susceptible to XSS leading to native system compromise	Serve strict CSP headers: default-src 'self'; script-src 'self'