javascript - Material UI 中的 sx Prop 和 makeStyles 函数之间是否存在性能差异？

Question

我刚开始使用 Material UI，我知道它在 JS 中使用 CSS 样式化组件。
我在有关如何创建样式的文档中看到了 2 种方法:
使用 sx支柱:

<Box sx={{ backgroundColor: 'green' }}/>

使用 makeStyles方法:

makeStyles({
  root: {
    backgroundColor: 'green'
  }
})

我知道 JS 中的 CSS 性能远低于原生 CSS。
但是在我刚刚写的这两种方法中，哪一种更高效(如果有的话)？
顺便说一句，我使用的是 Material UI 版本 5，它声称在情感方面的整体性能比 JSS 更好

Answer 1

对于静态样式(即基于 Prop 的非动态样式)，JSS 比 Emotion 稍快。对于动态样式，JSS 比 Emotion 慢得多——对于静态样式和动态样式，Emotion 的性能相似。
您可以在以下问题中找到有关 JSS 和 Emotion 之间的静态样式的性能差异的信息:

https://github.com/mui-org/material-ui/issues/22342#issuecomment-696553225

https://github.com/mui-org/material-ui/pull/22173#issuecomment-673486269

对于静态样式，JSS 比 Emotion 快约 10%。对于动态样式， JSS was 6 times slower than Emotion在 Material-UI 团队进行的一项测试中，这就是为什么 JSS 从 v5 可能的样式引擎列表中被淘汰的原因。
https://next.material-ui.com/system/basics/#the-sx-prop 上的文档包含以下性能信息:


基准案例
代码片段
时间归一化


一个。渲染 1,000 个图元 <div className="…">100毫秒

湾。渲染 1,000 个组件 <Div>120毫秒

C。渲染 1,000 个样式化的组件 <StyledDiv>160毫秒

d。渲染 1,000 个盒子 <Box sx={…}>370毫秒


我希望直接使用 Emotion(使用 styled approach 或 css prop )的性能类似于 Benchmark 案例 c .我希望 makeStyles静态样式比这略快(在 140 毫秒到 150 毫秒范围内)，但不会快很多。可以看到 sx prop 明显较慢，但请记住，额外的 200 毫秒开销是针对 1,000 个元素的，因此额外开销仍然仅为每个渲染组件的五分之一毫秒。 sx 增加的开销量prop 取决于您传递给它的 CSS 属性的数量。对于少量 (< 5) 属性， styled 之间的差异和 sx没有上表中显示的那么显着。
我不记得 Material-UI 有任何声称 v5 总体上比 v4 快的说法。 v5 确实添加了许多新功能，如果使用 JSS 实现这些功能会非常缓慢(由于利用动态样式)，因此他们能够在添加这些功能的同时保持与 v4 相当的样式性能。
使用 makeStyles 的最大缺点使用 Material-UI v5 后，您将导致用户下载 JSS 和 Emotion 作为捆绑包的一部分。如果您有一个使用 v4 构建且已使用 makeStyles 的现有应用程序很多(您现在正在迁移到 v5)，一个迁移选项是 tss-react它保留了与 makeStyles 相似的语法，但由 Emotion 而不是 JSS 支持，并且具有与 styled 相似的性能API。现在有一个 codemod用于将 JSS 样式迁移到 tss-react .
相关答案: Why is the `sx` prop so much slower?