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

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

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

追求更低的內存占用

對于已經嘗試了許多不同技術來減少桌面客戶端所需內存的微軟來說，這似乎是邁出的很大一步了。有很多網友表示很開心看到這一變化。

“Angular 也不見了。我們現在 100% 使用 reactjs。”Teams 工程師 Rish Tandon 在推特上表示。“這些變化聽起來很棒！”有人留言道，但對于網友提出的“Win10 和 MacOs 也會有嗎？”Tandon 沒有回答。

根據 Tandon 的說法，這項工作大概花費了 Teams 團隊 6 個月的時間，優化后的 Teams 2.0 消耗的內存將只有 Teams 1.0 上相同帳戶的一半。

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

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

與 Electron 不同，WebView2 會監控 Chromium 的行為、檢測還有多少系統內存可用，從而更有效地利用內存資源優化渲染體驗。如果其他應用程序或服務需要系統內存，Chromium 就會將空間移交給這些進程。如此一來，內存容量較小的低端計算機也能帶來不錯的性能表現。

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

目前，WebView2 已經被 Outlook 作為微軟“One Outlook”項目的組成部分。

為什么選 Webview2 ？

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

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

Electron 應用會始終捆綁并分發其開發過程中所使用的特定 Electron 版本。相比之下，WebView2 在發布方面則提供兩個選項：可以直接捆綁應用開發時所使用的特定 WebView2 庫，也可以使用系統上已經存在的共享運行時版本。WebView2 為這兩種方法分別提供工具，包括一個防止共享運行時丟失的引導安裝程序。而且從 Windows 11 版本開始，操作系統已經內置有 WebView2 運行時。

捆綁二者框架的應用程序負責保持框架更新，包括更新各次要安全增強版本。而對于使用共享 WebView2 運行時的應用程序，版本維護則依靠 WebView2 自己的更新程序，會以類似 Chrome 或 Edge 的方式獨立于應用程序之外運行。WebView2 更新應用程序的代碼或任何其他依賴項仍由開發者負責管理，這一點與 Electron 相同。值得注意的是，Windows 更新管理功能并未覆蓋到 Electron 與 WebView2。

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

ElectronJS 流程模型：

基于 WebView2 的應用程序流程模型：

Electron 能夠為各類常見桌面應用需求提供 API，例如菜單、文件系統訪問、通知等等。WebView2 則能以組件的形式集成到 WinForms、WPF、WinUI 或者 Win32 等應用程序框架當中。另外，WebView2 僅通過 JavaScript 提供符合 Web 標準的操作系統 API。

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

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

性能差異有多大？

需要強調一點區別，這也是 Electron 應用程序中的一項重要性能考量因素。

在 Chromium 當中，瀏覽器進程負責充當沙箱渲染器與系統其余部分之間的 IPC 代理。雖然 Electron 支持非沙箱渲染進程，但也有不少應用會選擇啟用沙箱以提升安全水平。WebView2 則始終啟用沙箱，所以對于大多數 Electron 及 WebView2 應用程序而言，IPC 確實會影響到整體性能。

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

Electron 則通過 MessagePorts API 支持任意兩個進程之間的直接 IPC，其中使用到了結構化克隆算法。利用這項功能，應用程序就能避免在不同進程間發送對象時執行資源成本高昂的 JSON 序列化操作。

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

2017 年時，Electron 可以說是 Web 應用在桌面平臺發布的最佳、甚至是唯一選項，但如今它卻成了需要被優化淘汰的對象。這可能代表著跨平臺框架格局中的一大關鍵里程碑，也可能僅僅是微軟 Teams 做出的一項小小調整。但具體如何，還有待時間的檢驗。

相關鏈接：

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

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

每一個特定或者特殊的日子里，幾乎所有的網站都變成了灰色，那么這種效果是怎么實現的呢？

今天就來簡單的實現一下這樣的效果。

添加以下全局CSS樣式，可以實現此效果：

代碼一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整個網站變成灰色的  -->

實現網頁顏色變灰這個效果，非常簡單：

filter: grayscale(100%);

這樣一段代碼即可實現，放在html和body的css屬性里即可實現。

意思是修改所有的顏色為黑白 (100% 灰度):

灰色網站會加入這段代碼，你可以按F12，把這段源碼刪除，即可變成彩色

代碼二：

html { 
   filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

使用方法：這段代碼可以變網頁為黑白，將代碼加到CSS最頂端就可以實現素裝。建議全國站長動起來。為在地震中遇難的同胞哀悼。

如果網站沒有使用CSS，可以在網頁/模板的HTML代碼<head>和</head> 之間插入：

<style>
   html{
     filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

有一些站長的網站可能使用這個css 不能生效，是因為網站沒有使用最新的網頁標準協議：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

請將網頁最頭部的<html>替換為以上代碼。

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和</object>之間插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最簡單的把頁面變成灰色的代碼是在head 之間加

<style type="text/css"> 
html {
   FILTER: gray
}
</style>

代碼三：

html{ 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: url("data:image/svg+xml;utf8,#grayscale"); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
-webkit-filter: grayscale(1);
}

總結：

以上幾種代碼（方法），都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼及調用的方式。在css的修飾時還有權重問題，所以有時候css代碼不生效的時候可以考慮一下代碼的權重問題。

歡迎關注第一山，今后將有更多前端開發技術與大家共同交流學習。