当前位置：首页 > news >正文

electron系列1：Electron不是玩具，为什么桌面应用需要它？

news 2026/6/4 8:11:03

一、一个前端工程师的困惑

2018年，我第一次听到Electron，当时的反应和很多人一样：

“用网页技术写桌面应用？这不就是套个浏览器壳子吗？能好用吗？”

这个偏见在很长时间里影响了我。直到后来，我发现自己每天都在用的VSCode、Slack、Figma、Notion，竟然都是Electron写的。

如果这些产品都在用，那一定不只是“套壳”那么简单。

二、Electron到底是什么？

官方的定义很简洁：

Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。

但这句话太抽象了。让我们用一张图来看清楚Electron的架构：

我更喜欢用这个公式来理解它：

Electron = Chromium + Node.js + 原生API

拆开来看：

组成部分	作用	通俗解释	代码示例
Chromium	渲染界面	用你熟悉的HTML/CSS/JS画界面	`div`、`button`、`flexbox`
Node.js	调用系统能力	读写文件、执行命令、访问数据库	`fs.readFile()`、`child_process.exec()`
原生API	桌面集成	系统托盘、全局快捷键、通知	`Tray`、`globalShortcut`、`Notification`

Electron不是“套壳浏览器”，而是让前端代码获得了接近原生应用的系统能力。

三、一个最小Electron应用长什么样？

让我们写一个最简单的Electron应用，来感受它到底做了什么：

项目结构

my-electron-app/ ├── package.json ├── main.js # 主进程 ├── preload.js # 预加载脚本（安全桥接） └── index.html # 渲染进程（页面）

1. package.json

{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "^28.0.0" } }

2. main.js（主进程）

const { app, BrowserWindow } = require('electron') const path = require('path') // 创建窗口的函数 const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), // 预加载脚本 contextIsolation: true, // 开启上下文隔离（安全必须） nodeIntegration: false // 禁止渲染进程直接访问Node（安全必须） } }) win.loadFile('index.html') // 打开开发者工具（开发时使用） // win.webContents.openDevTools() } // 应用准备就绪后创建窗口 app.whenReady().then(() => { createWindow() // macOS：点击dock图标时如果没有窗口就创建一个 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 所有窗口关闭时退出应用（除了macOS） app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })

3. preload.js（预加载脚本 - 安全桥接）

const { contextBridge, ipcRenderer } = require('electron') // 安全地暴露API给渲染进程 contextBridge.exposeInMainWorld('electronAPI', { // 读取文件（调用主进程的Node能力） readFile: (filePath) => ipcRenderer.invoke('read-file', filePath), // 保存文件 saveFile: (filePath, content) => ipcRenderer.invoke('save-file', filePath, content), // 获取系统信息 getSystemInfo: () => ipcRenderer.invoke('get-system-info') })

4. index.html（渲染进程 - 这就是普通的Web页面！）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个Electron应用</title> <style> body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .container { text-align: center; padding: 40px; } button { background: white; border: none; padding: 12px 24px; font-size: 16px; border-radius: 8px; cursor: pointer; margin: 10px; transition: transform 0.2s; } button:hover { transform: scale(1.05); } pre { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; text-align: left; overflow-x: auto; } </style> </head> <body> <div class="container"> <h1>欢迎使用Electron</h1> <p>这是一个真正的桌面应用！</p> <button id="systemBtn">获取系统信息</button> <button id="fileBtn">读取文件</button> <div id="output"> <pre>点击按钮，结果会显示在这里...</pre> </div> </div> <script> // 调用通过preload暴露的API const output = document.getElementById('output') document.getElementById('systemBtn').onclick = async () => { // 注意：这里可以直接调用桌面能力！ const info = await window.electronAPI.getSystemInfo() output.innerHTML = `<pre>${JSON.stringify(info, null, 2)}</pre>` } document.getElementById('fileBtn').onclick = async () => { // 这里调用的是Node.js的文件读取能力 const content = await window.electronAPI.readFile('package.json') output.innerHTML = `<pre>${content}</pre>` } </script> </body> </html>

关键理解：index.html里的代码看起来就是普通前端代码，但它能调用window.electronAPI.getSystemInfo()——这是纯Web页面做不到的。

四、那些你不知道的Electron产品

很多人用了很久都不知道这些产品是Electron写的：

产品	类型	日活/用户量	为什么选Electron
Visual Studio Code	代码编辑器	1500万+	需要Web技术生态 + 性能要求高
Figma	设计工具	400万+	实时协作能力（WebSocket）+ 跨平台
Notion	笔记应用	1亿+用户	富文本编辑器 + 快速迭代
Slack	企业通讯	1200万+日活	与Web版本复用代码
Discord	游戏语音	1.5亿+用户	低延迟通信 + 游戏内覆盖层
1Password	密码管理	1500万+	跨平台一致性 + 安全性可控
GitHub Desktop	Git客户端	数百万	与GitHub生态无缝集成

这些产品的共同点：

需要快速迭代（Web技术开发效率高）
需要跨平台（Windows/macOS/Linux一套代码）
对界面交互有较高要求（CSS动画、Canvas渲染）
有Web版本，代码复用率高

五、Electron vs 传统方案：选型决策表

这是我给团队做技术选型时用的决策矩阵：

维度	Electron	Qt/C++	WPF/C#	JavaFX	Tauri (Rust)
开发效率	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐⭐
运行时性能	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
内存占用	~80MB起步	~20MB	~30MB	~40MB	~10MB
安装包大小	~70MB	~5MB	~10MB	~40MB	~2MB
跨平台	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	❌	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
原生体验	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
社区生态	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
学习成本	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐

注：Tauri是较新的替代方案，使用系统WebView而非Chromium，体积更小但兼容性略弱。

决策流程图

决策建议：

选Electron：需要快速迭代、跨平台、有Web技术栈积累
选Qt/C++：需要极致性能（游戏引擎、CAD软件）、或嵌入式设备
选WPF：只做Windows、有C#技术栈、需要深度系统集成
选Tauri：追求小体积、团队熟悉Rust、不需要老平台支持

六、Electron的三大核心优势

优势1：Web技术栈的杠杆效应

前端生态的价值：

Vue、React、Svelte等框架直接可用
npm上有200万+的包可以直接调用
任何Web组件都可以变成桌面功能

代码复用率示意：

一个真实案例：
我们团队曾需要给桌面应用增加Markdown编辑器。如果用Qt实现，需要数周。但Electron下，直接用@toast-ui/vue-editor，两小时就集成完毕。

优势2：真正的跨平台

Electron一套代码可以生成：

平台	输出格式	分发渠道
Windows	`.exe`、`.msi`	官网下载、Microsoft Store
macOS	`.dmg`、`.app`、`.pkg`	官网下载、Mac App Store
Linux	`.deb`、`.rpm`、`.AppImage`	APT、Snap Store、Flathub

平台差异处理示例：

// 同一个代码，自动适配不同平台 const { app } = require('electron') // 文件路径分隔符 const configPath = app.getPath('userData') // Windows: C:\Users\用户名\AppData\Roaming\应用名 // macOS: /Users/用户名/Library/Application Support/应用名 // Linux: /home/用户名/.config/应用名 // 菜单栏差异 if (process.platform === 'darwin') { // macOS：应用菜单在屏幕左上角 app.dock.show() } else { // Windows/Linux：菜单在窗口内 win.setMenu(menu) }

优势3：Web与原生能力的无感融合

这是Electron最强大的地方——你可以在同一个代码文件中写：

// 这是一个完整的Electron功能片段 document.getElementById('save').addEventListener('click', async () => { const content = editor.getValue() // 1. 这是Web代码（DOM操作） document.getElementById('status').innerText = '保存中...' // 2. 这是Node.js代码（写文件） await fs.promises.writeFile(currentFilePath, content) // 3. 这是原生能力（系统通知） new Notification('保存成功', { body: `文件已保存到 ${currentFilePath}`, icon: 'icon.png' }) // 4. 这是Electron原生API（闪烁任务栏图标） win.flashFrame(true) // 5. 更新UI document.getElementById('status').innerText = '已保存' })

前端开发者不需要学习C++、不需要了解Win32 API，就能实现完整的桌面应用。

七、Electron的三大缺点（以及如何应对）

作为资深开发者，我必须诚实地说出它的痛点：

缺点1：内存占用高

问题图示：

应对方案代码：

// 方案1：后台窗口节流 const win = new BrowserWindow({ webPreferences: { backgroundThrottling: true // 后台窗口降低帧率和定时器频率 } }) // 方案2：窗口销毁时彻底释放 win.on('closed', () => { win = null // 解除引用，让GC回收 }) // 方案3：使用内存分析工具 // 在Chrome DevTools中 Memory -> Take heap snapshot // 找出未释放的对象

缺点2：安装包体积大

体积对比：

应用	安装包大小	安装后大小
原生记事本	<1MB	<1MB
Qt计算器	~5MB	~15MB
最小Electron应用	~70MB	~180MB
典型Electron应用	100-200MB	300-500MB

应对方案：

// electron-builder配置 - 启用最大压缩 { "build": { "compression": "maximum", // 使用7z压缩，比zip小30% "asar": true, // 打包成asar格式 "files": [ "!**/*.map", // 排除source map "!**/test/**", // 排除测试文件 "!**/docs/**" // 排除文档 ] } }

缺点3：启动速度慢

启动流程耗时分析：

优化方案代码：

// 方案1：先创建隐藏窗口 let win = new BrowserWindow({ show: false, // 先隐藏 webPreferences: { preload } }) win.loadURL('app://index.html') // 准备就绪后再显示 win.once('ready-to-show', () => { win.show() // 如果有需要，再打开DevTools // if (isDev) win.webContents.openDevTools() }) // 方案2：缓存编译结果 // 安装 v8-compile-cache require('v8-compile-cache') // 方案3：预创建常用窗口（VSCode模式） class WindowManager { constructor() { this.pendingWindows = [] } preCreate() { // 后台提前创建常用窗口 const win = new BrowserWindow({ show: false }) this.pendingWindows.push(win) } getWindow() { if (this.pendingWindows.length > 0) { const win = this.pendingWindows.pop() win.show() return win } return new BrowserWindow() } }

八、什么时候应该（不应该）用Electron？

✅ 适合使用Electron的场景

典型适用案例：

已有Web版本的产品
- 直接复用70%+的代码
- Slack、Discord、Figma都是这么做的
需要跨平台的工具类应用
- Markdown编辑器、API测试工具、数据库客户端
- 例：Postman、TablePlus、Beekeeper Studio
对界面交互要求高
- 需要复杂动画、实时协作、Canvas绘图
- Electron可以使用任何Web动画技术
快速迭代的创业产品
- Web前端可以直接转型桌面开发
- 无需招聘C++/C#团队

❌ 不适合使用Electron的场景

九、Electron vs Tauri：新生代挑战者

近年来Tauri成为热门替代方案，这里做一个详细对比：

对比维度	Electron	Tauri
后端语言	Node.js	Rust
前端技术	任意Web框架	任意Web框架
WebView	内置Chromium	系统原生WebView
安装包大小	~70MB起步	~2MB起步
内存占用	~80MB起步	~10MB起步
Windows 7支持	✅ 完全支持	⚠️ 需要WebView2
API丰富度	⭐⭐⭐⭐⭐	⭐⭐⭐
生态成熟度	⭐⭐⭐⭐⭐	⭐⭐⭐
学习成本	低（前端可上手）	中（需要了解Rust）