钉子的生活日记
文章目录

Electron 性能优化学习笔记

适合目标：系统掌握 Electron 应用的性能优化方法，重点覆盖冷启动时间、内存占用、渲染性能、主进程开销、多进程资源管理与工程化性能治理。
学习重点：启动链路分析、包体积与加载优化、主进程和渲染进程职责边界、内存泄漏排查、Web 页面渲染优化、音视频/原生模块场景性能治理。
学习原则：先找瓶颈，再做优化；先搞清楚“慢在哪里”，再决定优化路径；先做高收益项，再做细节打磨。

目录

  1. 学习总览
  2. Electron 为什么容易有性能问题
  3. 性能优化应该看哪些指标
  4. 冷启动时间优化
  5. 包体积与资源加载优化
  6. 主进程性能优化
  7. 渲染进程性能优化
  8. 内存占用优化
  9. 多窗口与多 WebContents 优化
  10. IPC 与通信性能优化
  11. 原生模块、音视频和重计算场景优化
  12. 构建与打包层优化
  13. 监控、分析与排查方法
  14. 实战项目优化顺序
  15. 高频面试题
  16. 一页速记总结
  17. 背诵口诀

1. 学习总览

1.1 Electron 性能优化到底在优化什么

很多人一说 Electron 性能优化，会直接想到：

  1. 冷启动慢
  2. 内存大
  3. 页面卡

这些都对，但还不够完整。

Electron 性能优化本质上是在优化：

  1. 应用从点击图标到可交互的时间
  2. 页面从打开到首屏渲染完成的时间
  3. 用户交互过程中的流畅度
  4. 长时间运行后的内存稳定性
  5. 主进程和多个渲染进程的资源消耗

一句话理解：

Electron 性能优化 = 启动更快、运行更稳、内存更低、交互更流畅。

1.2 为什么 Electron 优化不能照搬纯前端页面思路

因为 Electron 同时有：

  1. Chromium 渲染开销
  2. Node.js 运行时开销
  3. 主进程与多渲染进程协作开销
  4. 桌面应用生命周期和系统能力开销

所以优化时必须同时看：

  1. 页面层
  2. Electron 层
  3. 系统层
  4. 构建和打包层

2. Electron 为什么容易有性能问题

2.1 冷启动慢的根本原因

因为启动时往往要同时做很多事：

  1. 启动 Electron Runtime
  2. 启动主进程
  3. 创建 BrowserWindow
  4. 初始化 preload
  5. 加载前端 bundle
  6. 执行 React / Vue 应用初始化
  7. 可能还在启动时做配置读取、数据库初始化、自动更新检查

2.2 内存占用高的根本原因

因为 Electron 是多进程模型：

  1. 主进程占内存
  2. 每个窗口的渲染进程占内存
  3. GPU 进程占内存
  4. Utility / Worker / Native 模块也会占内存

2.3 渲染性能差的根本原因

  1. 页面本身渲染逻辑复杂
  2. 状态更新过于频繁
  3. 大列表、大表格、大量 DOM
  4. Canvas / WebGL / 音视频渲染过重
  5. 线程分工不合理

3. 性能优化应该看哪些指标

3.1 冷启动指标

  1. 应用点击到窗口出现时间
  2. 窗口出现到首屏可交互时间
  3. 首屏 JS 执行耗时
  4. preload 执行耗时

3.2 运行时指标

  1. 主进程 CPU
  2. 渲染进程 CPU
  3. 页面掉帧
  4. IPC 往返时延
  5. Worker / 子进程任务耗时

3.3 内存指标

  1. 主进程 RSS
  2. 渲染进程内存
  3. GPU 内存
  4. 窗口关闭后是否回收
  5. 长时间运行后的增长趋势

3.4 体验指标

  1. 页面是否卡顿
  2. 切换窗口是否顺滑
  3. 大数据页面是否能滚动流畅
  4. 音视频场景是否出现明显卡顿

4. 冷启动时间优化

这是 Electron 最常见的性能痛点。

4.1 启动链路先做拆分

把冷启动拆成：

  1. Electron Runtime 启动
  2. 主进程初始化
  3. BrowserWindow 创建
  4. 首个页面加载
  5. 前端应用初始化

4.2 冷启动优化总原则

启动时只做必须做的事，能延后的一律延后。

4.3 主进程启动优化

不要在 app.whenReady() 前后塞太多工作

启动阶段常见误区：

  1. 同步读取大文件
  2. 同步初始化数据库
  3. 启动就全量注册复杂服务
  4. 启动就拉网络配置

优化原则：

  1. 只做窗口启动必要逻辑
  2. 非关键逻辑延后到窗口显示后
  3. 后台初始化拆分成异步任务

4.4 窗口创建优化

先快速展示，再逐步增强

例如：

  1. 先显示壳层窗口
  2. 再加载业务页面
  3. 重任务在页面可见后继续完成

配置上常见注意点

  1. 不要启动就创建太多窗口
  2. 预加载内容控制精简
  3. BrowserWindow 配置不要无意义堆功能

4.5 前端首屏 bundle 优化

冷启动里最容易被忽视的一点是：

你加载的其实还是一个前端应用。

优化方向：

  1. 路由级懒加载
  2. 首屏代码拆分
  3. 大型依赖延迟加载
  4. 编辑器、图表、音视频 SDK 按需加载

4.6 自动更新等后台逻辑延迟

不要在冷启动链路上直接阻塞：

  1. 自动更新检查
  2. 埋点 SDK 重初始化
  3. 远程配置拉取
  4. 重型原生模块预热

应该：

  1. 首屏就绪后再做
  2. 后台静默完成

4.7 冷启动优化清单

  1. 减少主进程同步初始化
  2. 降低 preload 逻辑体积
  3. 压缩前端首屏 bundle
  4. 延后自动更新、日志、配置等后台任务
  5. 懒加载大组件和重功能模块

5. 包体积与资源加载优化

5.1 为什么包体积会影响启动

因为包越大：

  1. 安装包越大
  2. 解压和读取越慢
  3. 首屏资源解析越慢

5.2 常见体积膨胀来源

  1. 重型 UI 库
  2. 图表库
  3. 编辑器
  4. 音视频 SDK
  5. 未 tree-shaking 的工具库
  6. 重复依赖

5.3 优化方向

  1. 按需引入
  2. 代码分割
  3. 去掉没用的 polyfill
  4. 去掉没用的 locale / icon / themes
  5. 分析 bundle 体积

5.4 Electron 特别要注意的点

  1. preload 体积也要控制
  2. 主进程依赖不要无脑和渲染层共用
  3. 原生模块和资源文件按需打包

6. 主进程性能优化

主进程不是页面，但它是整个应用的调度中心。

6.1 主进程最容易慢在哪里

  1. 同步文件 I/O
  2. 同步数据库操作
  3. 大量 JSON 处理
  4. 启动时执行重逻辑
  5. IPC handler 做重计算

6.2 主进程优化原则

  1. 主进程做协调，不做重计算
  2. I/O 使用异步 API
  3. 重任务下放到 Worker / Utility Process / Native
  4. IPC handler 保持轻量

6.3 主进程中的重任务怎么处理

推荐：

  1. 纯 JS CPU 密集型任务 -> worker_threads
  2. 高风险隔离任务 -> utilityProcess
  3. 原生性能任务 -> Native Addon / C++

6.4 主进程常见误区

  1. 在 IPC handler 里直接跑大循环
  2. 在菜单、托盘事件里执行耗时逻辑
  3. 同步扫描整个目录

7. 渲染进程性能优化

这一节和普通前端优化联系最紧，但 Electron 下更容易放大问题。

7.1 渲染层性能问题的常见来源

  1. 大量组件重渲染
  2. 大列表和大表格
  3. 图表库、富文本、编辑器很重
  4. 音视频画面过多
  5. 频繁跨进程状态同步

7.2 组件与状态优化

  1. 避免无意义全局状态更新
  2. 降低高频状态广播
  3. 拆分重组件
  4. 大组件按需渲染

7.3 列表优化

  1. 虚拟列表
  2. 分页
  3. 分块渲染

7.4 大图表和编辑器优化

  1. 懒加载图表库
  2. 页面真正进入时再初始化
  3. 销毁页面时及时回收实例

7.5 渲染与动画优化

  1. 避免频繁强制回流
  2. 动画优先 transform / opacity
  3. 大量 DOM 变化分批执行

7.6 音视频场景下的渲染优化

  1. 不要同时渲染过多远端视频
  2. 缩略图和主画面分级渲染
  3. 隐藏页面时暂停非必要渲染

8. 内存占用优化

这是 Electron 最容易被用户感知的问题之一。

8.1 为什么 Electron 内存看起来容易高

因为：

  1. Chromium 本身占内存
  2. 每个窗口都是独立渲染进程
  3. JS 堆和原生内存都存在
  4. GPU 也会占资源

8.2 内存优化的核心思路

不是追求绝对小，而是追求稳定、可控、不持续泄漏。

8.3 渲染层常见内存问题

  1. 页面卸载后事件监听没清理
  2. 定时器没释放
  3. 图表实例没销毁
  4. 视频对象和流引用没释放
  5. 大对象被闭包长期持有

8.4 主进程常见内存问题

  1. 缓存无上限
  2. 窗口关闭后引用仍然保留
  3. IPC handler 中对象残留
  4. 原生模块资源未释放

8.5 多窗口内存控制

  1. 不要默认一直保留所有隐藏窗口
  2. 低频页面必要时销毁重建
  3. 预创建窗口要谨慎

8.6 音视频与大文件场景内存控制

  1. 大 Buffer 不要长期缓存
  2. 分块处理
  3. 明确释放媒体流、轨道和播放器实例

9. 多窗口与多 WebContents 优化

9.1 多窗口为什么代价大

每多一个窗口，通常就多一套：

  1. 渲染进程
  2. 页面资源
  3. JS 堆
  4. 可能还有额外 preload 和 GPU 开销

9.2 优化建议

  1. 尽量复用窗口
  2. 低频窗口按需创建
  3. 隐藏不用的窗口时考虑释放资源
  4. 不要为了“方便”预建很多窗口

9.3 WebView / 嵌套内容注意点

嵌套页面会进一步放大：

  1. 内存
  2. CPU
  3. 渲染复杂度

能不用就别滥用。

10. IPC 与通信性能优化

10.1 IPC 常见问题

  1. 频繁发送大对象
  2. 高频实时同步
  3. 页面层和主进程来回 ping 太多

10.2 优化原则

  1. 减少 IPC 次数
  2. 减少单次消息体积
  3. 高频数据做节流和批处理
  4. 不要把 IPC 当状态管理系统

10.3 高频场景下建议

  1. 用本地状态解决的不要走 IPC
  2. 大对象传输考虑压缩、分块、引用式方案
  3. 进度上报做节流

11. 原生模块、音视频和重计算场景优化

这部分是很多 Electron 项目真正的性能重灾区。

11.1 Native Addon 优化

  1. 不要在主线程同步调用重原生逻辑
  2. 原生任务异步化
  3. 减少 JS 和原生之间的大量频繁拷贝

11.2 音视频场景优化

  1. 优先利用硬件编解码
  2. 多路视频按优先级订阅和渲染
  3. 屏幕共享和摄像头流区分策略
  4. 降低非核心画面分辨率

11.3 大计算场景优化

  1. 纯 JS 重计算走 worker_threads
  2. 隔离高风险任务走 utilityProcess
  3. 原生高性能任务走 C++ / Addon 后台线程

12. 构建与打包层优化

很多性能问题其实在构建阶段就埋下了。

12.1 产物优化

  1. 路由级代码分割
  2. 懒加载大模块
  3. 构建分析 bundle

12.2 Electron 包配置优化

  1. 只打包必要文件
  2. 剔除无用资源
  3. 区分开发依赖和生产依赖

12.3 注意不要做过度优化

例如：

  1. 为了极致包小引入太复杂的加载逻辑
  2. 为了预热一切反而拖慢启动

13. 监控、分析与排查方法

13.1 冷启动分析

建议拆点：

  1. app ready 时间
  2. BrowserWindow 创建时间
  3. preload 完成时间
  4. 首屏渲染完成时间

13.2 渲染分析

可以关注：

  1. 长任务
  2. 掉帧
  3. 大组件首次挂载耗时
  4. 重渲染次数

13.3 内存分析

重点看：

  1. 打开页面后的内存基线
  2. 关闭页面后能否回收
  3. 长时间使用后的增长趋势

13.4 日志和监控建议

至少记录：

  1. 启动耗时
  2. 页面切换耗时
  3. 主进程卡顿
  4. 渲染进程崩溃
  5. 内存峰值

14. 实战项目优化顺序

如果是一个真实 Electron 项目，建议按这个顺序优化：

第一步：先测量

  1. 冷启动时间
  2. 首屏可交互时间
  3. 页面卡顿点
  4. 内存增长点

第二步：先做高收益项

  1. 启动逻辑瘦身
  2. 首屏 bundle 缩减
  3. 大模块懒加载
  4. 重任务下放线程/进程

第三步：再做运行时优化

  1. 虚拟列表
  2. 组件拆分
  3. 缓存治理
  4. 窗口数量治理

第四步：做长期治理

  1. 性能监控
  2. 崩溃监控
  3. 内存泄漏巡检

15. 高频面试题

15.1 Electron 为什么冷启动慢

因为启动时不仅要启动 Electron runtime 和主进程，还要创建窗口、加载 preload、加载前端 bundle，并执行页面初始化逻辑。

15.2 Electron 为什么内存占用高

因为它是多进程架构，主进程、渲染进程、GPU 进程、原生模块和多个窗口都会占用资源。

15.3 冷启动优化怎么做

推荐答法：

减少主进程同步初始化、延迟非关键任务、压缩首屏 bundle、懒加载大模块、减少不必要窗口和资源预热。

15.4 Electron 里大量计算放哪里

不要放在 Renderer 或 Main 长时间执行，纯 JS CPU 密集型任务优先放 worker_threads，高隔离需求走 utilityProcess，原生高性能任务放 Native Addon / C++。

15.5 渲染性能优化怎么做

  1. 减少无意义重渲染
  2. 虚拟列表
  3. 大组件懒加载
  4. 大量动画与 DOM 更新优化
  5. 音视频场景减少同时渲染的画面数

15.6 内存泄漏常见来源有哪些

  1. 事件监听没清理
  2. 定时器没释放
  3. 图表/播放器实例没销毁
  4. 大对象被闭包持有
  5. 窗口关闭后引用还在

16. 一页速记总结

16.1 优化主线

  1. 冷启动：少做事、后置做事
  2. 内存：控增长、防泄漏
  3. 渲染：减重渲染、减重页面
  4. 主进程：只调度，不扛重活
  5. 重计算：下放 Worker / Utility / Native

16.2 最高收益项

  1. 冷启动阶段逻辑瘦身
  2. 首屏 bundle 缩减
  3. 大模块懒加载
  4. 多窗口数量治理
  5. 重任务线程化/进程化

17. 背诵口诀

启动先瘦身，首屏先拆包；主进程只调度，重活别硬扛；渲染层少重绘，列表做虚拟化；内存看趋势，关闭要回收，优化先量化。