WebView2 和 Electron
在过去几周，我们收到了一些关于新 WebView2 和 Electron 之间差异的问题。
¥Over the past weeks, we’ve received several questions about the differences between the new WebView2 and Electron.
两个团队都明确表示，他们的目标是让 Web 技术在桌面端达到最佳状态，并且正在讨论进行一次全面的比较。
¥Both teams have the expressed goal of making web-tech the best it can be on the Desktop, and a shared comprehensive comparison is being discussed.
Electron 和 WebView2 是快速发展且不断发展的项目。我们简要概述了 Electron 和 WebView2 目前存在的异同。
¥Electron and WebView2 are fast-moving and constantly evolving projects. We have assembled a brief snapshot of similarities and differences between Electron and WebView2 as they exist today.
架构概述
¥Architecture Overview
Electron 和 WebView2 均基于 Chromium 源代码构建，用于渲染 Web 内容。严格来说，WebView2 基于 Edge 源代码构建，但 Edge 是使用 Chromium 源代码的分支构建的。Electron 不与 Chrome 共享任何 DLL。WebView2 二进制文件与 Edge（自 Edge 90 起为稳定版本）硬链接，因此它们共享磁盘和一些工作集。有关更多信息，请参阅 Evergreen 分发模式。
¥Electron and WebView2 both build from the Chromium source for rendering web content. Strictly speaking, WebView2 builds from the Edge source, but Edge is built using a fork of the Chromium source. Electron does not share any DLLs with Chrome. WebView2 binaries hard link against Edge (Stable channel as of Edge 90), so they share disk and some working set. See Evergreen distribution mode for more info.
Electron 应用始终会打包和分发与其开发时使用的 Electron 版本完全相同的版本。WebView2 有两种分发方式。你可以打包应用开发时使用的 WebView2 库，也可以使用系统中可能已存在的共享运行时版本。WebView2 为每种方法提供了工具，包括在缺少共享运行时时提供的引导安装程序。WebView2 从 Windows 11 开始内置于系统。
¥Electron apps always bundle and distribute the exact version of Electron with which they were developed. WebView2 has two options in distribution. You can bundle the exact WebView2 library your application was developed with, or you can use a shared-runtime version that may already be present on the system. WebView2 provides tools for each approach, including a bootstrapping installer in case the shared runtime is missing. WebView2 is shipped inbox starting with Windows 11.
打包其框架的应用负责更新这些框架，包括小的安全更新。对于使用共享 WebView2 运行时的应用，WebView2 拥有自己的更新程序，类似于 Chrome 或 Edge，它独立于你的应用运行。与 Electron 一样，更新应用代码或其任何其他依赖仍然是开发者的责任。Electron 和 WebView2 均不受 Windows 更新管理。
¥Applications that bundle their frameworks are responsible for updating those frameworks, including minor security releases. For apps using the shared WebView2 runtime, WebView2 has its own updater, similar to Chrome or Edge, that runs independent of your application. Updating the application's code or any of its other dependencies is still a responsibility for the developer, same as with Electron. Neither Electron nor WebView2 is managed by Windows Update.
Electron 和 WebView2 都继承了 Chromium 的多进程架构。 - 即，一个主进程与一个或多个渲染进程通信。这些进程与系统上运行的其他应用完全独立。每个 Electron 应用都是一个独立的进程树，包含一个根浏览器进程、一些实用程序进程以及零个或多个渲染进程。使用相同 用户数据文件夹（就像一套应用一样）的 WebView2 应用共享非渲染进程。使用不同数据文件夹的 WebView2 应用不共享进程。
¥Both Electron and WebView2 inherit Chromium’s multi-process architecture - namely, a single main process that communicates with one-or-more renderer processes. These processes are entirely separate from other applications running on the system. Every Electron application is a separate process tree, containing a root browser-process, some utility processes, and zero or more render processes. WebView2 apps that use the same user data folder (like a suite of apps would do), share non-renderer processes. WebView2 apps using different data folders do not share processes.
-
ElectronJS 进程模型：
¥ElectronJS Process Model:
-
基于 WebView2 的应用进程模型：
¥WebView2 Based Application Process Model:
点击此处阅读有关 WebView2 的流程模型 和 Electron 的进程模型 的更多信息。
¥Read more about WebView2’s process model and Electron’s process model here.
Electron 提供常见桌面应用需求的 API，例如菜单、文件系统访问、通知等。WebView2 是一个组件，旨在集成到 WinForms、WPF、WinUI 或 Win32 等应用框架中。WebView2 不通过 JavaScript 提供 Web 标准之外的操作系统 API。
¥Electron provides APIs for common desktop application needs such as menus, file system access, notifications, and more. WebView2 is a component meant to be integrated into an application framework such as WinForms, WPF, WinUI, or Win32. WebView2 does not provide operating system APIs outside the web standard via JavaScript.
Node.js 已集成到 Electron 中。Electron 应用可以在渲染器和主进程中使用任何 Node.js API、模块或 node-native-addon。WebView2 应用不会假定应用的其余部分是用哪种语言或框架编写的。你的 JavaScript 代码必须通过应用宿主进程代理任何操作系统访问。
¥Node.js is integrated into Electron. Electron applications may use any Node.js API, module, or node-native-addon from the renderer and main processes. A WebView2 application does not assume which language or framework the rest of your application is written in. Your JavaScript code must proxy any operating system access through the application-host process.
Electron 致力于保持与 Web API 的兼容性，包括基于 Fugu 项目 开发的 API。我们有 Electron 的 Fugu API 快照兼容性。WebView2 维护着与 与 Edge 的 API 差异 类似的列表。
¥Electron strives to maintain compatibility with the web API, including APIs developed from the Fugu Project. We have a snapshot of Electron’s Fugu API compatibility. WebView2 maintains a similar list of API differences from Edge.
Electron 拥有可配置的 Web 内容安全模型，从完全访问到完全沙盒。WebView2 内容始终处于沙盒状态。Electron 拥有 全面的安全文档 安全模型选择指南。WebView2 也拥有 安全最佳实践。
¥Electron has a configurable security model for web content, from full-access to full-sandbox. WebView2 content is always sandboxed. Electron has comprehensive security documentation on choosing your security model. WebView2 also has security best practices.
Electron 源代码已在 GitHub 上维护并可用。应用可以修改并构建自己的 Electron 版本。WebView2 源代码在 GitHub 上不可用。
¥The Electron source is maintained and available on GitHub. Applications can modify can build their own brands of Electron. The WebView2 source is not available on GitHub.
快速摘要：
¥Quick Summary:
| Electron | WebView2 | |
|---|---|---|
| 构建依赖 | Chromium | Edge |
| 源代码可在 GitHub 上获取 | 是的 | 否 |
| 共享 Edge/Chrome DLL | 否 | 是（自 Edge 90 起） |
| 应用间共享运行时 | 否 | 可选 |
| 应用 API | 是的 | 否 |
| Node.js | 是的 | 否 |
| 沙盒 | 可选 | 始终 |
| 需要应用框架 | 否 | 是的 |
| 支持的平台 | Mac、Win、Linux | Win（计划在 Mac/Linux 上线） |
| 应用间进程共享 | 永不 | 可选 |
| 框架更新由以下人员管理 | 应用 | WebView2 |
性能讨论
¥Performance Discussion
在渲染你的 Web 内容时，我们预计 Electron、WebView2 和任何其他基于 Chromium 的渲染器之间的性能差异很小。我们为那些有兴趣研究潜在性能差异的人创建了 使用 Electron、C++ + WebView2 和 C# + WebView2 构建的应用的脚手架。
¥When it comes to rendering your web content, we expect little performance difference between Electron, WebView2, and any other Chromium-based renderer. We created scaffolding for apps built using Electron, C++ + WebView2, and C# + WebView2 for those interested to investigate potential performance differences.
除了渲染 Web 内容之外，它们之间还存在一些差异，来自 Electron、WebView2、Edge 和其他平台的开发者表示有兴趣进行包括 PWA 在内的详细比较。
¥There are a few differences that come into play outside of rendering web content, and folks from Electron, WebView2, Edge, and others have expressed interest in working on a detailed comparison including PWAs.
进程间通信 (IPC)
¥Inter-Process Communication (IPC)
我们想立即强调一个区别，因为我们认为这通常是 Electron 应用性能方面的考量。
¥There is one difference we want to highlight immediately, as we believe it is often a performance consideration in Electron apps.
在 Chromium 中，浏览器进程充当沙盒渲染器和系统其他部分之间的进程间通信代理。虽然 Electron 允许非沙盒渲染进程，但许多应用选择启用沙盒以增强安全性。WebView2 始终启用沙盒，因此对于大多数 Electron 和 WebView2 应用而言，进程间通信 (IPC) 会影响整体性能。
¥In Chromium, the browser process acts as an IPC broker between sandboxed renderers and the rest of the system. While Electron allows unsandboxed render processes, many apps choose to enable the sandbox for added security. WebView2 always has the sandbox enabled, so for most Electron and WebView2 apps IPC can impact overall performance.
尽管 Electron 和 WebView2 具有相似的进程模型，但底层的进程间通信 (IPC) 有所不同。JavaScript 与 C++ 或 C# 之间的通信需要 marshalling 版本，最常见的是 JSON 字符串。JSON 序列化/解析是一项开销很大的操作，IPC 瓶颈可能会对性能产生负面影响。从 Edge 93 开始，WV2 将使用 CBOR 选项处理网络事件。
¥Even though Electron and WebView2 have a similar process models, the underlying IPC differs. Communicating between JavaScript and C++ or C# requires marshalling, most commonly to a JSON string. JSON serialization/parsing is an expensive operation, and IPC-bottlenecks can negatively impact performance. Starting with Edge 93, WV2 will use CBOR for network events.
Electron 支持通过 MessagePorts API 在任意两个进程之间进行直接进程间通信 (IPC)，而 MessagePorts API 则利用 结构化克隆算法。利用此功能的应用在进程间发送对象时可以避免 JSON 序列化的繁琐工作。
¥Electron supports direct IPC between any two processes via the MessagePorts API, which utilize the structured clone algorithm. Applications which leverage this can avoid paying the JSON-serialization tax when sending objects between processes.
概括
¥Summary
Electron 和 WebView2 存在一些差异，但它们在渲染 Web 内容方面的表现不会有太大差异。最终，应用的架构和 JavaScript 库/框架对内存和性能的影响比其他任何因素都要大，因为无论 Chromium 运行在何处，它都是 Chromium。
¥Electron and WebView2 have a number of differences, but don't expect much difference with respect to how they perform rendering web content. Ultimately, an app’s architecture and JavaScript libraries/frameworks have a larger impact on memory and performance than anything else because Chromium is Chromium regardless of where it is running.
特别感谢 WebView2 团队审阅这篇文章，并确保我们了解 WebView2 架构的最新情况。他们欢迎任何 项目反馈。
¥Special thanks to the WebView2 team for reviewing this post, and ensuring we have an up-to-date view of the WebView2 architecture. They welcome any feedback on the project.