Electron 应用生命周期详解

应用启动流程

当用户双击 Electron 应用图标时，应用启动流程开始：

Electron 运行时环境初始化，加载 Electron 核心模块。
读取应用的 package.json 文件，获取应用入口脚本。
执行应用入口脚本，启动主进程。

主进程初始化

主进程是 Electron 应用的核心，负责管理应用生命周期、创建和控制窗口、处理原生事件等。主进程初始化过程包括：

注册应用事件监听器，如 ready、window-all-closed 等。
创建应用菜单、托盘图标等原生 UI 元素。
加载应用配置，如窗口大小、位置等。
创建主窗口，加载渲染进程。

以下是一个典型的主进程入口脚本示例：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载应用的 index.html
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

渲染进程创建

渲染进程负责运行应用的前端页面，每个窗口都有独立的渲染进程。渲染进程创建过程包括：

主进程创建 BrowserWindow 实例，指定渲染进程加载的页面。
Electron 创建对应的渲染进程，加载指定页面。
页面加载完成后，渲染进程开始工作，响应用户交互。

渲染进程与主进程之间可以通过 IPC 通信机制进行数据交换和方法调用。

应用退出流程

当用户关闭最后一个窗口或主动退出应用时，应用退出流程开始：

所有窗口关闭后，主进程触发 window-all-closed 事件。
根据应用设置决定是否退出主进程。在 macOS 上，一般不会直接退出应用。
主进程退出，应用退出流程结束。

可以通过监听 window-all-closed 事件来控制应用的退出行为：

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

主进程生命周期事件

除了应用级别的生命周期外，主进程本身也有一系列生命周期事件：

ready：Electron 完成初始化时触发。
window-all-closed：所有窗口关闭时触发。
before-quit：应用开始关闭窗口前触发。
will-quit：所有窗口已关闭，应用即将退出时触发。
quit：应用退出时触发。

通过监听这些事件，可以在应用生命周期的关键节点执行自定义逻辑。

渲染进程生命周期事件

渲染进程的生命周期与普通网页类似，主要事件包括：

dom-ready：页面 DOM 加载完成时触发。
did-finish-load：页面所有资源加载完成时触发。
did-fail-load：页面资源加载失败时触发。
will-navigate：页面即将跳转时触发。
crashed：渲染进程崩溃时触发。

可以在渲染进程中监听这些事件，执行页面初始化、数据加载、错误处理等操作。

最佳实践

为了构建高质量的 Electron 应用，以下是一些生命周期管理的最佳实践：

尽早完成应用初始化：在 ready 事件回调中执行应用初始化操作，提升应用启动速度。
正确管理窗口：及时关闭不需要的窗口，避免资源浪费。同时，在窗口关闭前执行必要的清理操作。
合理使用 IPC 通信：IPC 通信是连接主进程和渲染进程的桥梁，但过度使用会影响性能。应设计合理的通信机制。
异常处理：监听渲染进程崩溃、无响应等异常情况，并给出友好的用户提示和恢复机制。
定期检查更新：在应用启动时检查是否有新版本，提示用户更新。

以下是一个在主进程中检查应用更新的示例：

const { autoUpdater } = require('electron-updater');

app.on('ready', () => {
  autoUpdater.checkForUpdatesAndNotify();
});

应用启动流程​

主进程初始化​

渲染进程创建​

应用退出流程​

主进程生命周期事件​

渲染进程生命周期事件​

最佳实践​