Electron 应用的启动速度是用户对产品的第一印象。一个点击图标后需要等待三四秒才出现界面的应用，用户体感上会直接判定“卡、慢、重”。想要优化启动性能，第一步就是把启动过程拆开来看清楚，知道时间到底花在了哪里。
从用户双击图标到窗口完全渲染出第一帧内容，整个启动链路可以拆成以下六个阶段：
1. 操作系统加载可执行文件（T0 ~ T1）
这个阶段是操作系统层面的事情：读取 Electron 的可执行文件、加载动态链接库、初始化沙箱和进程安全策略。对于 Windows 来说，还包括病毒扫描和代码签名验证。普通的 Electron 应用在这一步的耗时通常在 200–500 毫秒，冷启动（首次运行或重启后）会比热启动慢一些。
可优化点：代码签名证书的有效性和反病毒软件的白名单可以降低扫描耗时，但这往往不在开发者的控制范围内。真正能做的是尽量减小主进程的入口文件体积，不要在主入口 main.js 中引入不必要的模块，以减少加载时的解析开销。
2. Node.js 与 Electron 内核初始化（T1 ~ T2）
当操作系统将执行权交给 Electron 后，Node.js 会初始化其运行时环境（加载内置模块、设置 V8 引擎），随后 Electron 的主进程脚本 main.js 开始执行。这个阶段主要耗时包括：
- 解析和编译所有
require/import引入的模块。 - 执行这些模块中的顶层代码（例如读取配置文件、注册协议、初始化日志等）。
如果你的 main.js 顶部写了 require('electron-log')、require('electron-updater') 等第三方包，它们都会被同步加载并初始化，这会显著拉长 T2 的到达时间。合理做法是按需加载——把非首屏必需的模块移到实际使用时再 require，或者使用异步 import() 动态导入。
3. 创建 BrowserWindow 窗口实例（T2 ~ T3）
调用 new BrowserWindow() 会做两件重活：
- 启动一个全新的渲染进程（Chromium 子进程）。
- 初始化 GPU 进程（用于硬件加速合成）。
这个阶段通常需要 300–1000 毫秒，受系统当前负载和硬件配置影响较大。如果你在创建窗口时传入了复杂的 webPreferences（如开启了 nodeIntegration、大量预加载脚本），初始化时间会更长。
常见优化：使用 show: false 创建窗口，在页面准备好的 ready-to-show 事件中再显示，避免用户看到白屏；或者预先创建隐藏的后台窗口来“预热”渲染进程。
4. 加载入口 HTML 与静态资源（T3 ~ T4）
渲染进程启动后，开始加载你指定的 HTML 文件（本地文件或 URL）。如果是本地文件，这一步很快（通常 50 毫秒以内），但若遇到以下情况就会变慢：
- HTML 中引用了大量需要网络加载的外部资源（CDN 字体、图片、第三方脚本）。
- 使用了庞大的 CSS 框架且没有做按需引入，浏览器需要解析巨量样式。
即便使用本地资源，也要注意不要在入口 HTML 中同步加载体积过大的 JavaScript 包。一个常见的陷阱是直接把 webpack 打包后的整站 bundle.js（数 MB）通过 <script> 引入，这会阻塞 HTML 解析，延迟首屏渲染。
5. 执行 JavaScript 与框架初始化（T4 ~ T5）
这一步发生在渲染进程的 JavaScript 上下文里，执行顺序大致是：
- 预加载脚本
preload.js执行，暴露安全的跨进程 API。 - 入口脚本（如
renderer.js）执行，创建 Vue/React 应用实例。 - 前端路由初始化、状态管理创建、首屏组件渲染和挂载。
这是用户感知最明显的阶段，也很容易因为业务量的堆积而膨胀。很多项目在这一步里同步拉取大量本地数据（如从 IndexedDB 加载笔记列表）、做多次不必要的重渲染，导致界面迟迟不出。
测量方法：可以在主进程的 win.webContents.on('did-finish-load') 和渲染进程的 DOMContentLoaded、ReactDOM.render 回调处打时间戳，对比各段的间隔。
6. 首帧绘制完成（T5 ~ 用户可见）
当框架将虚拟 DOM 转换为真实 DOM，渲染引擎完成布局、绘制、合成，最终把像素显示在屏幕上，首帧才算真正可见。如果首屏包含大图、复杂动画或大量 DOM 节点，这一阶段可能出现明显的可感知延迟。
实际测量：在代码里埋点
光凭猜测永远无法准确定位瓶颈，必须在真实环境中抓到精确的毫秒数。下面是一套轻量的埋点方案，不需要任何第三方工具，直接在 Electron 代码中插入时间戳：
主进程（main.js）
const { app, BrowserWindow } = require('electron');
const startTime = Date.now();
function mark(stage) {
console.log(`[AppStart] ${stage}: ${Date.now() - startTime}ms`);
}
app.on('ready', () => mark('app-ready'));
const win = new BrowserWindow({ show: false });
mark('window-created');
win.once('ready-to-show', () => {
mark('ready-to-show');
win.show();
});渲染进程（通过预加载暴露标记函数）
// preload.js
const { contextBridge } = require('electron');
contextBridge.exposeInMainWorld('__performance', {
mark: (stage) => console.log(`[Renderer] ${stage}: ${performance.now().toFixed(1)}ms`)
});<!-- index.html -->
<script>
window.__performance.mark('html-start');
window.addEventListener('DOMContentLoaded', () => window.__performance.mark('dom-ready'));
</script>前端框架挂载点
// React 入口
import React from 'react';
import ReactDOM from 'react-dom/client';
window.__performance.mark('react-render-start');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
window.__performance.mark('react-render-end');有了这些时间戳，你可以清晰地看到每个阶段的实际耗时，进而决定先优化哪里。如果你需要更精细的火焰图分析，可以在渲染进程中打开 DevTools 的 Performance 标签录制启动过程，查看 JavaScript 执行、样式计算和渲染的详细耗时。
常见的耗时分布（真实案例参考）
以一个中等复杂度的笔记应用为例，在主流配置的 Windows 笔记本电脑上冷启动的典型耗时分布是：
- 系统加载可执行文件 + Electron 初始化：~600ms
- 创建窗口 + 加载 HTML：~150ms
- 执行 JavaScript + 框架挂载：~400ms
- 首帧渲染完成：~200ms
总时间约 1.3–1.5 秒，若超过 3 秒则必须进行针对性优化。
拆解清楚这些阶段之后，接下来的几节会逐一介绍具体的优化手段：从主进程的启动加速、窗口预热，到渲染进程的代码懒加载与首屏减包，每一步都会有可执行的方案和真实案例对比。