styled-components 性能详解
引言
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 的速度有多快。最终选用什么方式还有其他的决定因素，性能只是其中之一。
以上就是styled-components 性能详解的详细内容，更多关于styled-components 性能的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了react如何实现侧边栏联动头部导航栏效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了React中Props的浅对比的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-05-05
本篇文章主要介绍了浅谈React Native 中组件的生命周期，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了React中获取数据的3种方法及优缺点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家详细介绍了React如何利用scheduler思想实现任务的打断与恢复,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-03-03
JavaScript的React Web库的理念剖析及基础上手指南
这篇文章主要介绍了JavaScript的React Web库的理念剖析及基础上手指南,React Web的目的即是把本地的React Native应用程序项目变为Web应用程序,需要的朋友可以参考下2016-05-05
react+axios实现github搜索用户功能(示例代码)
这篇文章主要介绍了react+axios实现搜索github用户功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
这篇文章主要给大家介绍了关于React中this丢失的四种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
React整个的渲染机制就是React会调用render()函数构建一棵Dom树，在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree2022-11-11
这篇文章主要介绍了React+umi+typeScript创建项目的过程,结合代码介绍了项目框架搭建的方式，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论