6.2 多窗口管理与进程模型：单进程多窗口 vs 多进程多窗口

在 Electron 应用开发中，窗口的数量和进程的分配方式直接影响着应用的稳定性、内存占用和架构复杂度。理解“单进程多窗口”与“多进程多窗口”这两种模式的本质区别，是设计健壮桌面应用的前提。本节不会讨论晦涩的理论，而是从实际工程中常见的两种策略出发，帮你建立清晰的选择判断力。

6.2.1 Electron 的进程与窗口基础

在深入比较之前，有必要回顾一个关键事实：在 Electron 中，每一个 BrowserWindow 实例都运行在独立的渲染进程中，而整个应用只有一个主进程。 也就是说，无论你创建多少个窗口，每个窗口都会天然拥有自己的渲染进程，彼此的内存空间、JavaScript 执行环境都是隔离的。

这种设计直接继承了 Chromium 的多进程安全模型：一个标签页崩溃不会拖垮整个浏览器，同样，一个窗口的渲染进程崩溃不会导致其他窗口或主进程挂掉。但这里的“隔离”并不是没有代价——每个渲染进程都会额外占用约 50-100 MB 的内存（视具体页面复杂程度而定），进程数越多，系统资源消耗就越大。

基于此，所谓的“单进程多窗口”和“多进程多窗口”其实并不是指改变底层的进程模型，而是指开发者如何组织窗口与业务模块的关系。我们真正要讨论的是：是把所有窗口放在同一个渲染进程中，还是让每个窗口独立拥有进程？或者是用其他策略权衡资源与稳定性？

关键澄清： Electron 默认提供的渲染进程隔离意味着，你无法将一个 BrowserWindow 强制塞进另一个窗口的渲染进程中。所以“单进程多窗口”的实现方式并不是让多个窗口共享一个渲染进程（这在标准 Electron 中不支持），而是指在一个渲染进程（即一个主窗口）内通过前端路由或 <webview> 等技术承载多个“窗口级”界面。后者更准确地应称为“单窗口多视图”。因此，本节将主要讨论两种真实可行的架构模式：

单窗口多视图——用一个主窗口 + 内部路由或 <webview> 标签承载多个页面或子窗口逻辑。
多窗口独立进程——每个功能窗口由独立的 BrowserWindow 实例实现，各自拥有独立的渲染进程。

我们也将简要提及一种更极端的优化手段：通过 BrowserView 或将多个窗口的 webContents 附加到同一个进程中来减少资源占用，但这属于高级优化，暂不深入。

6.2.2 单窗口多视图（单进程视角）

这一模式本质上就是只创建一个 BrowserWindow，应用的所有界面都通过前端路由（如 Vue Router、React Router）或 <webview> 标签在该窗口中切换或平铺展示。从用户角度看，好像打开了多个“窗口”（比如设置面板、聊天窗口、编辑器标签页），但实际上它们都运行在同一个渲染进程中。

适用场景：

应用结构简单，功能集中在主界面上（如简单的工具类 App、笔记应用）。
需要类似浏览器的“多标签”体验，通过标签页管理多个文档。
对内存占用有严格要求（例如需要在低配机器上运行）。

优点：

内存占用低：只有一个渲染进程，资源消耗最小。
状态共享简单：不同视图可以直接通过前端状态管理库（Vuex、Pinia 等）通信，无需复杂的 IPC。
开发体验统一：界面完全由前端掌控，与开发一个 SPA 几乎无异。

缺点：

稳定性风险：任何一个视图的未捕获异常都可能导致整个渲染进程崩溃，从而关闭整个窗口——用户将失去所有已打开的内容。
无法利用多窗口系统特性：无法为不同功能配置独立的窗口大小、标题栏、系统菜单，也不能独立控制窗口的显示隐藏、置顶等属性。
窗口管理受限：无法将某个“子窗口”拖拽到外部显示器作为独立窗口使用，因为本质上没有真正创建新的系统窗口。

实现方式示例：
创建一个主窗口后，通过 <webview> 标签嵌入多个页面（<webview> 内部是独立的渲染进程，属于多进程模型的一种特殊形式，但它受到尺寸和位置约束），或者使用路由组件切换视图。例如：

// 主进程只创建一个窗口
mainWindow = new BrowserWindow({ width: 1200, height: 800 });
mainWindow.loadFile('index.html');

在 index.html 中，通过 Vue Router 定义了多个路由，如 /editor、/settings，通过侧边栏切换，用户体验类似桌面应用的多面板。

如果选择使用 <webview> 嵌载外部页面，需注意 <webview> 本质上是独立的渲染进程，但也带来额外的内存开销，且受限于父窗口的容器。

6.2.3 多窗口独立进程

这是最经典的 Electron 多窗口方式：为每一个独立的界面创建一个新的 BrowserWindow 实例，每个实例运行在自己的渲染进程中。 用户看到的窗口彼此独立，可以自由移动、缩放、最小化，且一个窗口的崩溃不影响其他窗口的行为。

适用场景：

功能复杂的桌面应用（如 IDE、设计工具、通讯软件），需要多个独立的界面（主窗口、设置窗口、聊天窗口、预览窗口等）。
需要利用操作系统多窗口特性：跨屏显示、任务栏分组、独立最小化等。
对稳定性要求极高，希望某个模块的崩溃完全不影响其他部分。

优点：

高稳定性：每个窗口独立进程，崩溃隔离。
完全的窗口控制：每个窗口可以设定不同的尺寸、位置、标题、图标、置顶状态等。
良好的系统集成：更好地融入操作系统的多窗口管理体验，比如在 Windows 任务栏上每个窗口独立显示缩略图、在 macOS 上可以独立调度。
适合大型应用架构：不同功能窗口可以由不同团队负责，主进程充当协调者，代码耦合度低。

缺点：

内存占用较高：N 个窗口 ≈ N 个渲染进程，内存使用量线性增加。
进程间通信成本：窗口间共享数据需要经过主进程（IPC），设计不好的话会产生大量桥梁代码。
生命周期管理复杂：需要手动管理窗口的创建、关闭、聚焦等状态，避免窗口泄露或双重创建。

典型实现模式：
主进程中维护一个窗口管理器，负责创建和销毁窗口，并提供全局的 IPC 通信逻辑。

// 主进程：按需创建设置窗口
function createSettingsWindow() {
  if (settingsWindow) {
    settingsWindow.focus();
    return;
  }
  settingsWindow = new BrowserWindow({ width: 600, height: 400, parent: mainWindow });
  settingsWindow.loadFile('settings.html');
  settingsWindow.on('closed', () => { settingsWindow = null; });
}

渲染进程间通信通过主进程中转，例如主窗口的数据变化需要同步到设置窗口：

// 主窗口渲染进程
ipcRenderer.send('data-changed', newData);

// 主进程
ipcMain.on('data-changed', (event, data) => {
  if (settingsWindow) {
    settingsWindow.webContents.send('update-data', data);
  }
});

采用这种模式时，建议封装一个简单的通信中间件来降低复杂性，避免在主进程中堆积大量转发逻辑。

6.2.4 如何选择：平衡稳定性、资源与开发成本

在实际项目中，几乎没有哪个应用会纯用单一模式，更多的是混合策略：

主界面采用单窗口多视图模式：比如编辑器的主工作区，使用标签页管理多个文档，省内存且操作流畅。
辅助界面采用独立窗口：如设置面板、关于页面、导出预览等，用独立窗口实现，确保不影响主工作区的稳定性。
弹窗优先用前端对话框：简单的确认框、输入框直接使用 HTML/CSS 模拟，避免创建新进程。
性能敏感场景评估 <webview>：如果需要嵌入第三方页面且隔离其运行环境，可使用 <webview> 代替独立窗口，但要注意其固有的性能开销。

判断决策可以参考以下规则：

如果该界面必须独立于其他窗口运行（例如独立预览窗口），就创建新的 BrowserWindow。
如果界面需要崩溃隔离（该功能可能不稳定），则使用独立窗口。
如果追求极致内存占用和简单的状态共享，则考虑将其整合到主窗口的路由中。
当功能窗口非常轻量且频繁创建销毁时，可以考虑用单窗口内嵌方案，避免重复初始化渲染进程带来的启动延迟和内存抖动。

常见误区提醒：

不要试图去手动控制渲染进程与窗口的绑定关系（例如通过设置 webPreferences.affinity），这些高级配置通常弊大于利，容易引发难以调试的底层问题。
避免“单进程模式”（--single-process）作为生产方案。它是调试用的，关闭了沙箱和崩溃隔离，安全性和稳定性都得不到保证。

6.2.5 窗口管理最佳实践

无论选择哪种模式，做好窗口管理都能大幅减少后期维护成本：

统一创建与销毁逻辑：封装一个 windowManager 模块，提供 createWindow、getWindow、closeWindow 等方法，避免在主进程中到处散落窗口创建代码。
记录窗口引用：使用 Map 存储窗口实例，防止重复创建和内存泄漏，并在窗口关闭时清理引用。
处理聚焦与置顶：当用户再次点击触发窗口的命令时，先检查窗口是否存在，若存在就调用 focus() 而不是重复创建。
生命周期事件：监听 closed 事件重置引用，考虑在 app.on('before-quit') 中优雅处理所有窗口的关闭顺序。
内存监控：使用 process.memoryUsage() 和 Chrome 的任务管理器关注渲染进程的内存占用，在必要时提醒用户关闭不用的窗口。

多窗口管理是 Electron 应用从“能用”走向“好用”的关键一环。只要你清晰地理解进程隔离的代价和收益，并结合实际业务需求做出取舍，就能在稳定性和资源效率之间找到最适合自己产品的平衡点。