100 道 Electron 高频面试题（含答案 + 代码示例）涵盖基础原理、进程通信、API 使用、安全优化、打包部署

涵盖基础原理、进程通信、API 使用、安全优化、打包部署、进阶实战六大模块，覆盖初中高级全栈面试考点，直接背会就能通关面试！

一、Electron 基础原理（1-20 题）

1. 什么是 Electron？核心原理是什么？

答案：Electron 是基于Chromium + Node.js的跨平台桌面应用开发框架，允许使用 HTML/CSS/JS 构建 Windows/macOS/Linux 桌面应用。核心原理：将 Web 页面渲染能力（Chromium）和系统底层能力（Node.js）结合，通过主进程 + 渲染进程架构实现桌面应用。

2. Electron 的两大进程是什么？有什么区别？

答案：

主进程：唯一，启动应用、创建窗口、管理系统 API、生命周期
渲染进程：多个，负责渲染 Web 页面，每个窗口一个渲染进程核心区别：主进程有权限调用所有 Electron API，渲染进程默认无系统权限，需通过 IPC 通信。

3. 主进程和渲染进程的通信方式有哪些？

答案：ipcMain/ipcRenderer、contextBridge、remote（已废弃）、webContents。

4. Electron 的生命周期事件有哪些？

答案：ready(应用启动)、window-all-closed(所有窗口关闭)、before-quit(退出前)、will-quit(即将退出)、quit(退出)。

5. 如何创建一个基础的 Electron 窗口？

代码 + 答案：

javascript

运行

// 主进程 main.js
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 安全默认关闭
      contextIsolation: true // 开启上下文隔离
    }
  })
  win.loadFile('index.html') // 加载本地页面
}

app.whenReady().then(createWindow)

6. 什么是上下文隔离（Context Isolation）？为什么必须开启？

答案：隔离渲染进程和主进程的 JS 运行环境，防止渲染进程直接访问 Node.js API，避免 XSS 攻击窃取系统权限，是 Electron 安全核心配置。

7. 什么是 Node 集成（nodeIntegration）？为什么默认关闭？

答案：允许渲染进程直接使用 Node.js API，默认关闭是为了防止恶意网页调用系统 API，仅在绝对可信的本地页面可谨慎开启。

8. Electron 和 NW.js 的区别？

答案：

Electron 主进程控制窗口，NW.js 无明确主进程；
Electron 默认安全配置更严格，NW.js 默认开启 Node 集成；
Electron 生态更活跃，社区支持更好。

9. Electron 支持的协议有哪些？

答案：file://(本地文件)、http:///https://(网络)、自定义协议（如myapp://）。

10. 如何在 Electron 中加载远程 URL？

答案：win.loadURL('https://www.baidu.com')，注意配置安全策略。

11. Electron 应用的入口文件是什么？

答案：package.json中的main字段指定的文件（默认main.js）。

12. 什么是 WebPreferences？常用配置有哪些？

答案：窗口网页配置项，常用：contextIsolation、nodeIntegration、preload、webSecurity。

13. 如何禁用 Electron 窗口的菜单？

答案：win.setMenu(null) 或 new BrowserWindow({ autoHideMenuBar: true })。

14. Electron 窗口的常用事件有哪些？

答案：closed(窗口关闭)、ready-to-show(窗口就绪)、maximize(最大化)、minimize(最小化)。

15. 如何让 Electron 应用在后台运行？

答案：监听window-all-closed事件，不调用app.quit()。

16. 什么是 Chromium？在 Electron 中作用？

答案：谷歌开源浏览器内核，负责 Electron 的页面渲染、JS 执行、Web API 支持。

17. 什么是 Node.js？在 Electron 中作用？

答案：JS 运行时，提供文件系统、网络、进程等系统级 API，让 Electron 拥有桌面应用能力。

18. 如何获取 Electron 版本？

答案：process.versions.electron。

19. 如何获取当前操作系统信息？

答案：require('os').platform()，返回win32/darwin/linux。

20. Electron 应用的核心组成部分？

答案：主进程、渲染进程、Chromium、Node.js、Electron API。

二、进程通信（21-40 题）

21. ipcMain 和 ipcRenderer 的作用？

答案：

ipcMain：主进程监听渲染进程消息，发送回复
ipcRenderer：渲染进程向主进程发送消息，监听回复

22. 同步 IPC 通信怎么实现？

代码 + 答案：

javascript

运行

// 主进程
ipcMain.on('sync-message', (event, arg) => {
  event.returnValue = '主进程同步回复'
})

// 渲染进程（preload）
const result = ipcRenderer.sendSync('sync-message', '同步消息')

23. 异步 IPC 通信怎么实现？

代码 + 答案：

javascript

运行

// 主进程
ipcMain.handle('async-message', async (event, arg) => {
  return '主进程异步回复'
})

// 渲染进程（preload）
const result = await ipcRenderer.invoke('async-message', '异步消息')

24. 什么是 Preload 脚本？作用是什么？

答案：预加载脚本，运行在渲染进程之前，是主进程和渲染进程通信的唯一安全桥梁，通过 contextBridge 暴露 API 给渲染进程。

25. 如何编写安全的 Preload 脚本？

代码 + 答案：

javascript

运行

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (msg) => ipcRenderer.send('message', msg),
  onReply: (callback) => ipcRenderer.on('reply', callback)
})

26. 渲染进程如何安全调用主进程 API？

答案：通过contextBridge暴露方法，禁止直接在渲染进程使用 ipcRenderer。

27. 主进程如何主动向渲染进程发送消息？

答案：win.webContents.send('message', '内容')。

28. 多个渲染进程之间如何通信？

答案：主进程中转：渲染进程 1→主进程→渲染进程 2。

29. remote 模块为什么被废弃？

答案：存在严重安全漏洞，容易导致渲染进程直接获取主进程权限，被ipcMain.handle+contextBridge替代。

30. 如何在渲染进程获取窗口对象？

答案：主进程通过 IPC 暴露方法，禁止直接获取BrowserWindow实例。

31. IPC 通信的数据类型限制？

答案：支持 JSON 序列化的所有类型（字符串、数字、对象、数组），不支持函数、Symbol。

32. 如何监听 IPC 连接断开？

答案：ipcRenderer.on('ipc-disconnect', callback)。

33. 什么是 webContents？作用？

答案：渲染进程的控制器，主进程通过它控制渲染进程（发送消息、执行 JS、刷新页面）。

34. 如何在主进程执行渲染进程的 JS 代码？

代码 + 答案：

javascript

运行

win.webContents.executeJavaScript('console.log("主进程执行渲染进程JS")')

35. Preload 脚本能访问 Node.js API 吗？

答案：可以，Preload 默认有权限访问 Node.js 和 Electron API。

36. 如何防止 IPC 通信被劫持？

答案：开启上下文隔离、关闭 Node 集成、仅暴露必要 API、验证所有输入参数。

37. 异步 IPC 和同步 IPC 的区别？

答案：

同步：阻塞渲染进程，不推荐
异步：非阻塞，性能更好，官方推荐

38. 如何传递大数据通过 IPC？

答案：分块传输、使用文件中转、压缩数据。

39. 渲染进程能直接访问 app 对象吗？

答案：不能，必须通过主进程 IPC 中转。

40. 主进程如何获取所有渲染进程？

答案：BrowserWindow.getAllWindows()，遍历获取webContents。

三、Electron 核心 API（41-60 题）

41. 如何创建托盘图标（Tray）？

代码 + 答案：

javascript

运行

const { Tray, Menu } = require('electron')
const tray = new Tray('icon.png')
const contextMenu = Menu.buildFromTemplate([{ label: '退出', click: () => app.quit() }])
tray.setContextMenu(contextMenu)

42. 如何创建应用菜单（Menu）？

代码 + 答案：

javascript

运行

const { Menu } = require('electron')
const menu = Menu.buildFromTemplate([
  { label: '文件', submenu: [{ label: '打开' }] }
])
Menu.setApplicationMenu(menu)

43. 如何打开文件选择对话框？

代码 + 答案：

javascript

运行

const { dialog } = require('electron')
const { filePaths } = await dialog.showOpenDialog({
  properties: ['openFile']
})

44. 如何打开保存文件对话框？

答案：dialog.showSaveDialog()。

45. 如何弹出消息提示框？

答案：dialog.showMessageBox({ type: 'info', message: '提示' })。

46. 如何获取系统剪贴板内容？

代码 + 答案：

javascript

运行

const { clipboard } = require('electron')
clipboard.writeText('复制内容')
clipboard.readText() // 获取内容

47. 如何实现窗口拖拽功能？

答案：HTML 元素添加-webkit-app-region: drag样式。

48. 如何禁用窗口缩放？

答案：new BrowserWindow({ resizable: false })。

49. 如何设置窗口全屏？

答案：win.setFullScreen(true)。

50. 如何监听窗口大小变化？

答案：win.on('resize', callback)。

51. 如何打开外部链接（默认浏览器）？

代码 + 答案：

javascript

运行

const { shell } = require('electron')
shell.openExternal('https://www.baidu.com')

52. 如何操作本地文件（读取 / 写入）？

答案：通过 Node.js fs模块，主进程或 Preload 中使用。

53. 如何获取应用路径？

答案：app.getPath('userData')（用户数据目录）、app.getAppPath()（应用根目录）。

54. 如何实现应用自动更新？

答案：electron-updater库，主进程监听update-available事件。

55. 如何注册全局快捷键？

代码 + 答案：

javascript

运行

const { globalShortcut } = require('electron')
app.whenReady().then(() => {
  globalShortcut.register('Ctrl+X', () => {
    console.log('快捷键触发')
  })
})

56. 如何注销全局快捷键？

答案：globalShortcut.unregister('Ctrl+X') / unregisterAll()。

57. 什么是 shell 模块？作用？

答案：提供桌面集成能力，打开文件、打开外部链接、显示文件在文件夹中。

58. 如何实现窗口置顶？

答案：win.setAlwaysOnTop(true)。

59. 如何获取屏幕信息？

代码 + 答案：

javascript

运行

const { screen } = require('electron')
const primaryDisplay = screen.getPrimaryDisplay()
const { width, height } = primaryDisplay.workAreaSize

60. 如何实现应用内截图？

答案：webContents.capturePage()，返回图片 Buffer。

四、安全与优化（61-80 题）

61. Electron 最核心的安全配置是什么？

答案：

contextIsolation: true
nodeIntegration: false
enableRemoteModule: false
验证所有 IPC 输入

62. 什么是 CSP？Electron 中如何配置？

答案：内容安全策略，防止 XSS 攻击，在 HTML 头部添加：

html

预览

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

63. 如何防止 Electron 应用被调试？

答案：生产环境禁用开发者工具：win.webContents.on('devtools-opened', () => win.webContents.closeDevTools())。

64. 什么是 ASAR 打包？作用？

答案：Electron 的文件归档格式，将应用文件打包成单个文件，提升加载速度、保护源码。

65. 如何优化 Electron 应用体积？

答案：

移除依赖冗余包
使用electron-builder压缩
剔除开发依赖
按需加载资源

66. 如何优化 Electron 应用启动速度？

答案：

延迟加载非核心组件
预加载必要资源
减小窗口初始化体积
使用 ASAR 打包

67. 如何处理 Electron 的内存泄漏？

答案：

及时注销 IPC 监听
销毁无用窗口
避免全局变量滥用
使用 Chrome DevTools 内存分析

68. 为什么不能在渲染进程直接使用 Node.js？

答案：XSS 攻击可直接调用fs/child_process等 API，窃取系统文件、执行恶意代码。

69. 如何加密 Electron 应用源码？

答案：bytenode编译、electron-packager加密、ASAR 加密。

70. 什么是 webSecurity？如何配置？

答案：开启网页安全策略，默认true，禁止跨域访问本地文件，生产环境必须开启。

71. 如何防止 Electron 应用多开？

答案：app.requestSingleInstanceLock()，获取锁失败则退出应用。

72. Electron 常见的安全漏洞有哪些？

答案：XSS 攻击、远程代码执行、IPC 劫持、源码泄露、调试端口暴露。

73. 如何验证 IPC 通信的合法性？

答案：主进程校验所有来自渲染进程的参数、白名单过滤、禁止执行动态代码。

74. 什么是沙箱模式？Electron 支持吗？

答案：渲染进程运行在沙箱中，限制系统权限，Electron 支持sandbox: true配置。

75. 如何关闭 Electron 的硬件加速？

答案：app.disableHardwareAcceleration()，解决部分电脑兼容性问题。

76. 如何处理 Electron 的跨域问题？

答案：开发环境配置webSecurity: false，生产环境使用代理、CORS、本地接口转发。

77. 如何提升 Electron 页面渲染性能？

答案：虚拟列表、懒加载、减少 DOM 操作、关闭不必要的动画。

78. 什么是上下文桥（contextBridge）？原理？

答案：安全暴露 API 给渲染进程，创建隔离的全局对象，不直接暴露 Node.js API。

79. 如何记录 Electron 应用日志？

答案：electron-log库，写入本地文件，支持主进程 / 渲染进程。

80. 如何适配不同 DPI 的屏幕？

答案：win.webContents.setZoomFactor(1.0)，监听屏幕 DPI 变化动态调整缩放。

五、打包部署（81-90 题）

81. Electron 常用打包工具有哪些？

答案：electron-builder（推荐）、electron-packager、electron-forge。

82. electron-builder 的核心配置文件是什么？

答案：package.json中的build字段。

83. 如何打包 Windows 应用？

答案：配置win字段，执行electron-builder --win。

84. 如何打包 macOS 应用？

答案：配置mac字段，执行electron-builder --mac，需要苹果开发者证书。

85. 如何打包 Linux 应用？

答案：配置linux字段，执行electron-builder --linux。

86. 打包后的应用体积过大如何解决？

答案：压缩资源、移除冗余依赖、使用精简版 Electron、拆分安装包。

87. 如何配置应用图标？

答案：build.icon字段指定图标路径，Windows 支持.ico，macOS 支持.icns。

88. 如何实现安装包自定义安装路径？

答案：electron-builder配置nsis.allowToChangeInstallationDirectory: true。

89. 打包后如何调试应用？

答案：添加命令行参数--devtools，或主进程代码打开开发者工具。

90. 如何实现应用自动更新（electron-updater）？

代码 + 答案：

javascript

运行

const { autoUpdater } = require('electron-updater')
autoUpdater.checkForUpdatesAndNotify()
autoUpdater.on('update-downloaded', () => autoUpdater.quitAndInstall())

六、进阶实战（91-100 题）

91. 如何实现多窗口管理？

答案：创建窗口实例数组，统一管理创建、销毁、通信。

92. 如何实现 Electron + Vue/React 开发？

答案：electron-vite、vue-cli-plugin-electron-builder、create-react-app + electron。

93. 如何在 Electron 中使用数据库？

答案：sqlite3、lowdb、IndexedDB，主进程操作数据库，渲染进程 IPC 调用。

94. 如何实现 Electron 应用开机自启？

代码 + 答案：

javascript

运行

app.setLoginItemSettings({
  openAtLogin: true,
  path: app.getPath('exe')
})

95. 如何实现进程守护（防止应用崩溃）？

答案：child_process创建守护进程，监听主进程崩溃自动重启。

96. Electron 和 Flutter Desktop 的区别？

答案：

Electron：Web 技术栈，开发快，体积大
Flutter Desktop：原生渲染，性能好，学习成本高

97. 如何实现离线应用？

答案：本地缓存静态资源、使用本地数据库、断网状态提示。

98. 如何处理 Electron 应用的权限申请？

答案：macOS 需要配置info.plist权限，Windows 自动申请，Linux 通过系统弹窗。

99. 如何实现 Electron 应用的国际化？

答案：i18next+electron-store，动态切换语言文件。

100. 一个完整的安全 Electron 应用架构是什么？

答案：

主进程：窗口管理、系统 API、IPC 监听
Preload：安全桥接，暴露有限 API
渲染进程：纯 UI，不直接访问 Node.js
安全配置：上下文隔离 + 关闭 Node 集成 + CSP
打包：ASAR 加密 + 代码压缩 + 自动更新

核心总结

安全第一：上下文隔离、关闭 Node 集成、Preload 桥接是 Electron 开发铁律
通信核心：异步 IPC（invoke/handle）是官方推荐的进程通信方式
打包首选：electron-builder 一站式打包，支持全平台
性能优化：ASAR 打包、懒加载、内存管理是提升体验的关键
面试高频：进程模型、IPC 通信、安全配置、打包部署是必考点