Skip to main content

桌面开发与 Electron

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

面试考点：Electron 的三大底层核心

  • Chromium：提供强大的 Web 渲染引擎。开发者可以直接使用最新的 CSS 布局（如 Flex/Grid）和 ES6+ 语法，完全不需要考虑浏览器兼容性。
  • Node.js：提供本地系统的底层访问能力（如文件读写 fs、网络请求、本地命令调用等）。
  • Native APIs：Electron 封装了统一的原生 API，用于调用操作系统的原生能力（如窗口管理、系统托盘、全局快捷键、原生菜单、通知等）。

进程模型​

Electron 采用多进程架构（继承自 Chromium）。面试时常被问到“主进程和渲染进程的区别”。

1. 主进程 (Main Process)​

  • 唯一性：每个 Electron 应用有且只有一个主进程（通常是 main.js）。
  • 职责：
    • 充当应用的“大管家”，负责管理整个应用的生命周期（如启动、退出）。
    • 管理原生 GUI 元素（如创建 BrowserWindow、系统托盘、菜单）。
    • 直接运行在 Node.js 环境中，拥有最高权限，可以直接操作底层操作系统 API。

2. 渲染进程 (Renderer Process)​

  • 多实例：每次调用 new BrowserWindow() 创建一个新窗口，都会产生一个新的渲染进程。
  • 职责：负责页面的 Web 渲染（执行 HTML/CSS/JS）。
  • 权限限制：出于安全考虑，现代 Electron 默认禁止在渲染进程中直接使用 Node.js API（nodeIntegration: false）。

3. 预加载脚本 (Preload Script)​

  • 桥梁作用：它在渲染进程加载 HTML 之前执行。
  • 特权：它虽然运行在渲染进程中，但可以访问有限的 Node.js API（如 ipcRenderer）。
  • 最佳实践：通过 contextBridge，将安全的 API 暴露给全局 window 对象，供纯前端代码调用，这是目前官方推荐的安全通信模式。

面试延伸：Electron vs Tauri​

近年来，基于 Rust 的 Tauri 成为桌面开发的新宠，面试官经常会让你对比两者：

特性ElectronTauri
底层语言C++ / Node.jsRust
渲染引擎打包内置了完整的 Chromium依赖操作系统自带的 WebView (如 macOS的WebKit、Windows的Edge WebView2)
打包体积极大（动辄 100MB+，因为自带了浏览器）极小（几MB到十几MB，因为不打包浏览器内核）
内存占用较高（多进程+V8引擎开销大）极低（Rust 原生执行 + 系统共享 WebView）
兼容性极强（各端表现完全一致）依赖系统，不同系统可能存在轻微渲染差异
适用场景复杂重型应用（VSCode、Figma、飞书）轻量级应用、对体积和内存敏感的工具