跳至主要內容

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 會為每個方法提供工具，包括在缺少共用執行階段時的開機安裝程式。WebView2 從 Windows 11 開始以內建方式運送。

將其框架捆綁的應用程式負責更新這些框架，包括次要安全性發布。對於使用共用 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 不會在 Web 標準之外透過 JavaScript 提供作業系統 API。

Node.js 已整合到 Electron 中。Electron 應用程式可以使用轉譯器和主處理序中的任何 Node.js API、模組或 Node 原生附加元件。WebView2 應用程式不會假設您應用程式的其餘部分是以哪種語言或框架撰寫。您的 JavaScript 程式碼必須透過應用程式主機處理序 Proxy 任何作業系統存取。

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是否
沙箱 (Sandbox)選用總是
需要應用程式框架否是
支援的平台Mac、Win、LinuxWin (計劃支援 Mac/Linux)
應用程式間的程序共享永不選用
框架更新管理方式應用程式WebView2

效能討論​

當涉及到渲染您的網頁內容時，我們預期 Electron、WebView2 和任何其他基於 Chromium 的渲染器之間的效能差異不大。我們為有興趣研究潛在效能差異的人們，建立了使用 Electron、C++ + WebView2 和 C# + WebView2 建構的應用程式的腳手架。

在渲染網頁內容之外，有一些差異會產生影響，而來自 Electron、WebView2、Edge 和其他團隊的人們，已表示有興趣進行詳細的比較，包括 PWA。

跨程序通訊 (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 有許多差異，但不要期望它們在渲染網頁內容的效能方面有太大的差異。最終，應用程式的架構和 JavaScript 函式庫/框架對記憶體和效能的影響大於其他任何因素，因為無論 Chromium 在哪裡執行，它仍然是 Chromium。

特別感謝 WebView2 團隊審閱這篇文章，並確保我們對 WebView2 架構有最新的了解。他們歡迎任何對專案的回饋意見。