快捷導(dǎo)航

styled-components?性能詳解

更新時(shí)間：2023年01月28日 08:45:29 作者：天行無忌

這篇文章主要為大家介紹了styled-components?的性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

基本上是在編寫 CSS，但使用的是 Javascript。實(shí)際上可以命名自己的標(biāo)簽，以便更容易識(shí)別它們?？梢允褂?Javascript 更改屬性的值，這非常適合具有動(dòng)態(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 的痛點(diǎn)

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

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

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

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

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í)，速度指數(shù)和其他指標(biāo)的提升也相當(dāng)大。上述性能數(shù)據(jù)是有一定的前提環(huán)境，但從官方的介紹來看，整體性能還是不錯(cuò)的。

結(jié)論

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

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

您可能感興趣的文章: