近日，微軟的 Edge 瀏覽器宣布從 122 版本開始，瀏覽器基礎 UI 響應速度提升了 42%，對于沒有 SSD 或少于 8GB RAM 的設備用戶，響應速度提升了 76%，下面就來看看 Edge 是如何實現性能提升的！ziK28資訊網——每日最新資訊28at.com

# Edge 瀏覽器放棄 React

目前，Edge 已完成部分改造，未來幾個月，微軟將對 Edge 的更多功能進行改進，以提升響應速度。ziK28資訊網——每日最新資訊28at.com

那你可能要問了，Edge 不是瀏覽器嘛，為啥還會使用 React 呢？ 這是因為，瀏覽器很多功能實際上就是網頁，都是使用常用的前端技術（如 React）開發的，不僅 Edge，很多瀏覽器的功能都是使用常見的前端技術實現的。ziK28資訊網——每日最新資訊28at.com

微軟通過收集用戶數據了解到，Edge UI 的響應速度有待提升，并發現了一些改進點，比如 Edge 中組織 UI 代碼的方式不夠模塊化、代碼包過大并且過度依賴 JavaScript 框架。其實，從 2014 年左右開始，開發者就開始有些過度依賴 JavaScript，特別是 React、Vue 等庫和框架的引入，雖然這有助于 Web 應用的擴展和用戶界面的動態性，但也增加了用戶設備上處理的 JavaScript 量，影響了應用性能。ziK28資訊網——每日最新資訊28at.com

因此，微軟推出了一個名為 WebUI 2.0 的內部項目，通過減少了對 React 的依賴，增加對 Web Components 的使用，構建以 HTML 為先的全新架構，減少了代碼包大小和 JavaScript 代碼的運行量，提高了 UI 的響應性能。ziK28資訊網——每日最新資訊28at.com

微軟 Edge 團隊希望更多的網站開始采用 HTML 優先、小包和更少 UI 渲染JavaScript 代碼的方法。未來，微軟計劃將 WebUI 2.0 的組件開源，讓更多開發者都能受益。ziK28資訊網——每日最新資訊28at.com

# 擁抱 Web Components

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

擁抱 Web Components 是基于對 Web 技術發展趨勢的深刻洞察和對性能優化的追求。這一決策旨在通過利用瀏覽器原生支持的Web Components 技術，實現更快的加載速度、更低的運行開銷、更廣泛的跨瀏覽器兼容性、高度的可重用性和封裝性，以及自定義的性能優化。ziK28資訊網——每日最新資訊28at.com

Web Components是一套由多個Web平臺標準組成的技術，旨在允許開發者創建可重用、獨立的Web元素。它主要由以下三個核心部分組成：ziK28資訊網——每日最新資訊28at.com

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

最后來分享 8 個開源的 Web Components 項目，以供學習。ziK28資訊網——每日最新資訊28at.com

Fast Element

Fast Element 是一個基于 Web Components 標準的開源 UI 庫，由微軟出品。Fast Element 旨在提供高性能、可維護和易擴展的 Web Components，以便構建現代化 Web 應用程序。Fast Element 的特點包括：ziK28資訊網——每日最新資訊28at.com

• 簡單易用：提供了一組簡單的 API，可以使用 TypeScript 進行開發，并且支持使用 CSS 樣式進行個性化定制，使得組件開發更加容易。
• 可復用性強：提供了一些通用的組件，如按鈕、文本框等，這些組件可以直接調用或集成到其他組件中，降低了開發和維護成本。
• 樣式定制靈活：支持使用 CSS 變量進行主題定制，也支持使用 LESS 或者 Sass 進行樣式的編寫和管理，開發者可以根據自身需求自由定制樣式。
• 支持無障礙訪問：提供了高度可訪問的 UI 組件，符合 W3C 的 Web Content Accessibility Guidelines (WCAG) 標準，在無障礙環境下使用也非常友好。

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/Microsoft/fastziK28資訊網——每日最新資訊28at.com

omi

omi 是騰訊出品的 Web Components 框架，內置 JSX 和信號 signal/Signal。其具有以下特點：ziK28資訊網——每日最新資訊28at.com

• 信號驅動的響應式編程：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框架具有微小的尺寸和極速的性能，支持所有現代瀏覽器。這得益于框架采用了先進的技術和優化手段，使得應用能夠在保持高性能的同時保持較小的體積。

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/Tencent/omiziK28資訊網——每日最新資訊28at.com

Quark Design

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

圖片ziK28資訊網——每日最新資訊28at.com

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

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/hellof2e/quark-designziK28資訊網——每日最新資訊28at.com

Lit

Lit 是一個基于 Web Components 標準的 JavaScript 庫，它提供了一系列的工具和 API ，使得創建高性能、動態、可重用的 Web 組件變得更加容易。Lit 的特點包括：ziK28資訊網——每日最新資訊28at.com

• 輕量級：Lit 的代碼庫非常小巧，壓縮后只有不到 10KB，這使得它使用起來非常方便，加載速度也很快。
• 編程簡潔：Lit 提供了一組簡單的 API，并且支持使用 JavaScript 模板字符串進行 HTML 的快速構建，降低組件編寫的難度。
• 可擴展性強：Lit 不僅支持原生的 Web Components 標準 API，還提供了一些自定義的組件 API，可以更加方便地實現高級功能。
• 生態豐富：Lit 社區活躍，提供了許多常用的外部庫和組件，可以幫助開發者快速搭建復雜的應用程序。

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/lit/litziK28資訊網——每日最新資訊28at.com

Stencil

Stencil是一個開源的使用TypeScript、JSX和CSS來創建符合標準的Web Components的編譯器。它結合了最流行框架的最佳概念，提供便捷的API和關鍵功能，如預渲染和對象作為屬性，使編寫快速、強大的組件變得更加簡單。Stencil還可以生成特定于框架的包裝器，以便與流行的框架直接集成使用，并提供優化的開發體驗，包括實時重載和一個小型開發服務器。ziK28資訊網——每日最新資訊28at.com

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/ionic-team/stencilziK28資訊網——每日最新資訊28at.com

Lion

Lion 是一套基于 Web Components 的組件庫，具備高性能、高可訪問性和靈活性。作為一個無偏見、可定制的白標層，Lion 提供了豐富的組件基礎，允許開發者輕松擴展和構建自己的組件層。ziK28資訊網——每日最新資訊28at.com

• 在性能方面，Lion 專注于在所有主流瀏覽器中實現卓越的性能，同時保持極低的依賴項數量，確保高效的運行和加載速度。
• 在可訪問性方面，Lion 致力于符合 WCAG 2.2 AA 標準，通過創建無障礙的組件，確保所有人都能夠輕松使用和訪問。
• 在靈活性方面，Lion 提供了基于 Web 組件和 JavaScript 類的解決方案，這些方案可以根據具體需求進行使用、采納和擴展，滿足各種場景下的需求。
• Lion 還采用了現代代碼的分發方式，以純 es 模塊的形式提供，便于集成和使用。同時，它還以最合適的形式公開函數、類和 Web 組件，方便開發者根據需求選擇和使用。

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/ing-bank/lionziK28資訊網——每日最新資訊28at.com

Shoelace

Shoelace 是一個具有前瞻性的基于 Web Components 的 UI 組件庫。它具有以下特點：ziK28資訊網——每日最新資訊28at.com

• 兼容所有框架
• 兼容CDN
• 可通過CSS完全自定義
• 包含深色主題
• 以無障礙性為設計核心
• 提供一流的React支持
• 內置本地化功能

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/shoelace-style/shoelaceziK28資訊網——每日最新資訊28at.com

Awesome Web Components

一系列 Web Components 學習資源，包含文章、案例、框架、庫、生態系統、圖書等。ziK28資訊網——每日最新資訊28at.com

圖片ziK28資訊網——每日最新資訊28at.com

Github：https://github.com/web-padawan/awesome-web-componentsziK28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-92156-0.html微軟Edge瀏覽器放棄 React，性能大幅提升！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 七個備受歡迎的IntelliJ IDEA實用插件

下一篇： NVIDIA 正式發布NVIDIA NIM：讓數百萬人成為生成式 AI 開發者