微軟Edge瀏覽器放棄 React，效能大幅提升！

2024-06-03碼農

近日，微軟的 Edge 瀏覽器宣布從 122 版本開始，瀏覽器基礎 UI 響應速度提升了 42% ，對於沒有 SSD 或少於 8GB RAM 的裝置使用者，響應速度提升了 76% ，下面就來看看 Edge 是如何實作效能提升的！

# Edge 瀏覽器放棄 React

目前，Edge 已完成部份改造，未來幾個月，微軟將對 Edge 的更多功能進行改進，以提升響應速度。

那你可能要問了，Edge 不是瀏覽器嘛，為啥還會使用 React 呢？ 這是因為，瀏覽器很多功能實際上就是網頁，都是使用常用的前端技術（如 React）開發的，不僅 Edge，很多瀏覽器的功能都是使用常見的前端技術實作的。

微軟透過收集使用者數據了解到，Edge UI 的響應速度有待提升，並行現了一些改進點，比如 Edge 中組織 UI 程式碼的方式不夠模組化、程式碼包過大並且過度依賴 JavaScript 框架 。其實，從 2014 年左右開始，開發者就開始有些過度依賴 JavaScript，特別是 React、Vue 等庫和框架的引入，雖然這有助於 Web 套用的擴充套件和使用者介面的動態性，但也增加了使用者裝置上處理的 JavaScript 量，影響了套用效能。

因此，微軟推出了一個名為 WebUI 2.0 的內部計畫， 透過減少了對 React 的依賴，增加對 Web Components 的使用，構建以 HTML 為先的全新架構 ，減少了程式碼包大小和 JavaScript 程式碼的執行量，提高了 UI 的響應效能。

微軟 Edge 團隊希望更多的網站開始采用 HTML 優先、小包和更少 UI 渲染JavaScript 程式碼的方法。未來，微軟計劃將 WebUI 2.0 的元件開源，讓更多開發者都能受益。

# 擁抱 Web Components

2024 年，前端框架的競爭日趨激烈，各大框架都在持續發力，力求在市場中占據一席之地。然而，在這場競爭中，Edge 瀏覽器卻放棄廣受歡迎的 React 框架，轉而擁抱 Web Components。

擁抱 Web Components 是基於對 Web 技術發展趨勢的深刻洞察和對效能最佳化的追求。這一決策旨在透過利用瀏覽器原生支持的Web Components 技術，實作更快的載入速度、更低的執行開銷、更廣泛的跨瀏覽器相容性、高度的可重用性和封裝性，以及自訂的效能最佳化。

Web Components是一套由多個Web平台標準組成的技術，旨在允許開發者建立可重用、獨立的Web元素。它主要由以下三個核心部份組成：

自訂元素 ：這是 Web Components 的核心部份，它允許開發人員定義自己的HTML元素，並定義這些元素的行為和樣式。透過使用自訂元素，開發人員可以建立具有特定功能和樣式的自訂標簽，例如 <my-button> 或 <my-carousel> 。
Shadow DOM ：提供了一種封裝HTML、CSS和JavaScript的方法，使它們可以在元件內部使用，而不會影響到元件外部的DOM結構。這有助於保持元件的獨立性和封裝性，避免樣式和邏輯沖突。
HTML 樣版 ：HTML樣版提供了一種在HTML文件中定義可重用元件結構的方法。這些樣版可以被插入到文件的任何位置，並且可以在需要時透過JavaScript進行複制和例項化。

最後來分享 8 個開源的 Web Components 計畫，以供學習。

Fast Element

Fast Element 是一個基於 Web Components 標準的開源 UI 庫，由微軟出品。Fast Element 旨在提供高效能、可維護和易擴充套件的 Web Components，以便構建現代化 Web 應用程式。Fast Element 的特點包括：

簡單易用 ：提供了一組簡單的 API，可以使用 TypeScript 進行開發，並且支持使用 CSS 樣式進行個人化客製，使得元件開發更加容易。

可復用性強 ：提供了一些通用的元件，如按鈕、文字域等，這些元件可以直接呼叫或整合到其他元件中，降低了開發和維護成本。

樣式客製靈活 ：支持使用 CSS 變量進行主題客製，也支持使用 LESS 或者 Sass 進行樣式的編寫和管理，開發者可以根據自身需求自由客製樣式。

支持無障礙存取 ：提供了高度可存取的 UI 元件，符合 W3C 的 Web Content Accessibility Guidelines (WCAG) 標準，在無障礙環境下使用也非常友好。

Github： https://github.com/Microsoft/fast

omi

omi 是騰訊出品的 Web Components 框架，內建 JSX 和訊號 signal/Signal。其具有以下特點：

訊號驅動的響應式編程 ：OMI框架采用訊號驅動的響應式編程方式，確保使用者介面能夠準確地根據需要進行更新。這種編程方式有助於減少不必要的渲染和計算，提高套用的效能和使用者體驗。

完備的樣版和元件 ：OMI框架提供了豐富的樣版和元件，包括OMIU、JSX、Router、Suspense、VChart和VTable（Visactor）等。這些元件和樣版都是開箱即用的，無需進行任何配置，可以大大簡化開發過程，提高開發效率。

物件導向編程（OOP）和數據驅動編程（DOP） ：OMI框架同時支持物件導向編程（OOP）和數據驅動編程（DOP）兩種編程方式。這意味著開發者可以根據計畫需求選擇最適合的編程方式，靈活應對不同的開發場景。

可構建樣式表（Constructable stylesheets） ：OMI框架支持可構建樣式表（Constructable stylesheets），這使得樣式的管理和共享變得更加輕松。透過可構建樣式表，開發者可以更加高效地管理和維護套用的樣式。

Web Components支持 ：OMI框架支持Web Components，這意味著開發者可以輕松地建立符合標準的跨框架元件。這有助於提高元件的復用性和可維護性，降低開發成本。

微小尺寸和極速效能 ：OMI框架具有微小的尺寸和極速的效能，支持所有現代瀏覽器。這得益於框架采用了先進的技術和最佳化手段，使得套用能夠在保持高效能的同時保持較小的體積。

Github： https://github.com/Tencent/omi

Quark Design

Quark Design 是哈啰出品的面向 C 端的下一代前端元件庫，它可以在任意框架或無框架中使用，支撐哈啰幾乎所有 C 端 H5 計畫，包括交易，支付，兩輪，商城等。這是一個設計輕盈優雅的企業級 UI 元件庫，可以滿足所有日常使用的基礎元件需求。

Quark design 是一種全新的元件庫，底層基於Web Components，不同於傳統元件框架（如Antd, Vant），需要瀏覽器中需要做大量前置工作。Quarkd則將這些工作放到構建應用程式的編譯時來處理。元件的數據更新響應由瀏覽器自身API處理，更簡單，更高效！

Github： https://github.com/hellof2e/quark-design

Lit

Lit 是一個基於 Web Components 標準的 JavaScript 庫，它提供了一系列的工具和 API ，使得建立高效能、動態、可重用的 Web 元件變得更加容易。Lit 的特點包括：

輕量級 ：Lit 的程式碼庫非常小巧，壓縮後只有不到 10KB，這使得它使用起來非常方便，載入速度也很快。

編程簡潔 ：Lit 提供了一組簡單的 API，並且支持使用 JavaScript 樣版字串進行 HTML 的快速構建，降低元件編寫的難度。

可延伸性強 ：Lit 不僅支持原生的 Web Components 標準 API，還提供了一些自訂的元件 API，可以更加方便地實作高級功能。

生態豐富 ：Lit 社群活躍，提供了許多常用的外部庫和元件，可以幫助開發者快速搭建復雜的應用程式。

Github： https://github.com/lit/lit

Stencil

Stencil是一個開源的使用TypeScript、JSX和CSS來建立符合標準的Web Components的編譯器。它結合了最流行框架的最佳概念，提供便捷的API和關鍵功能，如預渲染和物件作為內容，使編寫快速、強大的元件變得更加簡單。Stencil還可以生成特定於框架的包裝器，以便與流行的框架直接整合使用，並提供最佳化的開發體驗，包括即時多載和一個小型開發伺服器。