写点什么

Emotion 库维护者解释为什么 Spot 公司不再使用运行时 CSS-in-JS

  • 2022-11-12
    北京
  • 本文字数:1877 字

    阅读完需:约 6 分钟

Emotion库维护者解释为什么Spot公司不再使用运行时CSS-in-JS

Sam Magura是 Spot 的软件工程师,也是活跃的Emotion库维护者。最近,他详细解释了 Spot 公司为什么放弃运行时 CSS-in-JS 库 Emotion,而选择了Sass模块——运行时开销、负载开销和服务器端渲染问题导致了较差的用户体验。


在他的博文中,Magura 首先回顾了运行时 CSS-in-JS 的好处。


今天的 Web 应用程序通常实现为一组协作的组件。在使用运行时 CSS-in-JS 库时,开发人员定义组件的样式以及组件标记和逻辑。如果以不正确的方式修改或删除了组件样式,就很难修改或删除组件代码。这解决了大型应用程序中充斥着未被检测到的过时样式规则的问题。但这样的应用程序下载和执行都比较笨重,对用户体验有负面影响。


将 CSS 规则的作用域严格限定到相关的组件就很难会无意影响到其他组件的样式。如果没有组件作用域,CSS 的级联和专一性规则可能会导致不相关组件的样式定义发生渗透。


最后,使用完备的图灵语言,如 JavaScript,开发人员可以完全自由地表达组件样式和组件逻辑之间的关系。如果组件样式不是静态的,并且需要根据用户操作或应用程序环境中的变更进行动态更新时,这样就很方便了。


不过,Magura 根据他对 Spot 代码库的研究得出结论,CSS-in-JS 的坏处大于好处:


所以,这就是我们放弃 CSS-in-JS 的原因——运行时性能成本太高了。


CSS-in-JS 可能会因其运行时和负载开销而对用户体验产生负面的影响。


一方面,在渲染时动态计算和更新样式可能会导致渲染变慢。Magura 比较了 Spot 用运行时 CSS-in-JS 库 Emotion 实现的代码库组件的渲染时间与用 Sass 模块实现的代码库组件的渲染时间(在构建时编译为普通的 CSS 文件)。对比显示,使用 Emotion 库的渲染时间几乎翻倍(27.7 毫秒对 54 毫秒)。开发人员可以从这篇博文中查看实验数据、火焰图分析等等。


另一方面,将 CSS-in-JS 库添加到应用程序代码中会加大浏览器下载的代码包,可能会降低应用程序的启动速度。Emotion 大约 8 KB(最小化后),而style-components,一个流行的 CSS-in-JS 库,是 12 KB。


有趣的是,运行时 CSS-in-JS 库执行的动态插入 CSS 样式规则可能并不总是与生态系统的其他部分很好地配合。


关于 React 18,Sebastian Markage在 GitHub Issues 中向使用 React 并发渲染功能的开发人员提出了如下的警告


这是一个 CSS 库(动态生成新规则并将它们与<style>标签插入到文档中)的升级指南,特别是目前大多数专门为 React 设计的 CSS-in-JS 库,如 styled-components、styled-jsx、react-native-web。


注意:请务必阅读“When to Insert <style> on The Client”部分。如果你现在在“渲染期间”注入样式规则,会导致你的库在并发渲染时非常慢。


运行时 CSS-in-JS 也可能影响服务器端渲染优化。在一篇关于服务器端流的文章中,Misko Hevery(Qwik框架的作者)、Taylor Hunt和 Ryan Carato写道


例如,CSS-in-JS(如 Emotion)是一种非常流行的方法。但是,如果这种方法意味着在输出样式标签之前所有组件都需要完全渲染,就会中断流,因为框架被迫缓冲整个响应。


Magura 提到,Emotion 的 GitHub 项目中记录的相当多的问题都与服务器端渲染有关(例如 React 18 的流、规则插入顺序)。报告的问题可能会产生显著的意外复杂性(即与解决方案相关的复杂性,而不是源于问题本身)。它们还可能导致负面的开发者体验。


虽然 Magura 提醒读者,他的实验仅限于 Emotion 库和 Spot 的代码库,但他预计大部分推理可能同样适用于其他运行时 CSS-in-JS 库和其他代码库。


一年前,Tomas Pustelnik提供了另一个数据点,尽管表述的方式不同,但指向的问题是相似的。Pustelnik 在他的博文“真实世界的CSS与CSS-in-JS的性能比较”中总结道:


就是这样。如你所见,运行时 CSS-in-JS 可以对网页产生明显的影响,主要针对低端设备和网络连接较慢或流量价格较高的地区。因此,也许我们应该更好地考虑使用什么工具以及如何使用工具。好的开发者体验不应该以牺牲用户体验为代价。


我认为我们(开发人员)应该更多地考虑我们为项目所选择的工具可能带来哪些影响。如果下一次我开始一个新项目,我将不再使用运行时 CSS-in-JS。我要么使用普通的 CSS,要么使用一些构建时 CSS-in-JS 替代方案。


流行的构建时 CSS-in-JS 库包括LinariaAstroturfvanilla-extract。去年,Facebook 推出了自己的构建时 CSS-in-JS 库stylex,开发人员仍然可以使用CSS模块和相关的生态系统(PostCSS模块Sass模块)。


CSS-in-JS 指的是通过 JavaScript 生成 CSS 规则,而不是在外部 CSS 文件中定义样式。运行时 CSS-in-JS 库,如Emotionstyles-component,在运行时动态修改样式,例如将样式标签注入文档。零运行时 CSS-in-JS 是一种在构建时提取所有 CSS 的模式。


查看英文原文https://www.infoq.com/news/2022/10/prefer-build-time-css-js/

2022-11-12 10:005026

评论

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

如何基于分布式KV研发一款消息中间件

Java 编程 面试 后端 中间件

Go- 数组

HelloBug

数组 Go 语言

模块一作业

当归

通过明道云实现培训机构客户管理

明道云

WebRTC中的RefCountedObject解析

她的男人是程序员

CERT和CWE之间有什么联系?

鉴释

安全编码规范 cwe cert

微信业务架构 | 架构实战营

樊江。

架构实战营

高可用 | Xenon 实现 MySQL 高可用架构 部署篇

RadonDB

MySQL 数据库 Xenon RadonDB

cocoapods 的主模块如何判断子模块有没有被加载?

fuyoufang

ios swift 8月日更

TCP协议认知篇

邱学喆

TCP协议 拥塞避免算法 慢启动算法 坚持定时器 TCP状图切换

Go- 切片的定义

HelloBug

slice Go 语言 切片

来!看排名一年上升16位的ClickHouse,如何在京东落地实践

京东科技开发者

数据库 Clickhouse

关于飞书的告警通知,这里有个更好的办法

睿象云

运维 告警 运维平台 智能告警

浅析智慧交通有哪些应用场景?

一只数据鲸鱼

数据可视化 智慧城市 智慧交通 城市交通

华为18级工程师三年心血终成趣谈网络协议文档(附大牛讲解)

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

如何从内部保障企业数据安全?用IT运维审计系统可以吗?

行云管家

网络安全 数据安全 堡垒机 IT运维 运维审计

干货!4大实验项目,深度解析Tag在可观测性领域的最佳实践!

观测云

可观测性 dataflux tag ngix

关于C++中“不能返回对象引用”的思考

她的男人是程序员

阿里巴巴首发:Java核心框架指导手册1小时点击量破千万!

Java 编程 面试 程序人生 Alibaba

量化交易炒币机器人系统搭建

量化系统19942438797

机器人 量化交易

Go- 切片的使用

HelloBug

Go 语言 切片 追加 拷贝 扩缩容

👊 【Spring技术原理】异步编程机制以及功能分析讲解

码界西柚

spring springboot 异步编程 8月日更

打开vscode好像打开了原神?vscode原神背景推荐,比博燃

CodeNongXiaoW

vscode vscode背景 原神

阿里资深架构师终于把微服务架构与实践第2版PDF分享出来了

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

交易所智能炒币机器人开发||量化交易炒币机器人系统搭建

Geek_23f0c3

量化交易机器人系统开发 炒币机器人

计算机网络常用知识总结

Java 架构 后端 网络 计算机

模块一作业

陈家豪

架构实战营

云原生多云容器编排平台karmada上手指南

谐云

云原生 开源技术

如何对接口参数的描述进行集中管理

CodeNongXiaoW

大前端 测试 后端 接口工具

Spring 配置加载

樊江。

Spring Framework

图数据库在百度汉语中的应用

百度Geek说

数据库 后端

Emotion库维护者解释为什么Spot公司不再使用运行时CSS-in-JS_大前端_Bruno Couriol_InfoQ精选文章