僅僅過去 4 年，微軟最終放棄了 Electron

微軟近期宣布，旗下 Teams 應(yīng)用活躍用戶已經(jīng)達(dá)到驚人的 2.5 億。這讓 Teams 成了繼 Word 和 Excel 之后，微軟 Office 生產(chǎn)力套件中的又一位當(dāng)紅明星。然而，Teams 一直受到性能問題的困擾，瘋狂吞噬系統(tǒng)資源，用戶們對(duì)此吐槽不斷。

前不久，微軟 Teams 高級(jí)副總裁宣布，Teams 將放棄 Electron，轉(zhuǎn)而匹配微軟自己的 Edge WebView2 渲染引擎以尋求性能提升。官方聲稱，調(diào)整之后 Teams 的內(nèi)存消耗量將直接減半，并有望以 Teams 2.0 的形象隨 2022 年末上市的 Windows 11 一同亮相。

據(jù)悉，在 Windows 11 中，用戶可以通過文字、聊天、語音或視頻與聯(lián)系人即時(shí)連接，無論他們使用的是 Windows、Android 還是 iOS。對(duì)方即使沒有下載 Teams 應(yīng)用程序，雙方也可以通過雙向短信聯(lián)系。Windows 11 還支持立即靜音和取消靜音，或者直接從任務(wù)欄開始呈現(xiàn) Teams。

對(duì)于已經(jīng)嘗試了許多不同技術(shù)來減少桌面客戶端所需內(nèi)存的微軟來說，這似乎是邁出的很大一步了。有很多網(wǎng)友表示很開心看到這一變化。

“Angular 也不見了。我們現(xiàn)在 100% 使用 reactjs?！盩eams 工程師 Rish Tandon 在推特上表示?！斑@些變化聽起來很棒！”有人留言道，但對(duì)于網(wǎng)友提出的“Win10 和 MacOs 也會(huì)有嗎？”Tandon 沒有回答。

根據(jù) Tandon 的說法，這項(xiàng)工作大概花費(fèi)了 Teams 團(tuán)隊(duì) 6 個(gè)月的時(shí)間，優(yōu)化后的 Teams 2.0 消耗的內(nèi)存將只有 Teams 1.0 上相同帳戶的一半。

時(shí)至今日，仍有眾多知名應(yīng)用都選用 Electron 來提供支持。Electron 框架能夠幫助 Web 開發(fā)者將自己的 Web 應(yīng)用發(fā)布至桌面平臺(tái)，且不受任何特定平臺(tái)的復(fù)雜性影響。但由于一切 Electron 應(yīng)用程序后端都要運(yùn)行只屬于自己的 Chrome OS 實(shí)例，所以同時(shí)運(yùn)行兩個(gè)以上此類應(yīng)用就會(huì)瘋狂消耗主機(jī)資源。

于是，在 Electron 之上執(zhí)行大量處理操作的 Teams 也無法避免地瘋狂占用內(nèi)存、拖慢計(jì)算機(jī)速度。微軟甚至專門發(fā)布了文檔頁面，解釋為什么 Teams 的內(nèi)存占用量如此之高。

與 Electron 不同，WebView2 會(huì)監(jiān)控 Chromium 的行為、檢測還有多少系統(tǒng)內(nèi)存可用，從而更有效地利用內(nèi)存資源優(yōu)化渲染體驗(yàn)。如果其他應(yīng)用程序或服務(wù)需要系統(tǒng)內(nèi)存，Chromium 就會(huì)將空間移交給這些進(jìn)程。如此一來，內(nèi)存容量較小的低端計(jì)算機(jī)也能帶來不錯(cuò)的性能表現(xiàn)。

WebView2 更像是一種類似于應(yīng)用窗口的控件，專門用于渲染 Web 頁面。事實(shí)上，WebView2 控件還允許在原生應(yīng)用程序中嵌入 Web 技術(shù)（包括 HTML、CSS 與 JavaScript）。所以要想將 Teams 規(guī)模的應(yīng)用程序過渡至 WebView2，開發(fā)團(tuán)隊(duì)需要對(duì)大量由 Electron 提供的抽象進(jìn)行重寫。因此，Teams 在本質(zhì)上將變得更接近于原生 Windows 應(yīng)用程序。

目前，WebView2 已經(jīng)被 Outlook 作為微軟“One Outlook”項(xiàng)目的組成部分。

Teams 需要處理大量音頻與視頻內(nèi)容，所以微軟認(rèn)為最好能把一部分工作負(fù)載轉(zhuǎn)移給 WebView2 更擅長的原生形式。事實(shí)也證明，Electron 抽象并不能有效完成這些處理任務(wù)。但從嚴(yán)格意義上來說，Webview2 并不屬于 Electron 的替代方案。

Webview2 并不是 Electron 那樣可以在桌面平臺(tái)上快速發(fā)布 Web 應(yīng)用的打包器。Electron 與 WebView2 都是以 Chromium 為基礎(chǔ)構(gòu)建而成，但更嚴(yán)格地說，WebView2 繼承的是 Edge 源代碼，而 Edge 又用到了 Chromium 源代碼的一個(gè)分支。Electron 則不與 Chrome 共享任何 DLL。WebView2 二進(jìn)制文件硬鏈接至 Edge（截至 Edge 90 的 Stable 版本），所以二者使用著相同的磁盤及其他一些工作集機(jī)制。

Electron 應(yīng)用會(huì)始終捆綁并分發(fā)其開發(fā)過程中所使用的特定 Electron 版本。相比之下，WebView2 在發(fā)布方面則提供兩個(gè)選項(xiàng)：可以直接捆綁應(yīng)用開發(fā)時(shí)所使用的特定 WebView2 庫，也可以使用系統(tǒng)上已經(jīng)存在的共享運(yùn)行時(shí)版本。WebView2 為這兩種方法分別提供工具，包括一個(gè)防止共享運(yùn)行時(shí)丟失的引導(dǎo)安裝程序。而且從 Windows 11 版本開始，操作系統(tǒng)已經(jīng)內(nèi)置有 WebView2 運(yùn)行時(shí)。

捆綁二者框架的應(yīng)用程序負(fù)責(zé)保持框架更新，包括更新各次要安全增強(qiáng)版本。而對(duì)于使用共享 WebView2 運(yùn)行時(shí)的應(yīng)用程序，版本維護(hù)則依靠 WebView2 自己的更新程序，會(huì)以類似 Chrome 或 Edge 的方式獨(dú)立于應(yīng)用程序之外運(yùn)行。WebView2 更新應(yīng)用程序的代碼或任何其他依賴項(xiàng)仍由開發(fā)者負(fù)責(zé)管理，這一點(diǎn)與 Electron 相同。值得注意的是，Windows 更新管理功能并未覆蓋到 Electron 與 WebView2。

Electron 與 WebView2 都繼承了 Chromium 的多進(jìn)程架構(gòu)——即由單一主進(jìn)程同一個(gè)或多個(gè)渲染器進(jìn)程通信。這些進(jìn)程同系統(tǒng)上正在運(yùn)行的其他應(yīng)用程序完全分離，每個(gè) Electron 應(yīng)用程序都擁有一個(gè)獨(dú)立的進(jìn)程樹，其中包含一個(gè)根瀏覽器進(jìn)程、部分實(shí)用程序進(jìn)程外加一定數(shù)量的渲染進(jìn)程。與應(yīng)用套件類似，使用相同用戶數(shù)據(jù)文件夾的各 WebView2 應(yīng)用程序之間會(huì)共享非渲染器進(jìn)程，但使用不同數(shù)據(jù)文件夾的 WebView2 應(yīng)用程序之間則不共享任何進(jìn)程。

ElectronJS 流程模型：

基于 WebView2 的應(yīng)用程序流程模型：

Electron 能夠?yàn)楦黝惓Ｒ娮烂鎽?yīng)用需求提供 API，例如菜單、文件系統(tǒng)訪問、通知等等。WebView2 則能以組件的形式集成到 WinForms、WPF、WinUI 或者 Win32 等應(yīng)用程序框架當(dāng)中。另外，WebView2 僅通過 JavaScript 提供符合 Web 標(biāo)準(zhǔn)的操作系統(tǒng) API。

Electron 當(dāng)中集成有 Node.js，因此 Electron 應(yīng)用程序可以使用來自渲染器及主進(jìn)程的任何 Node.js API、模塊或者 node-native-addon。WebView2 應(yīng)用程序則不會(huì)對(duì)應(yīng)用程序各個(gè)部分所使用的編程語言或框架做任何預(yù)設(shè)，JavaScript 代碼必須通過 application-host 進(jìn)程代理才能訪問操作系統(tǒng)。

Electron 提供可配置的 Web 內(nèi)容安全模型，配置范圍涵蓋完全開放訪問到完全沙箱模式。WebView2 內(nèi)容則始終保持沙箱化。Electron 還提供關(guān)于如何選擇安全模式的詳盡說明文檔，而 WebView2 則提供豐富的安全最佳實(shí)踐。

Electron 源代碼在 GitHub 上進(jìn)行維護(hù)與交付，各應(yīng)用程序能夠修改并構(gòu)建屬于自己的 Electron 品牌。WebView2 源代碼則并未登陸 GitHub。

具體差異總結(jié)如下：

需要強(qiáng)調(diào)一點(diǎn)區(qū)別，這也是 Electron 應(yīng)用程序中的一項(xiàng)重要性能考量因素。

性能差異有多大？

在 Chromium 當(dāng)中，瀏覽器進(jìn)程負(fù)責(zé)充當(dāng)沙箱渲染器與系統(tǒng)其余部分之間的 IPC 代理。雖然 Electron 支持非沙箱渲染進(jìn)程，但也有不少應(yīng)用會(huì)選擇啟用沙箱以提升安全水平。WebView2 則始終啟用沙箱，所以對(duì)于大多數(shù) Electron 及 WebView2 應(yīng)用程序而言，IPC 確實(shí)會(huì)影響到整體性能。

雖然 Electron 與 WebView2 的流程模型基本相似，但底層 IPC 卻有所不同。JavaScript 與 C++ 或 C# 之間的通信需要經(jīng)過編組，而且最常見的方法是編組為 JSON 字符串。請(qǐng)注意，JSON 序列化 / 解析操作的資源成本極高，因此 IPC 瓶頸必然會(huì)對(duì)性能產(chǎn)生負(fù)面影響。因此從 Edge 93 開始，WebView2 將對(duì)網(wǎng)絡(luò)事件使用 CBOR。

Electron 則通過 MessagePorts API 支持任意兩個(gè)進(jìn)程之間的直接 IPC，其中使用到了結(jié)構(gòu)化克隆算法。利用這項(xiàng)功能，應(yīng)用程序就能避免在不同進(jìn)程間發(fā)送對(duì)象時(shí)執(zhí)行資源成本高昂的 JSON 序列化操作。

Electron 與 WebView2 雖然有著不少差異之處，但二者在渲染 Webn 內(nèi)容方面卻高度一致。最核心的影響還是來自應(yīng)用程序架構(gòu)與 JavaScript 庫 / 框架在內(nèi)存與性能層面的影響，畢竟同樣師出 Chromium。

2017 年時(shí)，Electron 可以說是 Web 應(yīng)用在桌面平臺(tái)發(fā)布的最佳、甚至是唯一選項(xiàng)，但如今它卻成了需要被優(yōu)化淘汰的對(duì)象。這可能代表著跨平臺(tái)框架格局中的一大關(guān)鍵里程碑，也可能僅僅是微軟 Teams 做出的一項(xiàng)小小調(diào)整。但具體如何，還有待時(shí)間的檢驗(yàn)。

相關(guān)鏈接：

https://www.electronjs.org/blog/webview2

https://blog.devgenius.io/microsoft-is-finally-ditching-electron-9e081757f9db