跳到主内容

WebView2 和 Electron

·6 分钟阅读
electron
electron

在过去的几周里，我们收到了许多关于新的 WebView2 和 Electron 之间区别的问题。

两个团队都有明确的目标，即让 Web 技术在桌面端发挥最佳作用，并且正在讨论进行全面的共享比较。

Electron 和 WebView2 都是快速发展且不断演进的项目。我们整理了一份关于 Electron 和 WebView2 当前异同的简要概览。

架构概览​

Electron 和 WebView2 都基于 Chromium 源代码构建以渲染 Web 内容。严格来说，WebView2 基于 Edge 源代码构建，但 Edge 是使用 Chromium 源代码的一个分支构建的。Electron 不与 Chrome 共享任何 DLL。WebView2 二进制文件硬链接到 Edge（截至 Edge 90 为稳定版），因此它们共享磁盘空间和部分工作集。有关更多信息，请参阅 常青分发模式。

Electron 应用始终捆绑并分发其开发时所用的确切 Electron 版本。WebView2 在分发方面有两个选项。您可以捆绑应用开发时所用的确切 WebView2 库，或者使用系统上可能已存在的共享运行时版本。WebView2 为每种方法提供了工具，包括在共享运行时缺失时使用的引导安装程序。从 Windows 11 开始，WebView2 将随系统内置提供。

捆绑其框架的应用程序负责更新这些框架，包括次要安全版本。对于使用共享 WebView2 运行时的应用程序，WebView2 拥有自己的更新程序，类似于 Chrome 或 Edge，它独立于您的应用程序运行。更新应用程序代码或其任何其他依赖项仍然是开发人员的责任，与 Electron 相同。Electron 和 WebView2 都不由 Windows Update 管理。

Electron 和 WebView2 都继承了 Chromium 的多进程架构——即一个主进程与一个或多个渲染进程通信。这些进程与系统上运行的其他应用程序完全分离。每个 Electron 应用程序都是一个独立的进程树，包含一个根浏览器进程、一些实用进程以及零个或多个渲染进程。使用相同用户数据文件夹的 WebView2 应用程序（例如一组应用程序），会共享非渲染进程。使用不同数据文件夹的 WebView2 应用程序不共享进程。

  • ElectronJS 进程模型

    ElectronJS Process Model Diagram

  • 基于 WebView2 的应用进程模型

    WebView2 Process Model Diagram

在此处阅读更多关于 WebView2 进程模型和 Electron 进程模型的信息。

Electron 提供了用于常见桌面应用程序需求的 API，例如菜单、文件系统访问、通知等。WebView2 是一个旨在集成到应用程序框架（例如 WinForms、WPF、WinUI 或 Win32）中的组件。WebView2 不通过 JavaScript 提供 Web 标准之外的操作系统 API。

Node.js 已集成到 Electron 中。Electron 应用程序可以在渲染器和主进程中使用任何 Node.js API、模块或 Node 原生插件。WebView2 应用程序不假设您的应用程序其余部分是用何种语言或框架编写的。您的 JavaScript 代码必须通过应用程序宿主进程代理任何操作系统访问。

Electron 致力于保持与 Web API 的兼容性，包括从 Fugu 项目开发的 API。我们提供了一份Electron 的 Fugu API 兼容性概览。WebView2 维护着一份类似的与 Edge 的 API 差异列表。

Electron 针对 Web 内容具有可配置的安全模型，从完全访问到完全沙盒。WebView2 内容始终处于沙盒中。Electron 提供了关于选择安全模型的全面安全文档。WebView2 也提供了安全最佳实践。

Electron 源代码在 GitHub 上维护并可用。应用程序可以修改并构建自己的 Electron定制版本。WebView2 源代码不在 GitHub 上提供。

快速总结

ElectronWebView2
构建依赖ChromiumEdge
GitHub 上是否有源代码是否
共享 Edge/Chrome DLL否是（截至 Edge 90）
应用间共享运行时否可选
应用 API是否
Node.js是否
沙盒可选始终
需要应用框架否是
支持的平台Mac, Win, LinuxWin（Mac/Linux 计划中）
应用间进程共享从不可选
框架更新由…管理应用程序WebView2

性能讨论​

在渲染 Web 内容方面，我们预计 Electron、WebView2 和任何其他基于 Chromium 的渲染器之间性能差异不大。我们为那些有兴趣调查潜在性能差异的人创建了使用 Electron、C++ + WebView2 和 C# + WebView2 构建应用程序的脚手架。

在 Web 内容渲染之外，还有一些差异，Electron、WebView2、Edge 和其他团队的人员都表示有兴趣就包括 PWA 在内的详细比较进行合作。

进程间通信 (IPC)​

有一个差异我们想立即强调，因为我们认为它在 Electron 应用程序中经常是性能考虑因素。

在 Chromium 中，浏览器进程充当沙盒渲染器与系统其余部分之间的 IPC 代理。虽然 Electron 允许非沙盒渲染进程，但许多应用程序选择启用沙盒以增强安全性。WebView2 始终启用沙盒，因此对于大多数 Electron 和 WebView2 应用程序，IPC 可能会影响整体性能。

尽管 Electron 和 WebView2 具有相似的进程模型，但底层的 IPC 不同。JavaScript 和 C++ 或 C# 之间的通信需要封送处理，最常见的是转换为 JSON 字符串。JSON 序列化/解析是一项昂贵的操作，IPC 瓶颈可能会对性能产生负面影响。从 Edge 93 开始，WV2 将使用CBOR 进行网络事件。

Electron 通过 MessagePorts API 支持任意两个进程之间的直接 IPC，该 API 利用了结构化克隆算法。利用此功能的应用程序可以在进程间发送对象时避免 JSON 序列化带来的开销。

总结​

Electron 和 WebView2 存在许多差异，但在渲染 Web 内容方面的表现预计差异不大。最终，应用程序的架构和 JavaScript 库/框架对内存和性能的影响比其他任何因素都要大，因为Chromium 终归是 Chromium，无论它在哪里运行。

特别感谢 WebView2 团队审阅此帖子，并确保我们对 WebView2 架构有最新的了解。他们欢迎对项目提出任何反馈。