Electron 和 Tauri 是两个流行的框架，用于使用 Web 技术构建桌面应用程序。两者都允许开发者使用 HTML、CSS、JavaScript 和现代前端框架，为 macOS、Windows 和 Linux 创建应用程序。不过，在这些应用程序的运行方式上，它们采取了截然不同的方案。
Electron 为每个应用程序捆绑 Chromium 和 Node.js，在不同操作系统上提供一致的浏览器引擎和运行时。Tauri 则采用更轻量的方式，使用操作系统现有的 WebView，并搭配基于 Rust 的后端。这种架构差异会影响应用体积、内存占用、性能、安全性、兼容性和开发效率。
Tauri 经常被视为 Electron 更现代、更轻量的替代方案。虽然它确实具有优势，尤其是在应用体积和资源消耗方面，但对于许多类型的桌面软件而言，Electron 仍然是一个有力的选择。Visual Studio Code、Slack、Discord、Notion 和 Figma 等主流应用都使用 Electron。在 WebCatalog，我们也选择了 Electron 来构建跨平台桌面应用程序。
那么，你应该选择哪个框架？与其宣布某个框架胜出，不如了解两者之间的取舍，这更有价值。
Electron 与 Tauri 概览
在深入探讨技术差异之前，先来看看这两个框架在重要特性上的对比。
| 特性 | Electron | Tauri |
|---|---|---|
| 浏览器引擎 | 捆绑 Chromium | 系统 WebView |
| 后端 | Node.js | Rust |
| 应用体积 | 通常较大 | 通常较小 |
| 基础内存占用 | 通常较高 | 通常较低 |
| 跨平台一致性 | 高 | 因平台而异 |
| JavaScript 生态系统 | 广泛的 Node.js 支持 | 前端 JavaScript，通过插件和命令访问原生 API |
| 安全模型 | Chromium 沙箱、上下文隔离、IPC | Rust 后端、能力权限机制、IPC |
| 桌面平台 | macOS、Windows、Linux | macOS、Windows、Linux |
| 移动端支持 | 无官方支持 | Android 和 iOS |
| 最适合 | 复杂且依赖 Chromium 的桌面应用 | 轻量级应用和与原生系统集成的实用工具 |
这些差异主要源于一个架构决策：是捆绑浏览器引擎，还是依赖操作系统提供的引擎。
架构：捆绑 Chromium 与使用系统 WebView
Electron 和 Tauri 最大的区别在于它们如何渲染 Web 内容。Electron 自带 Chromium 引擎，这意味着应用程序在 macOS、Windows 和 Linux 上使用的浏览器技术基本相同。无论用户安装的是哪种操作系统，开发者都可以依赖特定版本的 Chromium 及其支持的 Web API。
Tauri 则使用各操作系统提供的 WebView。这大幅减少了需要随应用程序一起打包的软件，但也意味着，同一个应用程序在不同平台上可能使用不同的浏览器引擎。
| 平台 | Electron | Tauri |
|---|---|---|
| macOS | Chromium | WKWebView（WebKit） |
| Windows | Chromium | WebView2（Chromium） |
| Linux | Chromium | WebKitGTK |
| Android | 无官方支持 | Android WebView |
| iOS | 无官方支持 | WKWebView |
对于界面简单的应用程序，这些差异在实际使用中可能影响不大。大多数现代前端框架都能在 Chromium 和 WebKit 上良好运行。不过，依赖特定浏览器 API、复杂渲染行为或高级 Web 功能的应用程序可能会遇到兼容性问题。
使用 Electron 时，开发者可以针对已知的 Chromium 版本进行测试，并将同一版本分发给用户。使用 Tauri 时，则必须考虑不同浏览器引擎之间的差异，以及系统 WebView 可能存在的版本差异。在调试仅出现在特定操作系统或 Linux 发行版上的问题时，这一点尤为重要。
这两种方式本身并无绝对优劣。Tauri 利用计算机上已安装的软件来减少重复，而 Electron 则以更大的应用体积换取更强的控制力和一致性。
应用体积、内存占用与性能
应用体积是 Tauri 最明显的优势之一。由于 Electron 捆绑了 Chromium 和 Node.js，即使是相对简单的 Electron 应用，也可能占用数百兆字节的磁盘空间。Tauri 应用则可以小得多，因为它们依赖系统 WebView，而不是在应用包中包含完整的浏览器引擎。
Tauri 的基础内存消耗也可能更低，对于后台处理很少的轻量级应用尤其如此。它的 Rust 后端效率很高，而且无需维护单独捆绑的浏览器运行时。对于小型实用工具、笔记工具和界面相对简单的应用，这些优势可能十分显著。
不过，应用体积更小并不一定意味着运行速度更快。Electron 和 Tauri 最终都使用浏览器引擎来渲染界面，前端性能仍然在很大程度上取决于应用代码。无论使用哪个框架，低效的 React 组件、开销高昂的 JavaScript 操作或内存泄漏都会造成问题。
应用体积和总体资源消耗之间也存在重要区别。Tauri 并没有消除浏览器引擎，而只是使用了操作系统提供的引擎。在 Windows 上，这意味着依赖 WebView2，它通常已存在于现代 Windows 系统中。在 macOS 和 Linux 上，则意味着依赖各自的 WebKit 实现。
要进行有意义的性能比较，开发者应测量以下指标：
- 应用体积： 下载大小和安装后的磁盘占用。
- 启动时间： 应用程序多快能够进入可交互状态。
- 空闲内存占用： 应用程序打开但未活动时的内存消耗。
- 活跃状态下的内存和 CPU 占用： 实际工作负载下的资源消耗。
- 响应能力： 用户交互过程中的渲染性能和延迟。
结果取决于具体应用。Tauri 在轻量级应用中往往更有优势，而 Electron 一致的 Chromium 环境，则可能让复杂应用的跨平台测试和优化更加容易。
开发体验与安全性
对于已经熟悉 JavaScript 和 TypeScript 的团队来说，Electron 具有显著优势。它与 Node.js 的集成，让开发者能够使用成熟的库生态系统，处理文件系统操作、网络通信、数据库、后台进程和操作系统功能。开发者无需一定在技术栈中引入另一种编程语言，就能构建功能复杂的桌面应用程序。
Tauri 使用 Rust 构建原生后端，带来了出色的性能、内存安全性和强大的编译期保障。开发者仍然可以使用 React、Vue、Svelte 或其他 JavaScript 框架构建界面，而 Tauri 也为许多常见的原生操作提供了插件和 JavaScript API。
不过，要实现这些 API 范围之外的功能，可能需要编写 Rust 或平台专用代码。对于已经熟悉 Rust 的团队，这可能是一项优势。对于主要使用 TypeScript 的团队，则可能带来额外的复杂性。
安全性是这两个框架采取不同方案的另一个领域。Tauri 提供基于能力的权限系统，旨在限制前端代码可以访问哪些原生操作。Electron 则提供 Chromium 沙箱、上下文隔离，以及限制访问 Node.js 和其他特权 API 的控制机制。
在正确配置的情况下，这两个框架都可以支持安全的应用程序；而当开发者授予过多权限，或以不安全的方式处理不受信任的内容时，两者也都可能使用户面临安全漏洞的风险。
一个重要区别在于安全更新。Electron 开发者负责更新应用捆绑的 Chromium 运行时，并在安全修复发布后分发新的应用版本。Tauri 通常依赖操作系统或 WebView 提供方的更新来获取浏览器引擎安全补丁。这减轻了应用开发者的部分维护责任，但更新是否可用取决于用户的操作系统和已安装的 WebView。
归根结底，安全性更多地取决于应用的设计和维护方式，而不是它使用哪个框架。选择 Tauri 并不会自动让应用变得安全，就像选择 Electron 也不会自动让应用变得不安全一样。
为什么大型公司仍然使用 Electron
尽管 Electron 的应用体积和资源消耗经常受到批评，但它仍然是主流软件产品的热门选择。一些使用最广泛的桌面应用就是使用 Electron 构建的，这表明其架构能够支撑数百万人使用的复杂软件。
例如：
| 公司 | 应用程序 |
|---|---|
| Microsoft | Visual Studio Code |
| Salesforce | Slack |
| Discord | Discord |
| Notion | Notion |
| Figma | Figma |
| Signal | Signal Desktop |
| GitHub | GitHub Desktop |
| OpenAI | ChatGPT Desktop |
这些应用的用途各不相同，涵盖软件开发、沟通、设计和生产力工具。它们的共同点在于，都需要在利用 Web 技术的同时，提供功能完善的桌面体验。
Electron 提供成熟的生态系统、一致的 Chromium 运行时，以及将 Web 界面与原生操作系统功能结合的能力。它的广泛应用也意味着，开发者可以受益于多年积累的文档、开源库、调试工具和常见问题解决方案。
对于大型应用，开发效率和可维护性可能比尽量缩小安装包体积更加重要。如果额外占用一百兆字节的磁盘空间，能够降低跨平台工程的复杂性，并让应用更易于维护，那么这可能是可以接受的取舍。
这并不意味着 Electron 永远是正确的选择，也不意味着所有公司都出于相同原因选择它。不过，它在大型生产应用中的持续使用表明，Electron 仍然是一个实用且成熟的选择，而不是开发者理应淘汰的过时技术。
你可以在 Electron 官方应用展示页面中查看更多示例。
为什么 WebCatalog 选择 Electron
在 WebCatalog，我们使用 Electron 构建跨平台桌面应用程序，并且相信，对于我们的特定需求而言，它仍然是合适的框架。
WebCatalog 允许用户将网站转变为桌面应用，让多个账号保持独立登录，并在 macOS、Windows 和 Linux 上整理和管理应用。传统桌面应用的开发者可以控制前端，并针对特定环境进行优化，而我们与之不同，需要支持大量不受我们控制的网站。
这些网站可能使用不同的身份验证系统、存储机制、媒体功能、浏览器 API 和 JavaScript 框架。在 Chromium 中正常运行的网站，在 WebKit 中的行为可能有所不同，而维护多个浏览器引擎之间的兼容性会带来额外的工程挑战。
Electron 一致的 Chromium 运行时帮助我们避免了其中很大一部分复杂性。它让我们能够在所支持的桌面平台上提供行为可预期的浏览器环境，而不是依赖各不相同的系统 WebView。
Electron 还提供了成熟的 API，用于管理浏览器会话、Cookie、存储、权限和导航。它的会话分区功能对 WebCatalog 尤为重要，因为这使用户能够为同一个网站维持多个相互独立的登录会话。
Tauri 也可以显示远程网站，而且可以通过其 WebView API、插件或平台专用集成来实现类似功能。区别在于，对于围绕浏览器功能构建的应用，Electron 提供了更一致的基础，尤其是在需要支持任意第三方服务时。
Linux 支持进一步强化了这一优势。不同 Linux 发行版在可用的系统库、桌面环境和软件版本方面存在显著差异。Electron 捆绑的 Chromium 运行时消除了一个主要的差异来源，而 Tauri 应用则必须考虑每个受支持发行版上可用的 WebKitGTK 环境。
这种一致性是有代价的。Electron 应用体积更大，开发者也必须谨慎管理资源消耗。在 WebCatalog，我们不断寻找减少这些开销的方法。例如，我们引入了 APFS 克隆，以减少生成的 Mac 应用所占用的磁盘空间，这表明，无需放弃框架，也能解决 Electron 的部分不足。
我们的决定并不是基于“Electron 在所有情况下都优于 Tauri”的看法，而是基于产品需求。对于 WebCatalog 来说，浏览器兼容性、跨操作系统的一致行为，以及成熟的会话管理能力，比尽量缩小应用体积更有价值。
Tauri 的优势所在
尽管 WebCatalog 更倾向于使用 Electron，但在许多情况下，Tauri 可能是更好的选择。对于轻量级桌面工具，更小的应用包和更低的基础资源消耗具有很强的吸引力。如果应用主要显示自身的前端、原生功能需求相对简单，并且不依赖特定的浏览器引擎，就能从 Tauri 的架构中显著受益。
对于偏好 Rust，或希望跨平台共享原生应用逻辑的开发者来说，Tauri 同样很有吸引力。从 Tauri 2 开始，该框架除了桌面操作系统之外，还正式支持 Android 和 iOS。相比之下，Electron 主要面向桌面开发，并不正式支持移动平台。
另一个需要考虑的因素是维护。Electron 一致的运行时简化了兼容性测试，但也要求应用开发者维护和更新其捆绑的 Chromium 版本。Tauri 将其中更多责任交给操作系统，这可以减轻某些应用的维护负担。不过，开发者可能需要投入额外精力，测试不同的 WebView 实现并解决平台特定问题。
开发总成本比任何单项基准测试都更重要。一个节省内存、却需要明显更多工程投入的框架，对特定团队来说未必是最高效的选择。同样，如果 Tauri 能以更少资源完成相同任务，那么为一个简单工具附带庞大的 Chromium 运行时，可能也没有必要。
Electron 与 Tauri：你应该选择哪一个？
这两个框架都能用于构建生产级桌面应用，但它们针对不同的优先目标进行了优化。
| 你的优先目标 | 更合适的起点 | 原因 |
|---|---|---|
| 较小的下载和安装体积 | Tauri | 使用系统 WebView |
| 较低的基础资源占用 | Tauri | 轻量级原生后端 |
| 跨桌面平台的一致渲染 | Electron | 捆绑相同的 Chromium 引擎 |
| 广泛的 Node.js 集成 | Electron | 内置 Node.js 运行时 |
| 基于 Rust 的原生功能 | Tauri | Rust 是主要的后端语言 |
| 显示任意第三方网站 | Electron | 行为可预期的 Chromium 环境 |
| 复杂的浏览器会话管理 | Electron | 成熟的会话和分区 API |
| 桌面与移动端开发 | Tauri | 官方支持桌面和移动平台 |
| 尽量减少跨浏览器兼容性测试 | Electron | 在各桌面平台上使用一致的引擎 |
这些只是一般性建议，而不是绝对规则。Electron 可以用于构建高效的应用，而 Tauri 也能支撑复杂的软件。更好的选择取决于产品需求和团队已有的专业技能。
对于构建复杂桌面应用的团队来说，Electron 成熟的生态系统和经过验证的表现值得认真考虑。Microsoft、Slack、Discord 和其他大型软件开发商采用该框架，表明它能够满足严苛的生产环境要求。
与此同时，对于优先考虑更小的二进制文件、更低的基础资源消耗、Rust 集成，或桌面与移动端共享开发的项目，Tauri 提供了一个极具吸引力的替代方案。
总结
关于 Electron 与 Tauri 的讨论，经常被简化为一个简单对比：Electron 大，Tauri 小。但更有意义的区别在于，一方提供捆绑且一致的运行时，另一方则是与系统提供的 WebView 集成的轻量级框架。
Electron 优先考虑跨平台一致性、与 JavaScript 生态系统的集成，以及对浏览器功能的广泛控制。Tauri 则优先考虑更小的应用包、高效的原生执行，以及与操作系统 WebView 更紧密的集成。
在 WebCatalog，我们选择了 Electron，正如许多大型软件公司为其桌面应用所做的选择一样。我们看重它成熟的生态系统、一致的 Chromium 运行时和丰富的浏览器功能。这些优势帮助我们构建和维护能够跨多个操作系统支持各类网站的产品。
这并不意味着 Tauri 是一个糟糕的选择。对于轻量级工具或需求不同的应用，它的优势可能超过 Electron。
最好的框架不一定是可执行文件最小或内存占用最低的那个，而是能让你的团队最高效地构建、维护和改进应用程序的那个。
