styled-components 性能详解
天行无忌 人气:0引言
styled-components 是一个流行的 React 库，一个 CSS in JS 样式框架，它使用 JavaScript 中的标记模板字面量和 CSS 的强大功能来提供一个平台，允许编写实际的 CSS 来设置 React 组件的样式，同时兼顾开发人员体验和性能。
基本上是在编写 CSS，但使用的是 Javascript。实际上可以命名自己的标签，以便更容易识别它们。可以使用 Javascript 更改属性的值，这非常适合具有动态内容的应用程序。
下面是一段使用的代码：
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 的速度有多快。最终选用什么方式还有其他的决定因素，性能只是其中之一。
加载全部内容