19.4 窗口预热、隐藏预启动优化

窗口预热（Window Warming）和隐藏预启动（Hidden Pre-launch）是 Electron 性能优化中“用空间换时间”的典型手段。它们的核心思路一致：提前创建好窗口但不显示，等用户真正需要时瞬间弹出，从而消除窗口创建和页面加载带来的可感知延迟。

19.4.1 为什么需要窗口预热

在常规的 Electron 应用中，当你调用 new BrowserWindow() 并 loadURL/loadFile 时，背后会发生一系列耗时操作：

1. 创建新的渲染进程（启动 Chromium 实例）
2. 加载 HTML、解析 DOM
3. 执行 JavaScript、渲染首屏

这一整套流程即使做了大量优化，通常也需要几百毫秒到一秒。对于“新建窗口”这类高频操作（例如：编辑器里打开新文件、聊天应用中打开新会话），用户会明显感到一顿卡顿。窗口预热就是提前把这一流程做完，把窗口“热”在那里，随时待命。

19.4.2 实现方式：隐藏窗口 + ready-to-show

最基础的预热模式是应用启动时创建一个隐藏窗口，将其设为不可见但保留在内存中。当需要新窗口时，直接将其移动到目标位置并显示，随后再补建一个新的隐藏窗口作为储备。

关键步骤：

1. 使用 show: false 创建窗口。
2. 在 ready-to-show 事件中确认窗口已完全渲染。
3. 将窗口对象保存在一个变量中（预热池）。
4. 需要展示窗口时，修改窗口位置、大小，并调用 win.show()。
5. 回收并预热下一个窗口。

代码示例：

// main.js
const { app, BrowserWindow } = require('electron');

let warmWindow = null;

function createWarmWindow() {
  warmWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,              // 创建后不显示
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // 推荐开启 contextIsolation 等安全设置
    },
  });

  warmWindow.loadFile('index.html');

  warmWindow.once('ready-to-show', () => {
    // 窗口已完全渲染，处于待命状态
    console.log('预热窗口准备就绪');
  });

  // 如果窗口被意外关闭（例如用户关闭了预热窗口），重新创建
  warmWindow.on('closed', () => {
    warmWindow = null;
  });
}

function getWarmWindow(options = {}) {
  if (warmWindow) {
    const window = warmWindow;
    warmWindow = null;        // 先移出池，防止重复使用

    // 根据实际需求调整窗口属性
    if (options.x !== undefined) window.setPosition(options.x, options.y);
    if (options.width) window.setSize(options.width, options.height);
    if (options.url) window.loadURL(options.url); // 或者 loadFile

    window.show();
    // 显示后立即预热下一个
    createWarmWindow();
    return window;
  }

  // 如果预热池为空，降级为普通创建方式
  return createNormalWindow(options);
}

app.whenReady().then(() => {
  createWarmWindow(); // 启动时预热一个窗口
});

19.4.3 隐藏预启动的进阶：系统托盘应用常驻后预热

很多工具类应用（如截图、剪切板管理、翻译工具）常态下只驻留系统托盘，用户点击图标时才弹出主窗口。这类场景非常适合“隐藏预启动”：应用在启动时直接创建主窗口并预热，但一直保持隐藏，用户点击托盘时瞬时弹出。

示例：

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    show: false,
    // 其他配置...
  });
  mainWindow.loadFile('main.html');

  mainWindow.once('ready-to-show', () => {
    // 仍然不显示，等待用户触发
  });

  // 托盘点击事件
  tray.on('click', () => {
    if (mainWindow.isVisible()) {
      mainWindow.focus();
    } else {
      mainWindow.show();
    }
  });
});

这种做法几乎消除了“打开主界面”的等待时间，对用户体验提升明显。

19.4.4 实际落地与避坑指南

虽然窗口预热能显著提升交互流畅度，但直接在生产环境中使用需要留意以下几点：

1. 内存开销

每个预热的窗口都占用独立的渲染进程内存（通常几十到上百 MB）。如果预热池过大，会导致应用整体内存居高不下。建议每次只预热 1～2 个窗口，且仅在用户频繁操作的场景使用。

1. 窗口状态重置

预热窗口被拿出来使用时，需要清理掉上一次预热可能残留的状态（如输入框内容、滚动位置、临时变量等）。可以在 getWarmWindow 时通知渲染进程执行重置逻辑，例如通过 IPC 发送 reset-state 事件，或者直接 win.webContents.send('prepare-for-new-task')。

1. 避免无休止预热

如果预热窗口因为某些原因被关闭（比如用户按了 Ctrl+W），你的事件监听里应当立刻补建一个，否则后续调用 getWarmWindow 会退化到普通创建，失去优化效果。但也要避免在用户主动关闭应用窗口时继续补建，因为此时用户意图是退出。

1. 显示时机与动画

从隐藏到显示，可能缺少窗口出现的系统动画。如果你希望保留动画过渡，可以在 show() 之后添加一个短暂的透明到不透明的 CSS 动画，或调用 win.webContents.insertCSS 动态插入动画样式。

1. 与多屏幕的配合

预热窗口初始化为某个固定尺寸和位置，在取出时若用户当前屏幕发生了变化（例如外接显示器），需要根据 screen 模块重新计算坐标，否则窗口可能出现在屏幕范围之外。

19.4.5 性能收益对比

在未使用预热的情况下，一个中等复杂度的窗口（基于 React 的单页应用）从点击“新建”到窗口完全显示通常需要 500-800 毫秒。采用预热后，这一时间可降至 50 毫秒以内——用户几乎感觉不到延迟。对于需要频繁创建窗口的生产力工具（如 VS Code 的分屏、邮件客户端的独立撰写窗口），这种优化至关重要。

窗口预热和隐藏预启动不是 Electron 官方强推的功能，但它是性能敏感场景下的“银弹”。结合下一节的“启动性能优化”措施（如代码拆分、v8-snapshot），你可以将应用的整体响应速度打磨到接近原生应用的体验。