摘要：在美國本土流量前 100 萬的站點中（按流量統計），Vue 的性能追平了 React。

 

最近幾年，框架已經成為 Web 開發領域的標桿，其中的排頭兵當數 React。事實上，我們已經很少見到有人不用任何框架或者 CMS 之類的平臺，就可以開發新的網站或 Web 應用程序。

 

雖然 React 的口號是“一套用于構建用戶界面的 JAVAScript 庫”，絲毫沒提框架的事，但我認為事實已經確定：大部分 React 開發者都把它當成框架來看，當成框架來用。至少，大家會把 React 當成整體應用程序框架中的一部分，例如 NextJS、Gatsby 或者 RemixJS 等。

 

但從 Web 開發者的角度出發，這類框架帶來開發體驗改進的背后，究竟讓我們付出了怎樣的代價？尤其是，最終用戶又為 Web 開發圈的這種框架依賴性付出了什么？

 

在本文中，我們將根據 google Chrome 用戶體驗報告（簡稱 CrUX）收集到的一線數據，分析與各類框架相關的性能成本。這些信息有趣且具有借鑒意義，通過這些數據分析，或許能給前端及全棧開發者，從當前眾多框架和平臺中開辟出一條清晰的選擇思路。

 

但首先得強調一點，查看數據時千萬不要把相關性和因果性混為一談。當使用某種特定框架時，其網頁性能比另一框架的網頁性能更好或更差，并不能代表框架本身的優劣。比如，可能是因為某些框架常被用于構建重量級網站而產生了一些影響。

 

換句話說，這些數據最多能幫助大家在設計前端項目時，更合理地考察并選擇框架方案。只要影響不大，我們不妨選擇那些性能比更好的框架。

 

從一線收集 Core Web Vitals

 

前文已經提到，此次分析的主要數據源是 Google CrUX。作為一套云端數據庫，CrUX 會實時從 Chrome 瀏覽器會話中收集真實用戶指標（RUM）。只要大家選擇同步瀏覽歷史記錄，不設置同步密碼，并且啟用“使用統計報告”功能，那么每當我們用 Chrome 加載網頁時，關于會話的信息都會被自動上報給 CrUX。尤其是收集的測量值包括為每個會話測量的三項，它們被統稱為核心頁面指標，即 Core Web Vitals（CWV）。

• 最大內容繪制 （LCP）
• 首次輸入延遲 （FID）
• 累積布局偏移 （CLS）

 

近年來，這些指標已經成為現代 Web 性能分析的基石。

 

針對每項指標，谷歌分別定義了：好（綠色）、一般 / 須改進（橙色）和差（紅色）三個數值范圍。

 

從 2021 年 6 月開始，這些指標因素被納入谷歌搜索排名，這也讓幾個小小的數字獲得了較高的江湖地位。

 

除了為各個會話收集現場數據外，谷歌還使用 WebPageTest 工具對各網站執行綜合衡量。這些實驗室測量值將由 WAppalyzer 服務收集到另一個名為 HTTP Archive 的在線存儲庫內。

 

之后，谷歌可以使用其 BigQuery 項目對這兩個集合執行查詢。但要從這些數據中獲取洞察力，最簡單的方法還是使用 Rick Viscomi 創建的 Core Web Vitals 技術報告。（Rick 是谷歌公司的開發關系主管工程師，負責管理 CrUX 和 HTTP Archive）。該報告提供了一種方法，即以交互方式繪制各類基于 Web 的平臺與技術相關性能數據，并輕松地對內容做出相互比較。

 

在本文中，我們主要通過 Core Web Vitals 技術報告中的數據提煉分析見解。

 

在數據分析過程中，我們需要注意以下幾點：

 

• 雖然現場數據收集自各個頁面，但技術報告本身會按來源顯示，且來源值為該來源中所有頁面值的聚合，最終結果為基于頁面流量計算出的加權平均值。
• 另一方面，良好來源的比率沒有加權。這意味著即使流量相對較少，但只要性能表現不錯，則該來源在報告中就等同于性能同樣良好，但流量明顯更高的其他來源。我們可以按流行度排名對來源進行過濾，借此拉開低流量源與高流量源之間的差距。
• HTTP Archive 僅分析各來源的主頁。這意味著框架識別只針對主頁進行，并將該來源內的所有其他頁面全部視為該框架的性能聚合——無論子頁面中是否繼續使用該框架，或者是否配合使用到其他框架。
• 各子域被視為獨立的不同來源。

 

比較各 JavaScript 框架的 CWV

 

讓我們先從各 JavaScript 框架的性能說起。具體來看，要看使用這些框架的網站當中，有多大比例在三項 CWV 指標上都得到良好評價。三者全“好”，代表該網站應該是在性能上帶來了不錯的用戶體驗，也有資格獲得谷歌搜索排名的優先展示。

 

為了消除地域分布對不同框架之間造成的影響，我對數據進行了過濾，僅涉及美國本土會話數據。圖中的 ALL 線是指 CrUX 的所有網站（而非僅僅是使用了框架的網站），主要用于參考和比較。

 

在美國本土，三項 CWV 指標均為綠色的移動端會話所使用的領先框架所占百分比。

 

在美國本土，三項 CWV 指標均為綠色的桌面端會話所使用的領先框架所占百分比。

 

注意：在我們的分析中，移動端并不包含 IOS 設備，例如 iphone。這是因為 iOS 上的 Chrome 其實就是 Safari 內核換皮，所以根本不測量或上報 CWV（iOS 上的所有瀏覽器都是如此，全部屬于 Safari 換皮）。

 

首先，我們可以看到不同的框架會產生截然不同的結果。而且無論好壞，各框架在過去一年中的性能表現基本保持穩定（其中 Preact 是個例外，后文將具體解釋變化的原因）。這表明評分確實有意義，而非僥幸或統計異常下的結果。

 

根據測量值，我們發現不同框架確實對應著不同的性能成本：通過與 ALL 基準相比，可以看到只要使用框架，其性能一般就要落后于不用框架構建的網站。雖然 React、Preact 和 Svelte 等框架已經能讓性能接近整體平均水平，但有趣的是，沒有任何框架能提供比其他框架更好的性能。

 

React 和 Preact 基本可以說是并駕齊驅——考慮到 Preact 比 React 小得多，所以這樣的結論可能有點出乎意料。Preact 只有約 4 KB，而 React 大概是 32KB（二者都經過壓縮）。很明顯，在大多數情況下，28KB 的下載量差值并沒有多大影響。Preact 的締造者 Jason Miller 最近也就此做出說明：

 

Preact 并不直接關聯于任何特定 SSR 或者服務解決方案，而這些才是決定 CWV 的關鍵。雖然 Preact 不可避免會對 CWV（實際就是其中的 FID，即首次輸入延遲）造成影響，但遠不如頁面交付中涉及的其他技術那么直接。

 

— Jason Miller (@_developit)2022 年 2 月 11 日

 

Vue 和 AngularJS 處于第二梯隊——在移動端獲得良好 CWV 的概率比第一梯隊低 20% 到 25%，而桌面端的概率則低 15% 到 20%（其中同樣不包含 iOS）。也就是說，Vue 似乎正在逐步改進，慢慢縮小與 React 之間的性能差距。

 

Preact 性能的大幅下降跟框架自身無關，主要原因來自 Wappalyzer 對 Preact 的識別方式。很遺憾，Wappalyzer 無法識別 2021 年 11 月之前使用 Preact 構建的大部分網站，因此在此時間點之前的 Preact 統計結果有錯，可以直接忽略。

 

通過熱門網站數據對比領先框架

 

當我們把目光轉向全美排名前 100 萬的站點（按流量統計）時，有趣的變化出現了：Vue 幾乎緊跟在 React 身后，可以看到熱門網站中有更多使用 Vue 的高性能案例；而對于 React，表現良好的站點反而意外有所減少：

 

在美國本土流量前 100 萬的站點中，三項 CWV 指標均為綠色的移動端會話所使用的領先框架所占百分比。

 

在美國本土流量前 100 萬的站點中，三項 CWV 指標均為綠色的桌面端會話所使用的領先框架所占百分比。

 

通過各指標分析對比框架性能

 

除了關注整體 CWV 之外，技術報告還對各項指標展開逐一分析。我們先從 FID 開始：

 

在美國本土，FID 指標為綠色的移動端會話所使用的領先框架所占百分比。

 

大家可能已經預料到使用框架的網站在代表響應性能的 FID 上會表現較差，主要是因為框架中會大量使用 JS 代碼。但實際情況并非如此——事實上，FID 指標并沒有拉開差距，所有框架都拿到了近乎完美的得分。

 

即使是查看集合中所有網站的聚合，結論也依舊不變。出于這個原因，谷歌正研究推出其他更好的響應性指標，而且已經通過測試收集反饋意見。

 

所以，觀察 LCP 指標明顯更有意義：

 

在美國本土，LCP 指標為綠色的移動端會話所使用的領先框架所占百分比。

 

有趣的是，LCP 分數與 CWV 整體高度一致，只是分布范圍更大：ALL、React、Preact 和 Svelte 大約高出 10%，而 Vue 和 AngularJS 則基本保持不變。而將統計范圍限制在前 100 萬個站點時，會看到 Preact 和 Svelte 的成績略有提升，但 React 基本保持不動，所以被 Vue 迎頭趕上。

 

在美國本土流量排名前 100 萬的網站中，LCP 指標為綠色的移動端會話所使用的領先框架所占百分比。

 

最后，我們來看看 CLS，同樣是先從全體網站開始：

 

在美國本土，CLS 指標為綠色的移動端會話所使用的領先框架所占百分比。

 

接下來是排名前 100 萬的網站：

 

在美國本土流量排名前 100 萬的網站中，CLS 指標為綠色的移動端會話所使用的領先框架所占百分比。

 

這里可以看到，React 和 Preact 的性能都出現了大幅下降，特別是 React，導致 Vue 成功完成雙殺反超。

 

換句話說，對于 Vue，如果我們只著眼于高流量頂級站點，其 LCP 和 CLS 的良好比率都會提高。另一方面，React 的 LCP 基本保持不變，CLS 反而有所下降。

 

使用 React 的頂級網站之所以出現性能下降，很可能是因為頁面上的廣告變多了。廣告通常會對 CLS 產生不利影響，因為它們的出現會擠壓其它內容的資源空間。但我倒覺得事情未必如此，因為這解釋不了 React 跟其他框架之間的顯著差異。另外，照這樣推斷，更多廣告同樣也會影響到 LCP，但可以看到 LCP 指標基本保持不變。

 

Web 應用程序框架的性能指標

 

那 NextJS 和 NuxtJS 是怎么回事？為什么它們沒能像 Gatsby（以及 Wix）那樣帶來預期中的全方位性能優勢？通過對各項指標的單獨分析，也許我們能夠破解這個謎團。

 

跟之前一樣，FID 指標對于整體良好性能占比基本沒有影響，因為所有框架都達到了 97% 以上的良好 FID 比率。

 

但在比較 CLS 比率時，事情變得有趣起來：

 

在美國本土，CLS 指標為綠色的移動端會話所屬網站的所占百分比。

 

可以看到，NextJS 實際上超越了 React，但 Gatsby 仍然保持領先。而 NuxtJS 則介于 Vue 和 React 之間。

 

因為所有框架的良好 FID 比率和 CLS 比率都很接近，所以可以看出框架間的差異主要集中在 LCP 身上：

 

在美國本土，LCP 指標為綠色的移動端會話所屬網站的所占百分比。

 

跟預期一樣，可以看到 Gatsby 仍然明顯優于 React，而 React 又整體優于 Next.js。鑒于 NextJS 使用的是 SSR/SSG 和現代圖像格式，所以落后于 React 著實令人意外。所以在使用 NextJS 時，請務必注意這一點。

 

NuxtJS 最近幾個月在性能上取得了重大進展，并在 LCP 良好率上超越了 NextJS，總體上已經跟 React 基本相當。

 

下面再來看 LCP 差異能不能用圖像下載數據量來解釋，畢竟圖像越大，對 LCP 的負面影響就越嚴重：

 

在美國本土，移動端圖像下載數據量（KB）

 

有意思的是，使用 NuxtJS 和 Vue 的網站所下載的圖像數據總量明顯高于 React 網站。盡管如此，NuxtJS 仍能保持相當優秀的 LCP 良好比率。

 

Gatsby 和 NextJS 的下載圖像數據量也不低，性能同樣也不錯，這意味著 Gatsby 出色的良好 LCP 比率絕不單靠削減圖像尺寸。對我來說，這表明 Gatsby 可能會更早開始下載最大的圖像，以優先處理的方式有序加載各項頁面資源。

 

有趣的是，Gatsby 主頁使用 WebP 處理圖像，而 NextJS 主頁使用的則是 AVIF。

 

總結

 

我們在本文中分析的所有框架，其良好性能比率均高于 0%，意味著它們都有構建高性能站點、拿下三綠 CWV 指標的能力。同樣，所有這些框架的三綠比例也都達不到 100%，就是說如果使用不當，它們也都有可能會使網站變得加載緩慢，體驗糟糕。

 

也就是說，我們看到的各種框架只在良好性能率方面存在差異。如果使用成績較好的框架，那你的網站也許比其他框架開發的網站更有可能獲得高性能。當然，大家可以在設計過程中根據具體情況再做考量。

 

另一方面，我們也看到這種差異有可能產生誤導。例如，乍看之下 React 的性能似乎優于 Vue。但當我們排除掉大多數被包含在 React 統計中的 Wix 網站，轉而關注高流量頂級網站時，Vue 的性能又迅速追平了 React。

 

此外，Preact 和 Svelte 等以性能而聞名的框架并不一定在 CWV 指標上有什么優勢。不知道后續谷歌將 FID 替換成新的響應性指標后，這些框架能不能變得“名副其實”。

 

更讓人意外的是，某些 Web 應用程序框架就算內置了 SSG/SSR 支持并使用了 CDN，性能上也還是沒什么優勢。換句話說，使用 Web 應用程序框架并不能有效提升實際性能。

 

另外，NextJS 和 NuxtJS 在提升網站 CWV 指標方面還有很長的路要走。雖然二者的改善趨勢都很明顯，尤其是 NuxtJS，但仍明顯低于 Gatsby 或者 Wix，甚至還不及所有網站的平均良好率。希望他們再接再厲，盡早完成自我突破。

 

原文鏈接：

https://www.smashingmagazine.com/2022/05/google-crux-analysis-comparison-performance-javascript-frameworks/