# 桌面端面试题精选 Electron 与 Tauri

本章以现代 Electron 与 Tauri 2.x 官方 API 为基线。重点不是背模块名，而是能说清运行时架构、权限收敛、故障恢复、性能预算与发布信任链。

# 阅读建议

初级岗位先完成第 1～4 组，能独立写出安全的 preload 与 IPC。
中高级岗位重点练第 5～20 组，回答时给出指标、失败路径和平台差异。
带交互演示的题先切换正常/边界路径，再展开详细解析复述机制。

# 1 基础架构与选型

# Electron 到底是什么？它是怎么让一个网页变成桌面应用的？

⚡ 30 秒速记

Electron = Chromium + Node.js + 一层原生桌面 API，三样东西一起打进安装包，是个运行时，不是「网页套壳打包工具」
主进程跑 Node，管应用生命周期、窗口、菜单、托盘；每个窗口的页面跑在独立的渲染进程里
页面要碰系统能力，走 preload + contextBridge 暴露的窄接口，再用 IPC 交给主进程做
现在默认 nodeIntegration: false、contextIsolation: true、sandbox: true，页面里默认拿不到 require
能复用的是界面和业务代码；签名、安装、自动更新、菜单这些平台行为还得分平台处理

Electron 本质上是把 Chromium 和 Node.js 塞进同一个应用里，再补一层原生桌面 API，你的网页跑在它自带的浏览器内核里。 启动时先起主进程，它是个 Node 环境，负责创建窗口、处理菜单和应用生命周期；每个窗口会拉起一个渲染进程去加载页面，跟 Chrome 开一个标签页差不多。页面想读文件、弹系统对话框，不能直接调 Node，而是通过 preload 暴露的几个方法发 IPC 给主进程去做。所以它不是把网页打成 exe，而是给网页配了一整套运行时，这也是包体大的原因。

# 三块拼起来的运行时

很多人第一次接触会以为 Electron 和「把 H5 打成 App」的套壳工具一样，其实差别很大。套壳工具一般借用系统自带的 WebView，而 Electron 是自己带了一份完整的 Chromium，再把 Node.js 编译进同一个进程里，两者共用一个 V8。所以不管用户的系统是 Windows 10 还是 macOS 14，你的页面看到的都是同一个版本的内核，前端兼容问题基本没有了，代价是每个应用都背着一个浏览器。

Electron 自己加的那一层是桌面 API：BrowserWindow、Menu、Tray、dialog、Notification、globalShortcut、autoUpdater 这些，大部分只能在主进程用。

# 一个最小应用长什么样

// main.js —— 主进程入口，package.json 里 "main": "main.js"
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('node:path')

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // 下面三项现在都是默认值，写出来是为了让人一眼看清安全边界
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true,
    },
  })
  win.loadFile('index.html')
}

// 页面请求打开文件：只在主进程里碰系统能力
ipcMain.handle('dialog:openFile', async () => {
  const { canceled, filePaths } = await dialog.showOpenDialog({ properties: ['openFile'] })
  return canceled ? null : filePaths[0]
})

app.whenReady().then(() => {
  createWindow()
  // macOS：点 Dock 图标且没有窗口时重新建一个
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Windows / Linux 关掉最后一个窗口就退出，macOS 习惯保留在 Dock
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})