CSS-in-JS性能成本缓解策略

2020 年 2 月 01 日

CSS-in-JS性能成本缓解策略

作为一种将组件逻辑链接到其样式的方式,CSS-in-JS 在某些场景中变得流行起来。 Aggelos Arvanitakis 提醒开发人员,在某些情况下,不再能忽略CSS-in-JS 的成本,并且提供了缓解策略。

Arvanitakis 在一篇文章中指出,尽管 CSS-in-JS 带来了好处,但是,它仍可能在某些应用程序中造成性能问题。Arvanitakis 把重点放在React 和两个流行的CSS-in-JS 库( styled-components emotion )上,他比较了相同代码的两个版本,其中只有一个版本使用了 CSS-in-JS 样式。无样式版本如下所示:

复制代码
import React from 'react';
const NormalDiv = props => <div {...props} />
const App = () => {
const [randomValue, setRandomValue] = React.useState(0);
return (
<React.Fragment>
{new Array(50).fill(null).map((__, i) => (
<NormalDiv key={i}>Hello World</NormalDiv>
))}
<button onClick={() => setRandomValue(Math.random())}>Force Rerender</button>
</React.Fragment>
);
};

样式版本如下所示:

复制代码
import styled from '@emotion/styled';
const StyledDiv = styled.div``;
const App = () => {
const [randomValue, setRandomValue] = React.useState(0);
return (
<React.Fragment>
{new Array(50).fill(null).map((__, i) => (
<StyledDiv key={i}>Hello World</StyledDiv>
))}
<button onClick={() => setRandomValue(Math.random())}>Force Rerender</button>
</React.Fragment>
);
};

样式化的 CSS-in-JS 的实现比无样式版本要多花 50% 的时间在渲染上。尽管在很多情况下,很难察觉与 CSS-in-JS 相关的性能成本,但在其他情况下(如具有大型组件树),它的成本是很难忽略的。Arvantitakis 猜测使用某些库观察到的性能成本可能要归因于它们修改组件树(使用 Context 并添加 Context.Consumer 以读取样式值)以及动态地应用样式( style 标签包含动态注入的 CSS )。Arvanitakis 解释道:

原文链接:【 https://www.infoq.cn/article/Ie1CU2rJdXh7HjlexeeJ 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2020 年 2 月 01 日 09:00 2168

评论

发布
暂无评论
发现更多内容

食堂就餐卡系统

缺省模式

架构师训练营第一周学习总结

fenix

作业一【食堂就餐卡系统设计】

道法自然

极客大学架构师训练营

食堂就餐卡系统设计

心在飞

极客大学架构师训练营

第一周作业

慵秋

gcc a.c 究竟经历了什么?

this_is_for_u

c++

食堂就餐卡系统设计文档

oaoit

week1.食堂就餐卡系统设计

个人练习生niki

UML

时刻架构

慵秋

极客大学架构师训练营

食堂就餐卡系统设计(作业模拟)

潜默闻雨

week1《作业一:食堂就餐卡系统设计》

任鑫

架构学习第一周作业

+╮(╯▽╰)╭/>……

「架构师训练营」第 1 周作业 - 食堂就餐卡系统设计

edd

设计思维

第一周·总结 架构师如何做架构设计

刘璐

架构师是怎样炼成的-1-2

闷骚程序员

极客大学架构师训练营

架构 0 期-week1-学习总结

陈俊

架构师训练营第一周学习总结

坂田吴奇隆

极客大学架构师训练营

【架构训练Week01作业】食堂就餐卡系统设计

Rex

作业二【0606学习小结】

道法自然

极客大学架构师训练营

Flink 源码分析之一文搞懂Flink 消息全流程

shengjk1

flink flink源码

【架构师第一周作业】食堂就餐卡系统设计

浪浪

UML学习

作业1-食堂就餐卡系统设计

进击的炮灰

第一周·作业-食堂就餐卡系统

刘璐

架构师训练营第一周学习总结

oaoit

食堂就餐卡系统设计

新世界

第1周【架构方法:架构师如何做架构】总结

陆不得

什么时候使用volatile关键字?

this_is_for_u

c++

UML练习

毛叫

极客时间 极客大学架构师训练营

架构师0期 01周总结

喵呜的小哥哥

架构师训练营-第一课作业

Linuxer

极客大学架构师训练营

【架构师第一周】总结

浪浪

CSS-in-JS性能成本缓解策略-InfoQ