CSS-IN-JS庫會引入性能權(quán)衡，必須權(quán)衡開發(fā)人員的經(jīng)驗收益。 1.運行時開銷之所以發(fā)生，是因為在組件渲染過程中生成樣式並動態(tài)注入樣式，尤其是具有動態(tài)值，從而導(dǎo)致大型或經(jīng)常更新組件樹的性能較慢；可以通過記憶動態(tài)樣式或使用Linaria或Twin等構(gòu)建時間解決方案來減輕這種情況。 2.捆綁尺寸由於包含的運行時增加了10–20 kb，影響了交互的負(fù)載時間和時間，使代碼分裂和懶惰加載對優(yōu)化必不可少。 3?？蛻舳藰邮皆]入可能會導(dǎo)致SSR應(yīng)用中的FOUC和水合延遲，除非實施適當(dāng)?shù)难a液，否則可以通過情感和樣式組成部分看到，並且預(yù)提取的靜態(tài)樣式有助於避免此問題。 4。高特異性選擇器和混淆的類名稱使調(diào)試和樣式覆蓋複雜，儘管開發(fā)工具可以提高可讀性。儘管需要這些成本，但是當(dāng)需要動態(tài)主題，組件隔離或設(shè)計系統(tǒng)一致性時，CSS-IN-JS是合理的，但是對於關(guān)鍵性的應(yīng)用程序，諸如Tailwind，CSS模塊或BEM之類的替代方案提供了更好的運行時效率。最終，影響取決於應(yīng)用的使用模式，庫的選擇和優(yōu)化，因此，儘管CSS-IN-JS並非固有地慢，但其運行時成本需要在採用大規(guī)模採用之前進(jìn)行仔細(xì)的評估和測量。

CSS-IN-JS庫在現(xiàn)代反應(yīng)應(yīng)用中啟用範(fàn)圍的樣式，動態(tài)主題和組件級式樣式方面已變得很流行。儘管他們?yōu)殚_發(fā)人員提供了經(jīng)驗優(yōu)勢，但他們還可以引入績效權(quán)衡，從而影響運行時效率，捆綁尺寸和初始加載時間。

這是關(guān)鍵績效含義的細(xì)分：

1。運行時開銷和重新租賃

大多數(shù)CSS In-JS庫（例如樣式組件，情感等）在運行時會產(chǎn)生樣式。這意味著：

• 每當(dāng)組件安裝或更新時，樣式都會解析，哈希並註入DOM。
• 動態(tài)樣式（例如， color: ${props => props.theme.primary} ）迫使庫在每個渲染上重新計算CSS字符串。
• 這添加了JavaScript開銷，尤其是在大型組成樹或經(jīng)常更新組件中。

影響：

• 在重型UI相互作用下，渲染性能較慢。
• 可以在動畫繁重的應(yīng)用程序中有助於jank或掉落框架。

減輕：

• 盡可能使用靜態(tài)樣式。
• 用useMemo記憶動態(tài)值或從渲染邏輯中提取它們。
• Linaria或Twin等圖書館提供了構(gòu)建時間提取，從而消除了運行時的成本。

2。較大的捆綁尺寸

CSS-IN-JS庫需要將引擎（例如，樣式組件運行時）與您的應(yīng)用捆綁在一起。

• 在JavaScript捆綁包中增加10–20 KB （更新的GZPIPPECT）。
• 這延遲了交互式的時間，尤其是在較慢的網(wǎng)絡(luò)上。

比較：

• 普通CSS或CSS模塊：零運行時，最小足跡。
• 尾風(fēng)或公用事業(yè)第一CSS：相似的捆綁尺寸，但具有編譯時間優(yōu)化。

提示：使用代碼拆分和懶惰加載來推遲非關(guān)鍵樣式組件。

3。樣式註入和fouc（未風(fēng)格的內(nèi)容的閃光）

因為樣式是生成客戶端的：

• 初始HTML中沒有關(guān)鍵的CSS。
• 在慢速連接或水合過程中，用戶可能會在註入樣式之前看到未風(fēng)格的內(nèi)容。

對於SSR來說尤其有問題：

• 即使使用服務(wù)器端渲染，仍必須收集樣式標(biāo)籤並在客戶端重新水合。
• 如果無法正確處理，這會導(dǎo)致不匹配和重新註射延遲。

解決方案：

• 使用支持SSR具有樣式補液的庫（情感和樣式組件都可以做到）。
• 在可能的情況下，在構(gòu)建時間提取靜態(tài)樣式。

4。選擇器特異性和調(diào)試

CSS-IN-JS經(jīng)常使用高特異性選擇器或唯一的類名稱，其中：

• 使得無需!important更難覆蓋樣式。
• 如果不管理，可能會導(dǎo)致CSS腫。

另外，生成的類名稱（例如sc-bAdefk ）使調(diào)試更加困難，除非您啟用具有可讀名稱的開發(fā)模式。

當(dāng)CSS-In-JS有意義時（性能與DX）

儘管成本，但CSS-IN-JS仍然很合適。

• 您需要動態(tài)主題（例如，可選擇的主題）。
• 建築設(shè)計系統(tǒng)或具有隔離樣式的組件庫。
• 開發(fā)人員的生產(chǎn)率和可維護(hù)性優(yōu)先於微觀量化。

但是，對於關(guān)鍵績效應(yīng)用程序（例如，營銷網(wǎng)站，列表列表的儀表板），請考慮：

• 實用程序CSS（例如，尾風(fēng)） - 零運行時，快速。
• CSS模塊- 本地範(fàn)圍沒有JS開銷。
• 預(yù)處理器BEM - 可預(yù)測的可緩存樣式。

底線

CSS-IN-JS並不固有地慢，但是它從構(gòu)建時間轉(zhuǎn)變?yōu)檫\行時。性能成本取決於：

• 您如何使用動態(tài)樣式。
• 圖書館的選擇（在許多情況下，情感比樣式組件要快）。
• 是否針對SSR和捆綁尺寸進(jìn)行優(yōu)化。

對於大多數(shù)應(yīng)用程序，影響是可以接受的，但是對於高性能要求，傾向於零期限或構(gòu)建時間解決方案。

基本上：非常適合DX，但在使用大規(guī)模之前測量。

以上是CSS-IN-JS庫的性能影響的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！