Skip to main content

性能优化与安全

作为高级前端开发，在 Electron 面试中仅仅会写业务逻辑是不够的，性能调优和安全防护是体现深度的核心。

性能优化 (Performance)​

Electron 被诟病最多的就是“体积大、吃内存、启动慢”。我们可以从以下几个维度进行优化：

1. 优化应用启动速度​

  • 延迟加载 (Lazy Loading)：在 main.js 中，不要在文件顶部 require 所有模块。只在特定的事件或函数触发时再去 require 庞大的模块。
  • 避免在 app.on('ready') 中做繁重计算：主进程的 ready 事件应该只负责创建窗口。耗时的初始化工作（如数据库连接、大文件解析）可以放入 Worker 线程或放到窗口渲染出来后再执行。
  • 使用 V8 缓存 (v8-compile-cache)：对于主进程的 JS 代码，使用 v8-compile-cache 可以跳过脚本的解析和编译阶段，直接执行字节码，显著提升启动速度。

2. 内存优化​

  • 控制多进程数量：每一个 BrowserWindow 都是一个独立的渲染进程，至少占用几十MB内存。对于不需要显示界面的后台任务，应该使用 Web Worker（同一个进程），而不是隐藏的 BrowserWindow。
  • 及时销毁不再使用的窗口：当窗口关闭时，确保解除所有的全局事件监听（如 ipcMain.removeAllListeners），并将其引用置为 null，以便 V8 引擎进行垃圾回收 (GC)。
  • 避免主进程内存泄漏：主进程是常驻的，如果主进程内存泄漏，整个应用会越用越卡甚至崩溃。

3. 构建与打包优化​

  • 分离 dependencies 和 devDependencies：使用 electron-builder 打包时，只有 dependencies 会被打包进生产环境的 app.asar 中。开发工具（如 eslint, webpack, typescript）一定要放到 devDependencies 中。
  • 前端代码压缩：对渲染进程的 Vue/React 代码，使用 Vite/Webpack 进行彻底的 Tree-Shaking 和混淆压缩。

安全防护 (Security)​

面试考点：如何保证 Electron 应用的安全？ Electron 官方文档专门有一个“安全性”章节，这是大厂必问的红线。

核心原则：永远不要信任来自渲染进程的代码，尤其是加载外部 URL 时。

  1. 禁用 Node.js 集成

    // 创建窗口时，强制设置 nodeIntegration 为 false
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }

    说明：防止渲染进程中的 XSS 漏洞被利用来执行恶意 Node 脚本。

  2. 开启上下文隔离 (Context Isolation) 将渲染进程的 JS 环境与 Preload 脚本的环境隔离开，防止前端代码污染或篡改底层 API 接口。

  3. 禁用远程模块 (Remote Module) @electron/remote 模块允许渲染进程直接获取主进程的 GUI 对象。这极易导致内存泄漏和权限滥用。现代 Electron 已将其剥离，官方强烈建议用 ipc 通信替代。

  4. 处理新窗口打开 (Navigation / New Window) 如果应用允许加载外部网页，用户可能会点击链接试图打开恶意网站。应该在主进程拦截 will-navigate 或 setWindowOpenHandler 事件，只允许打开白名单内的 URL。

    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
      if (url.startsWith('https://safe-site.com/')) {
        return { action: 'allow' };
      }
      return { action: 'deny' }; // 阻止其他网页打开
    });