好的，各位观众老爷们，准备好你们的咖啡和键盘，今天咱们来聊聊如何用 JavaScript 这门“前端一哥”语言，来“降维打击”桌面应用开发。 别怕，这不是科幻片，而是 Electron 和 Tauri 这些框架的拿手好戏。
JavaScript “入侵”桌面：Electron 与 Tauri 的双雄会
你可能听说过，用 JavaScript 开发桌面应用，听起来有点像用勺子挖隧道，但 Electron 和 Tauri 证明了这是可行的，而且在某些场景下还相当高效。
Electron：老牌劲旅，拥抱 Web 的桌面战士
Electron 的核心思想很简单：把一个 Web 浏览器（Chromium 内核）和一个 Node.js 运行时环境塞进一个“壳”里，然后你的 JavaScript、HTML 和 CSS 代码就在这个“壳”里跑起来了。 就像把你的网页打包成了一个独立的 App，用户安装后就像安装普通桌面应用一样。
工作原理图解：
+-----------------------------------------------------+
| Electron App |
+-----------------------------------------------------+
| +---------------------+ +---------------------+ |
| | Chromium (UI) | | Node.js (Backend) | |
| +---------------------+ +---------------------+ |
| Renderer Process Main Process |
+-----------------------------------------------------+
| Operating System |
+-----------------------------------------------------+- Main Process (主进程)： 这是 Electron 应用的“大脑”，负责创建和管理窗口 (Renderer Process)，处理系统事件，以及与操作系统进行底层交互，比如菜单栏、托盘图标等等。 主进程使用 Node.js 环境，可以访问操作系统 API。
- Renderer Process (渲染进程)： 每个 Electron 应用的窗口都是一个渲染进程，负责渲染 UI，运行 JavaScript 代码，响应用户事件。 渲染进程本质上就是一个 Chromium 浏览器窗口，可以像在浏览器中一样操作 DOM。
Electron 代码示例（简化版）：
main.js (主进程):
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 允许渲染进程使用 Node.js API
contextIsolation: false, // 禁用上下文隔离 (为了简化示例)
preload: path.join(__dirname, 'preload.js') // 预加载脚本
}
});
mainWindow.loadFile('index.html'); // 加载你的 HTML 文件
// 打开开发者工具 (可选)
// mainWindow.webContents.openDevTools();
}
app.whenReady().then(() => {
createWindow();
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});index.html (渲染进程):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>.</p>
<script src="script.js"></script>
</body>
</html>script.js (渲染进程):
const information = document.getElementById('node-version');
information.innerText = process.versions.node;
const chromeVersion = document.getElementById('chrome-version');
chromeVersion.innerText = process.versions.chrome;
const electronVersion = document.getElementById('electron-version');
electronVersion.innerText = process.versions.electron;preload.js (预加载脚本):
// 在渲染进程加载之前执行的脚本，可以安全地访问 Node.js API
window.addEventListener('DOMContentLoaded', () => {
// 可以向 window 对象添加函数，供渲染进程使用
window.myAPI = {
doSomething: () => {
// ...
}
};
});解释：
main.js是 Electron 应用的入口，负责创建窗口，加载 HTML，以及处理应用生命周期事件。index.html是你的用户界面，可以使用 HTML、CSS 和 JavaScript 构建。script.js是在渲染进程中运行的 JavaScript 代码，可以操作 DOM，与用户交互。preload.js是一个可选的预加载脚本，在渲染进程加载之前执行，可以安全地访问 Node.js API 并将其暴露给渲染进程。
Tauri：后起之秀，轻量级的系统级应用构建工具
Tauri 则采用了不同的策略。 它使用 Rust 作为后端，通过 WebView (系统自带的浏览器组件，比如 Windows 上的 WebView2, macOS 上的 WKWebView, Linux 上的 WebKitGTK) 来渲染 UI。 这样可以避免捆绑 Chromium，从而显著减小应用体积。
工作原理图解：
+-----------------------------------------------------+
| Tauri App |
+-----------------------------------------------------+
| +---------------------+ +---------------------+ |
| | WebView (UI) | | Rust (Core) | |
| +---------------------+ +---------------------+ |
| Renderer Process Backend Process |
+-----------------------------------------------------+
| Operating System |
+-----------------------------------------------------+- WebView (渲染进程): 使用系统自带的 WebView 组件来渲染 UI，这意味着你的 HTML、CSS 和 JavaScript 代码运行在系统的浏览器引擎上。
- Rust (后端进程): Tauri 的核心是用 Rust 编写的，负责处理系统 API 调用、文件操作、网络请求等底层任务。 Rust 代码通过 Message Passing 与 WebView 进行通信。
Tauri 代码示例（简化版）：
src-tauri/src/main.rs (Rust 后端):
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use tauri::{
CustomMenuItem, Menu, MenuItem, Submenu, WindowBuilder, Manager
};
#[tauri::command]
fn my_custom_command() {
println!("I was invoked from JS!");
}
fn main() {
let quit = CustomMenuItem::new("quit".to_string(), "Quit");
let close_window = CustomMenuItem::new("close".to_string(), "Close Window");
let submenu = Submenu::new("File", Menu::new().add_item(quit).add_item(close_window));
let menu = Menu::new()
.add_native_item(MenuItem::Copy)
.add_submenu(submenu);
tauri::Builder::default()
.menu(menu)
.on_menu_event(|event| {
match event.menu_id() {
"quit" => {
std::process::exit(0);
}
"close" => {
event.window().close().unwrap();
}
_ => {}
}
})
.invoke_handler(tauri::generate_handler![my_custom_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}src/index.html (渲染进程):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Hello Tauri!</h1>
<button id="invoke">Invoke Rust Function</button>
<script>
document.getElementById('invoke').addEventListener('click', async () => {
const { invoke } = window.__TAURI__.tauri;
await invoke('my_custom_command');
});
</script>
</body>
</html>解释：
src-tauri/src/main.rs是 Tauri 应用的 Rust 后端，负责处理系统 API 调用，定义自定义命令，以及与 WebView 进行通信。src/index.html是你的用户界面，可以使用 HTML、CSS 和 JavaScript 构建。window.__TAURI__.tauri.invoke用于从 JavaScript 调用 Rust 函数。
核心区别：
| 特性 | Electron | Tauri |
|---|---|---|
| 后端语言 | Node.js | Rust |
| UI 渲染 | Chromium | 系统 WebView (WebView2, WKWebView, WebKitGTK) |
| 打包体积 | 较大 (包含 Chromium) | 较小 (依赖系统 WebView) |
| 性能 | 相对较低 (Chromium 资源占用) | 较高 (Rust + 系统 WebView) |
| 安全性 | 潜在风险 (JavaScript 攻击面) | 较高 (Rust 的内存安全) |
| 跨平台支持 | 广泛 (Windows, macOS, Linux) | 良好 (Windows, macOS, Linux, 移动端支持) |
| 学习曲线 | 相对简单 (熟悉 JavaScript 即可) | 稍难 (需要学习 Rust) |
性能大 PK：谁是速度之王？
Electron 由于捆绑了 Chromium，不可避免地会带来较大的资源占用。 启动速度、内存消耗、CPU 使用率等方面，通常不如原生应用。
Tauri 则因为使用 Rust 作为后端，并且利用系统 WebView，在性能方面更有优势。 Rust 的高效性以及 WebView 的轻量级，使得 Tauri 应用在资源占用方面表现出色。
举个例子：
假设你需要开发一个简单的文本编辑器。
- Electron: 启动时可能需要加载整个 Chromium 浏览器，即使你的编辑器功能很简单，也需要消耗一定的内存和 CPU 资源。
- Tauri: 启动速度更快，资源占用更少，因为只需要加载系统 WebView 组件和 Rust 后端。
性能优化技巧：
- Electron:
- 使用
asar打包你的应用代码，减少文件 I/O 操作。 - 优化你的 JavaScript 代码，避免内存泄漏。
- 使用
remote模块时要小心，避免不必要的进程间通信。 - 考虑使用原生 Node.js 模块来处理性能敏感的任务。
- 使用
- Tauri:
- 优化你的 Rust 代码，减少内存分配和复制。
- 使用异步编程来避免阻塞主线程。
- 减少 WebView 和 Rust 之间的通信次数。
- 考虑使用 WebAssembly (WASM) 来提升 JavaScript 性能。
安全攻防战：谁更固若金汤？
Electron 应用由于使用 JavaScript，面临着一些安全风险，比如跨站脚本攻击 (XSS)、远程代码执行 (RCE) 等。
Tauri 则因为使用 Rust，在安全性方面更有优势。 Rust 的内存安全特性可以有效防止内存泄漏、缓冲区溢出等漏洞。 此外，Tauri 还提供了一些安全措施，比如：
- Content Security Policy (CSP): 限制网页可以加载的资源，防止 XSS 攻击。
- Command Allowlist: 只允许特定的 JavaScript 命令调用 Rust 函数，防止恶意代码执行。
- 隔离机制: 将渲染进程和后端进程隔离，减少攻击面。
安全最佳实践：
- Electron:
- 始终启用 CSP，并根据需要进行配置。
- 避免使用
remote模块，尽量使用ipcRenderer和ipcMain进行进程间通信。 - 对用户输入进行严格的验证和过滤。
- 定期更新 Electron 版本，修复安全漏洞。
- Tauri:
- 仔细配置 Command Allowlist，只允许必要的命令。
- 使用 Tauri 提供的安全 API，比如
fs模块的scope功能，限制文件访问权限。 - 对用户输入进行严格的验证和过滤。
- 定期更新 Tauri 版本，修复安全漏洞。
打包瘦身：谁更苗条？
Electron 应用的打包体积通常较大，因为需要捆绑 Chromium 浏览器。 一个简单的 Electron 应用，打包后可能就有几十甚至上百 MB。
Tauri 则因为使用系统 WebView，不需要捆绑浏览器，所以打包体积可以非常小。 一个简单的 Tauri 应用，打包后可能只有几 MB。
打包体积优化技巧：
- Electron:
- 使用
asar打包你的应用代码。 - 删除不必要的依赖项。
- 使用代码压缩工具 (比如 UglifyJS, Terser) 压缩 JavaScript 代码。
- 使用图片压缩工具 (比如 ImageOptim) 压缩图片资源。
- 考虑使用 Electron Forge 或 Electron Builder 等打包工具，它们可以自动优化打包过程。
- 使用
- Tauri:
- 使用代码压缩工具压缩 JavaScript 代码。
- 使用图片压缩工具压缩图片资源。
- 优化你的 Rust 代码，减少二进制文件的大小。
- 使用 UPX 等工具压缩可执行文件。
总结：选择适合你的框架
Electron 和 Tauri 都是优秀的桌面应用开发框架，它们各有优缺点。
选择 Electron 的理由：
- 你已经熟悉 JavaScript，不想学习新的编程语言。
- 你需要快速开发一个跨平台桌面应用。
- 你对应用体积和性能要求不高。
- 你需要使用一些特定的 Node.js 模块。
选择 Tauri 的理由：
- 你追求更高的性能和更小的应用体积。
- 你对安全性有更高的要求。
- 你愿意学习 Rust。
- 你需要访问一些系统底层 API。
表格总结：
| 特性 | Electron | Tauri |
|---|---|---|
| 语言 | JavaScript, HTML, CSS, Node.js | JavaScript, HTML, CSS, Rust |
| 适用场景 | 快速开发, 跨平台, 熟悉 JavaScript | 性能敏感, 安全性要求高, 对体积敏感 |
| 学习曲线 | 简单 | 稍难 (需要学习 Rust) |
| 性能 | 较低 | 较高 |
| 安全性 | 较低 | 较高 |
| 打包体积 | 较大 | 较小 |
最后的忠告：
选择框架就像选对象，没有绝对的好坏，只有适不适合。 根据你的项目需求、技术栈和个人喜好，选择最适合你的框架，才能事半功倍。
好了，今天的讲座就到这里，希望大家有所收获！ 如果有任何问题，欢迎留言提问。 祝大家编程愉快！