WebView2 与 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 是随系统预装的(*inbox*)。
捆绑其框架的应用程序负责更新这些框架,包括次要安全版本。对于使用共享 WebView2 运行时的应用程序,WebView2 有自己的更新程序,类似于 Chrome 或 Edge,它独立于你的应用程序运行。更新应用程序的代码或其任何其他依赖项仍然是开发者的责任,这与 Electron 相同。Electron 和 WebView2 都不由 Windows Update 管理。
Electron 和 WebView2 都继承了 Chromium 的多进程架构——即一个主进程与一个或多个渲染器进程通信。这些进程与系统上运行的其他应用程序完全隔离。每个 Electron 应用程序都是一个独立的进程树,包含一个根浏览器进程、一些工具进程和零个或多个渲染进程。使用相同用户数据文件夹(例如一组应用程序会这样做)的 WebView2 应用程序共享非渲染器进程。使用不同数据文件夹的 WebView2 应用程序不共享进程。
-
ElectronJS 进程模型
-
基于 WebView2 的应用程序进程模型
在此处阅读更多关于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 Project 开发的 API。我们提供了一份Electron Fugu API 兼容性快照。WebView2 维护了一个类似的与 Edge 的 API 差异列表。
Electron 为 Web 内容提供了可配置的安全模型,从完全访问到完全沙箱。WebView2 内容总是被沙箱化。Electron 提供全面的安全文档,指导你选择安全模型。WebView2 也提供安全最佳实践。
Electron 源码在 GitHub 上维护并可用。应用程序可以修改并构建自己的 Electron *品牌*。WebView2 源码在 GitHub 上不可用。
快速总结
Electron | WebView2 | |
---|---|---|
构建依赖 | Chromium | Edge |
源码是否在 GitHub 上可用 | 是 | 否 |
是否共享 Edge/Chrome DLL | 否 | 是 (从 Edge 90 开始) |
应用之间共享运行时 | 否 | 可选 |
应用 API | 是 | 否 |
Node.js | 是 | 否 |
沙箱 | 可选 | 总是 |
是否需要应用框架 | 否 | 是 |
支持的平台 | Mac, Win, Linux | Win (Mac/Linux 计划中) |
应用之间进程共享 | 永不 | 可选 |
框架更新由谁管理 | 应用程序 | WebView2 |
性能讨论
在渲染 Web 内容方面,我们预期 Electron、WebView2 和任何其他基于 Chromium 的渲染器之间性能差异很小。我们为那些有兴趣探究潜在性能差异的人创建了使用 Electron、C++ + WebView2 和 C# + WebView2 构建的应用程序的脚手架。
在渲染 Web 内容*之外*,还有一些差异会发挥作用,Electron、WebView2、Edge 和其他项目的人员已表示有兴趣进行详细比较,包括 PWAs。
进程间通信 (IPC)
有一个我们想立即强调的不同点,因为我们认为它通常是 Electron 应用中的性能考虑因素。
在 Chromium 中,浏览器进程充当沙箱化渲染器与系统其余部分之间的 IPC 代理。虽然 Electron 允许非沙箱化的渲染进程,但许多应用为了增加安全性选择启用沙箱。WebView2 总是启用沙箱,因此对于大多数 Electron 和 WebView2 应用来说,IPC 会影响整体性能。
尽管 Electron 和 WebView2 有相似的进程模型,但底层的 IPC 不同。JavaScript 与 C++ 或 C# 之间的通信需要封送处理 (marshalling),最常见的是封送到 JSON 字符串。JSON 序列化/解析是一个昂贵的操作,IPC 瓶颈会对性能产生负面影响。从 Edge 93 开始,WV2 将对网络事件使用CBOR。
Electron 通过MessagePorts API 支持任意两个进程之间的直接 IPC,该 API 利用结构化克隆算法。利用此特性的应用程序可以避免在进程间发送对象时支付 JSON 序列化开销。
总结
Electron 和 WebView2 有许多不同之处,但不要指望它们在渲染 Web 内容方面的表现有很大差异。最终,应用程序的架构以及 JavaScript 库/框架对内存和性能的影响比其他任何因素都大,因为无论在哪里运行,*Chromium 始终是 Chromium*。
特别感谢 WebView2 团队审阅此文,并确保我们对 WebView2 架构有最新的了解。他们欢迎对该项目提出任何反馈意见。