React的受歡迎程度並非沒(méi)有批評(píng)者。該框架的相當(dāng)大的尺寸（約120 kib縮?。╋@著影響啟動(dòng)時(shí)間，尤其是僅依靠客戶端渲染時(shí)。即使使用客戶端水合的服務(wù)器端渲染也仍然是性能密集的。儘管React在復(fù)雜的州管理中表現(xiàn)出色，但其資源需求通常超過(guò)更簡(jiǎn)單的應(yīng)用程序中的好處。這可以有效地排除使用功能較低的硬件的用戶。

儘管我保留了React的性能開銷，但我還是感謝其組件化模型和JSX語(yǔ)法。服務(wù)器端渲染（或使用preact，我首選的替代方案）仍然是寶貴的資產(chǎn)。但是，確定適當(dāng)?shù)目蛻舳擞梅ㄈ匀皇且粋€(gè)挑戰(zhàn)。本文詳細(xì)介紹了我有關(guān)優(yōu)化React性能的發(fā)現(xiàn)，以獲得更好的用戶體驗(yàn)。

上下文：RSS提要應(yīng)用程序

我的rss feed應(yīng)用程序bylines.fyi在服務(wù)器和客戶端都使用JavaScript。雖然我並不固有地不喜歡客戶端框架，但我的經(jīng)驗(yàn)突出了兩個(gè)反復(fù)出現(xiàn)的問(wèn)題：

1. 框架可以掩蓋基礎(chǔ)的網(wǎng)絡(luò)平臺(tái)，從而阻礙對(duì)它們何時(shí)真正有益的深刻理解。
2. 框架並不總是保證最佳用戶體驗(yàn)。

蒂姆·卡德克（Tim Kadlec）對(duì)Web框架性能的Httparchive研究加劇了這些問(wèn)題，揭示了React的表現(xiàn)不佳。我的目標(biāo)是在減輕其客戶端缺陷的同時(shí)利用React的服務(wù)器端優(yōu)勢(shì)。

實(shí)驗(yàn)：移動(dòng)導(dǎo)航切換

我的RSS應(yīng)用需要客戶端的JavaScript來(lái)進(jìn)行簡(jiǎn)單的移動(dòng)導(dǎo)航切換，這是“簡(jiǎn)單狀態(tài)”的經(jīng)典示例。我經(jīng)?？吹椒磻?yīng)組件過(guò)度用於此類簡(jiǎn)單任務(wù)，從而導(dǎo)致不必要的性能開銷。該實(shí)驗(yàn)雖然看似瑣碎，但它是了解框架選擇如何擴(kuò)展的關(guān)鍵基準(zhǔn)。重要的是要注意，大多數(shù)開發(fā)人員不僅會(huì)依靠這種次要功能的反應(yīng)，但是結(jié)果說(shuō)明了對(duì)運(yùn)行時(shí)性能的架構(gòu)影響。

測(cè)試條件

該實(shí)驗(yàn)比較了四個(gè)設(shè)備上的三個(gè)移動(dòng)導(dǎo)航實(shí)現(xiàn)：

1. 狀態(tài)反應(yīng)組件：服務(wù)器渲染和客戶端熔融。
2. 狀態(tài)的預(yù)先反應(yīng)組件：服務(wù)器渲染和客戶端水合。
3. 無(wú)狀態(tài)的提前部分：服務(wù)器渲染，未水合；使用標(biāo)準(zhǔn)事件聽眾。

設(shè)備包括：

1. 諾基亞2 Android電話（Chrome 83）
2. 華碩X550CC筆記本電腦（Windows 10，Chrome 83）
3. 第一代iPhone SE（Safari 13）
4. 第二代iPhone SE（Safari 13）

指標(biāo)

為每個(gè)實(shí)施和設(shè)備測(cè)量了以下指標(biāo)：

1. 啟動(dòng)時(shí)間：包括框架加載和水合（react/preaxct），或者只是事件偵聽器代碼（EventListener）。
2. 水合時(shí)間：啟動(dòng)時(shí)間的子集（僅反應(yīng)/預(yù)先反應(yīng)）。
3. 移動(dòng)導(dǎo)航開放時(shí)間：在事件處理中測(cè)量框架開銷。

方法論

測(cè)試涉及遠(yuǎn)程調(diào)試和分析，每個(gè)場(chǎng)景和設(shè)備的十個(gè)迭代記錄了每個(gè)度量的CPU時(shí)間。網(wǎng)絡(luò)性能不是一個(gè)因素。

結(jié)果

由於數(shù)據(jù)的複雜性，結(jié)果以表格格式顯示，顯示最小，最大，中值和平均CPU時(shí)間。 （詳細(xì)的表格在隨附的電子表格中可用）。關(guān)鍵發(fā)現(xiàn)包括：

• React的高創(chuàng)業(yè)和水合成本：在低端諾基亞2上尤其明顯。
• PREACT的提高性能：比React的速度要快得多，但在諾基亞2上仍超出了理想的框架預(yù)算。
• 卓越的事件聽眾的性能：始終比React和Exct都要快，尤其是對(duì)於簡(jiǎn)單的互動(dòng)。

討論：淺呼叫堆棧

性能差異源於框架加載和水合的開銷。儘管某些性能權(quán)衡是不可避免的，但對(duì)於開發(fā)人員的便利性而言，餘額通常會(huì)傾向於開發(fā)人員的體驗(yàn)，而用戶則以犧牲用戶為代價(jià)。呼叫堆棧的React和PreACT Hydration突出了重大處理需求，尤其是對(duì)於簡(jiǎn)單的任務(wù)。使用本地事件偵聽器為簡(jiǎn)單的狀態(tài)管理提供了一種更有效的方法。

結(jié)論和建議

這種分析不是作為反應(yīng)批評(píng)的，而是鼓勵(lì)批判性評(píng)估框架選擇及其性能的影響。幾種策略可以減輕績(jī)效問(wèn)題：

1. 在可能的情況下，對(duì)無(wú)狀態(tài)組件的重構(gòu)狀態(tài)組件。
2. 避免客戶端的JavaScript和無(wú)狀態(tài)組件的水合。
3. 使用獨(dú)立於框架的事件聽眾進(jìn)行簡(jiǎn)單的交互。
4. 懶惰的水合物組件使用相交觀察者或requestIdleCallback 。
5. 將預(yù)先反應(yīng)視為反應(yīng)的更快替代方法。
6. 使用navigator.deviceMemory適應(yīng)低內(nèi)存設(shè)備的用戶體驗(yàn)。

優(yōu)先考慮各種設(shè)備的性能測(cè)試，以確保具有不同硬件功能的用戶包容性。目標(biāo)應(yīng)該是每個(gè)人的快速訪問(wèn)的網(wǎng)絡(luò)體驗(yàn)。

特別感謝埃里克·貝利（Eric Bailey）的編輯反饋和CSS-Tricks員工發(fā)表本文。

以上是RadeVentListener：客戶端框架性能的故事的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！