作者丨Afan Khan

編譯丨諾亞

出品 | 51CTO技術(shù)棧（微信號：blog51cto）

最近，微軟Edge團隊撰寫了一篇文章，介紹了微軟團隊如何努力提升Edge瀏覽器的性能。但在文中，微軟對React提出了批評，并宣布他們將不再在Edge瀏覽器的開發(fā)中使用React。

我將詳細解析他們的整篇文章內(nèi)容，探討這一決定對React、JavaScript開發(fā)者的影響，以及微軟Edge團隊背后的真正意圖。

一、歷史背景

微軟Edge瀏覽器是基于Chromium構(gòu)建的，Chromium是谷歌的一個開源網(wǎng)絡(luò)瀏覽器項目。微軟Edge的默認用戶界面來源于Chromium。

顯而易見，微軟不希望Edge看起來像Chrome。因此，Edge擁有一套由微軟設(shè)計的用戶界面組件和元素。然而，這些組件是利用React開發(fā)的。

Edge中的許多小部件都是通過React創(chuàng)建的，它們共同構(gòu)成了整個瀏覽器。

實際上，Edge瀏覽器并非一個徹頭徹尾的React項目。它更像是一個精巧的拼圖，通過HTML頁面巧妙地嵌入了多個React驅(qū)動的小部件，諸如菜單、下拉列表以及收藏夾標簽，都藏著React編織的小魔法。

可這樣的做法并不那么靈光，尤其是面對那些鮮少變動的UI信息時，顯得有點力不從心。其效率低下導(dǎo)致微軟開始對React產(chǎn)生質(zhì)疑。

但這個故事遠未揭開全部真相。我們很快就會發(fā)現(xiàn)，到底是React有問題，還是微軟在設(shè)計上存在人為缺陷。

二、問題所在

微軟聲稱React效率不高，因此他們進行了改進，并于2024年5月28日發(fā)布的一篇文章中宣布了這一消息。

微軟注意到，多個組件間共享的捆綁包過大，這導(dǎo)致了瀏覽器運行速度減慢。

理論上，這些組件不應(yīng)共用一個捆綁包，但既然微軟指出了這個問題，以下是他們的理由：

1.UI代碼存在模塊化問題。不同組件團隊不當(dāng)共享了通用代碼包和文件，導(dǎo)致UI界面中一個區(qū)域因加載了不必要的共享資源而拖累了另一個區(qū)域的加載速度。

2.微軟采用了一個框架，該框架依賴JavaScript，通過客戶端渲染技術(shù)來呈現(xiàn)UI。微軟聲稱，這是導(dǎo)致其瀏覽器速度變慢的第二個原因。

如前所述，Edge瀏覽器中集成了多個React應(yīng)用。

他們并未啟動多個React項目，而是在多個位置使用了一個單一的JavaScript包，并將該包掛載到了許多組件中的多個屬性上。

而第二個原因正是我撰寫本文的緣由。微軟間接地指出，React正是導(dǎo)致其代碼包問題的框架。

圖片

微軟時不時提及React，是因為他們正全速推進像React Native這樣針對Windows、MacOS乃至Xbox的項目。但對于Edge瀏覽器，React似乎成了他們不愿觸及的“逆鱗”。

即便是親手操刀React Native的開發(fā)，微軟也遲遲未讓其涉足Edge的領(lǐng)地。作為一款原生桌面應(yīng)用，Edge與React Native看似天作之合，但微軟對此有不同的看法。   

過去，借助HTML、CSS、JavaScript，乃至React來搭建菜單、下拉框等界面元素，是業(yè)界的“金科玉律”。而今，微軟決意轉(zhuǎn)身，背后自有一番深思熟慮的考量。

圖片

在過去，菜單及其選項通常是獨立的HTML文件。每個執(zhí)行特定操作的按鈕或鏈接都會重定向到一個HTML文件。

然而，這種舊模式主要適用于諸如菜單之類的組件。但顯然，微軟并未完全理解這一點。

他們?yōu)槊總€簡單的組件使用帶有React的HTML文件。每個HTML文件都需要JavaScript。并且，他們將這些JavaScript代碼作為捆綁包與每個團隊共享。

微軟將多個HTML頁面（在React應(yīng)用中）嵌入瀏覽器中以控制整個用戶界面。現(xiàn)在，他們正在尋找解決這兩個問題的辦法。

三、解決方案

首先，問題并不在于React本身，而是微軟錯誤地實施了它。

理想的狀況下，每個代碼包應(yīng)服務(wù)于特定的網(wǎng)頁，獨立地完成其功能。每個頁面可以有自己的獨立代碼包或集合。

但是，當(dāng)你在不同團隊的工作中共享相同的代碼包或文件時，混亂幾乎是必然的。每個團隊都在訪問和修改相同的代碼包。

結(jié)果不出所料。React并非不適合他們的用途，而是他們使用方式不當(dāng)。React本身并不慢，但當(dāng)你創(chuàng)建了數(shù)十個實例時，就不能指望它還能保持極高的運行速度。

微軟針對自己造成的問題提出了解決方案：他們創(chuàng)建了一個自定義框架。

微軟宣布了WebUI 2.0——這是一種以標記優(yōu)先的架構(gòu)。它通過最小化代碼包的大小及初始化路徑中運行的JavaScript量，解決了代碼包過大的問題。

微軟已開始使用這一新架構(gòu)來解決我前面提到的兩個問題。他們錯誤地使用了React，忽略了React Native的存在，并解決了一個本可避免的問題。

起初，他們在每個組件中使用了含有React的獨立HTML文件。然后，他們將每個HTML文件所需的JavaScript代碼卸載到了一個共享包中，這個包同時供其他十個團隊使用。而現(xiàn)在，他們不再使用React了。

對此，你怎么看呢？可以把你的想法寫在評論區(qū)。

參考鏈接：https://javascript.plainenglish.io/microsoft-is-ditching-react-f8b952b92b9b