简述 styled-components 性能

3,030 阅读3分钟

2023年春节假期最后一天,新的一年工作即将开始,保持一颗奋斗的心!

styled-components 是一个流行的 React 库,一个 CSS in JS 样式框架,它使用 JavaScript 中的标记模板字面量和 CSS 的强大功能来提供一个平台,允许编写实际的 CSS 来设置 React 组件的样式,同时兼顾开发人员体验和性能。

基本上是在编写 CSS,但使用的是 Javascript。实际上可以命名自己的标签,以便更容易识别它们。可以使用 Javascript 更改属性的值,这非常适合具有动态内容的应用程序。

官方网站: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 性能(特定环境)
  • CSS文件和JS文件的处理方式不一样

现在使用谷歌浏览器开发工具 Lighthouse 来对比一下样式组件性能和模块化CSS的性能。测试的环境将模拟安卓环境、网络设置为慢速3G模式、CPU设置为 4 核。

开始之前先简单介绍几个前端性能指标:

  • FCP:First Contentful Paint 首次内容绘制,指浏览器渲染出第一个内容的时间,内容可以是文本、img标签、SVG元素等,但是不包括 iframe 和白色背景的 Canvas 元素。
  • SI:Speed Index 首屏展现平均值,这是 Lighthouse 的六项性能指标之一。
  • LCP:Largest Contentful Paint 最大内容绘制,指可视区内容最大的可见元素出现在屏幕上的时间,衡量加载性能的核心指标。
  • TTI:Time to Interactive 可交互时间,该指标用于测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。

styled-components 性能

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

模块化 CSS 性能

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

从上述两组数据看到,在平均性能范围内,styled-components 节省了 4814 毫秒!考虑到 CSS 规则根本没有改变这一事实,速度指数和其他指标的提升也相当大。上述性能数据是有一定的前提环境,但从官方的介绍来看,整体性能还是不错的。

结论

可以在 React 中使用这两种技术并创建令人惊叹的WEB应用,这只是为正确的工作选择正确的工具的问题。如果有一个高度可定制的仪表板将代码库更改为模块化 CSS 可能没有意义。然而,如果用户来自移动设备,建议尝试看看WEB应用使用模块化 CSS 的速度有多快。最终选用什么方式还有其他的决定因素,性能只是其中之一。