Electron 性能优化概览

┌─────────────────────────────────────────────────────────────┐
│                      Main Process                            │
│  - 管理 App 生命周期                                          │
│  - 创建 BrowserWindow                                        │
│  - 原生 API 调用                                              │
│  - Node.js 环境                                               │
└─────────────────────────────────────────────────────────────┘
           │ IPC (Inter-Process Communication)
           ▼
┌─────────────────────────────────────────────────────────────┐
│                   Renderer Processes                         │
│  - 渲染 Web 页面                                              │
│  - Chromium 环境                                              │
│  - DOM / CSS / JavaScript                                    │
│  - 每个窗口独立进程                                           │
└─────────────────────────────────────────────────────────────┘

App Launch
    │
    ├── Node.js 环境初始化          ─┐
    │   └── 模块加载与解析            │ 主进程
    │                                │ (同步阻塞)
    ├── Electron 主进程初始化       ─┘
    │
    ├── BrowserWindow 创建          ─┐
    │   └── Chromium 环境初始化      │ 渲染进程
    │                                │
    ├── 页面加载与渲染              ─┘
    │   ├── HTML 解析
    │   ├── CSS 解析
    │   ├── JavaScript 执行
    │   └── 首帧渲染
    │
    └── 应用就绪 (TTI)

// ❌ 同步 IPC - 阻塞渲染进程
const result = ipcRenderer.sendSync('get-data')
 
// ✅ 异步 IPC - 不阻塞
const result = await ipcRenderer.invoke('get-data')

// 主进程启动时间
console.time('app-ready')
app.whenReady().then(() => {
  console.timeEnd('app-ready')
})
 
// 渲染进程性能
const timing = performance.getEntriesByType('navigation')[0]
console.log({
  domContentLoaded: timing.domContentLoadedEventEnd - timing.startTime,
  load: timing.loadEventEnd - timing.startTime
})
 
// 实时 FPS 监控
let lastTime = performance.now()
let frames = 0
function measureFPS() {
  frames++
  const now = performance.now()
  if (now - lastTime >= 1000) {
    console.log(`FPS: ${frames}`)
    frames = 0
    lastTime = now
  }
  requestAnimationFrame(measureFPS)
}

// 1. 虚拟滚动 - 大列表优化
import { FixedSizeList } from 'react-window'
 
<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={35}
>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</FixedSizeList>
 
// 2. requestAnimationFrame - 动画优化
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate)
}
 
// 3. Web Worker - 耗时任务
const worker = new Worker('compute.js')
worker.postMessage({ data: heavyData })
worker.onmessage = (e) => handleResult(e.data)
 
// 4. CSS 优化
.optimized-element {
  will-change: transform;
  transform: translateZ(0);
}

// 自动打开 DevTools
win.webContents.openDevTools()
 
// 性能分析
// 1. Performance 面板 - 录制运行时性能
// 2. Memory 面板 - 堆快照分析内存泄漏
// 3. Layers 面板 - 查看渲染层结构

import { app } from 'electron'
 
// 获取进程指标
const metrics = app.getAppMetrics()
metrics.forEach(m => {
  console.log(`PID: ${m.pid}, Memory: ${m.memory.workingSetSize}KB`)
})
 
// GPU 信息
const gpuInfo = await app.getGPUInfo('complete')
console.log(gpuInfo.auxAttributes)
 
// 进程内存
const usage = process.memoryUsage()
console.log({
  rss: `${(usage.rss / 1024 / 1024).toFixed(2)} MB`,
  heapUsed: `${(usage.heapUsed / 1024 / 1024).toFixed(2)} MB`
})