網(wǎng)站首頁編程語言正文

styled-components?性能詳解_React

作者：天行無忌 ? 更新時(shí)間： 2023-03-21 編程語言

引言

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)簽，以便更容易識別它們。可以使用 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 來對比一下樣式組件性能和模塊化CSS的性能。測試的環(huán)境將模擬安卓環(huán)境、網(wǎng)絡(luò)設(shè)置為慢速3G模式、CPU設(shè)置為 4 核。

開始之前先簡單介紹幾個(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)用于測量頁面從開始加載到主要子資源完成渲染，并能夠快速、可靠地響應(yīng)用戶輸入所需的時(shí)間。