僅僅過去 4 年,微軟最終放棄了它!
微軟近期宣布,旗下 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 中,用戶可以通過文字、聊天、語(yǔ)音或視頻與聯(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ā)布了文檔頁(yè)面,解釋為什么 Teams 的內(nèi)存占用量如此之高。
與 Electron 不同,WebView2 會(huì)監(jiān)控 Chromium 的行為、檢測(cè)還有多少系統(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 頁(yè)面。事實(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)目的組成部分。
為什么選 Webview2 ?Teams 需要處理大量音頻與視頻內(nèi)容,所以微軟認(rèn)為最好能把一部分工作負(fù)載轉(zhuǎn)移給 WebView2 更擅長(zhǎng)的原生形式。事實(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 庫(kù),也可以使用系統(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)楦黝惓R娮烂鎽?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ǔ)言或框架做任何預(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 庫(kù) / 框架在內(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)。



當(dāng)你的領(lǐng)導(dǎo)一點(diǎn)技術(shù)也不懂..

