styled-components 性能详解_React

引言

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 性能

• 平均性能范围：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 的速度有多快。最终选用什么方式还有其他的决定因素，性能只是其中之一。