JS 中的 CSS

“css-in-js”是一个从样式组件开始并在 javascript 中定义样式的流程。

样式组件、Emotion、Mantine 等

优点

1. 适用范围小。
   1. 您可以通过使用 css 模块来缩小 CSS 范围
2. 与组件定义在同一位置。 （并置）
3. 可以使用Javascript变量。

坏处

1. 存在运行时开销
2. 需要下载Css in JS库文件。
   1. 情感是7.9KB。
   2. Mantine 是 134KB！

巨大的缺点

1. 频繁插入CSS规则会导致大量的计算工作。
   1. 比较 Emotion 和 CSS
   2. 使用 CSS 时性能提升约 50%。
2. 使用SSR时，会出现各种各样的问题。
   1. 如果你查看 Emotion 仓库，就会发现有很多问题。

真实世界的性能比较

我们通过使用生产中实际使用的代码比较 CSS-in-JS 和 Tailwind 来测量性能。

设置

• CSS-in-JS 使用 Mantine（基于 Emotion）。
• 性能测量使用 React 开发工具。
• 性能测量目标是一个30 * 5的Table（组件名称：SheetTable）。

屏幕

实验进展

• 按下按钮时，会呈现上面的屏幕。
• 在 React Profiler 中打开录制功能，按下按钮即可录制屏幕渲染。
• 测量SheetTable的渲染时间。
• 总共执行5次并计算平均值。

CSS-in-JS (Mantine)

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

顺风

结果

• 渲染时间减少了约 36%。
• 即使只更改一个单元格代码，性能也能显着提高。 （当然，大部分都是细胞）
• 在60Hz显示器上，1帧是16ms，但是3帧->变成2帧

结论

• 使用静态生成的 CSS 在性能方面要好得多。
• 除非需要使用 JS 变量，否则请使用 Tailwind。
• 引入（额外的）SSR，方便放弃CSS-in-JS。

参考号

[1] https://dev.to/srmagura/why-were-writing-up-with-css-in-js-4g9b