简述 styled-components 性能

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

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

基本上是在编写 CSS，但使用的是 Javascript。实际上可以命名自己的标签，以便更容易识别它们。因此对于大多数 React 开发人员来说，这个工具是自动的。还可以使用 Javascript 更改属性的值，这非常适合具有动态内容的应用程序。

官方网站：https://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 性能

• 平均性能范围：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
  

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

结论

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