引言

styled-components 是一個流行的 React 庫，一個 CSS in JS 樣式框架，它使用 JavaScript 中的標(biāo)記模板字面量和 CSS 的強大功能來提供一個平臺，允許編寫實際的 CSS 來設(shè)置 React 組件的樣式，同時兼顧開發(fā)人員體驗和性能。

基本上是在編寫 CSS，但使用的是 Javascript。實際上可以命名自己的標(biāo)簽，以便更容易識別它們?？梢允褂?Javascript 更改屬性的值，這非常適合具有動態(tài)內(nèi)容的應(yīng)用程序。

官方網(wǎng)站：styled-components.com/

下面是一段使用的代碼：

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

styled-components 的痛點

• 一個額外的包裹
• 更大的 JS 包
• 影響 CSS 性能（特定環(huán)境）
• CSS文件和JS文件的處理方式不一樣

現(xiàn)在使用谷歌瀏覽器開發(fā)工具 Lighthouse 來對比一下樣式組件性能和模塊化CSS的性能。測試的環(huán)境將模擬安卓環(huán)境、網(wǎng)絡(luò)設(shè)置為慢速3G模式、CPU設(shè)置為 4 核。

開始之前先簡單介紹幾個前端性能指標(biāo)：

• FCP：First Contentful Paint 首次內(nèi)容繪制，指瀏覽器渲染出第一個內(nèi)容的時間，內(nèi)容可以是文本、img標(biāo)簽、SVG元素等，但是不包括 iframe 和白色背景的 Canvas 元素。
• SI：Speed Index 首屏展現(xiàn)平均值，這是 Lighthouse 的六項性能指標(biāo)之一。
• LCP：Largest Contentful Paint 最大內(nèi)容繪制，指可視區(qū)內(nèi)容最大的可見元素出現(xiàn)在屏幕上的時間，衡量加載性能的核心指標(biāo)。
• TTI：Time to Interactive 可交互時間，該指標(biāo)用于測量頁面從開始加載到主要子資源完成渲染，并能夠快速、可靠地響應(yīng)用戶輸入所需的時間。

styled-components 性能

• 平均性能范圍：13809 毫秒
• FCP：2.2
• SI：9.1
• LCP：13.1
• TTI：13.2

模塊化 CSS 性能

• 平均性能范圍：8995 毫秒
• FCP：2.1
• SI：7.6
• LCP：12
• TTI：12.5

從上述兩組數(shù)據(jù)看到，在平均性能范圍內(nèi)，styled-components 節(jié)省了 4814 毫秒！考慮到 CSS 規(guī)則根本沒有改變這一事實，速度指數(shù)和其他指標(biāo)的提升也相當(dāng)大。上述性能數(shù)據(jù)是有一定的前提環(huán)境，但從官方的介紹來看，整體性能還是不錯的。

結(jié)論

可以在 React 中使用這兩種技術(shù)并創(chuàng)建令人驚嘆的WEB應(yīng)用，這只是為正確的工作選擇正確的工具的問題。如果有一個高度可定制的儀表板將代碼庫更改為模塊化 CSS 可能沒有意義。然而，如果用戶來自移動設(shè)備，建議嘗試看看WEB應(yīng)用使用模塊化 CSS 的速度有多快。最終選用什么方式還有其他的決定因素，性能只是其中之一。

以上就是styled-components 性能詳解的詳細內(nèi)容，更多關(guān)于styled-components 性能的資料請關(guān)注腳本之家其它相關(guān)文章！