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

Question

我刚刚开始使用 Material UI，我知道它使用 CSS in JS 样式组件的方式。
我在如何创建样式的文档中看到了 2 种方法：

使用sx道具：

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

使用makeStyles方法：

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

我知道 JS 中的 CSS 比原生 CSS 性能低得多。
但是在我刚刚编写的这两种方法中，哪一种更高效（如果有的话）？

顺便说一句，我使用的是 Material UI 版本 5，它声称在情感方面具有更好的整体性能而不是 JSS

Answer 1

对于静态样式（即基于 props 的非动态样式），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% 左右。对于动态样式，在 Material-UI 团队执行的一项测试中，JSS 比 Emotion 慢 6 倍，这就是为什么 JSS 从 v5 的可能样式引擎列表中删除的原因。

https://next.material-ui.com/system/basics/#the-sx-prop 上的文档包含以下性能信息：

基准案例	代码片段	时间标准化
一种。渲染 1,000 个基元	<div className="…">	100ms
湾 渲染 1,000 个组件	<Div>	120ms
C。渲染 1,000 个样式组件	<StyledDiv>	160ms
d. 渲染 1,000 盒	<Box sx={…}>	370ms

我希望直接使用 Emotion（使用样式方法或css prop）的性能类似于 Benchmark case c。我希望makeStyles静态样式比这稍快（在 140 毫秒到 150 毫秒范围内），但不会快很多。您可以看到sxprop 明显变慢，但请记住，额外的 200 毫秒开销用于 1,000 个元素，因此每个渲染组件的额外开销仍然只有五分之一毫秒。

我不记得看到 Material-UI 声称 v5 总体上比 v4 快。如果使用 JSS 实现，v5 确实添加了许多新功能，这些功能会非常缓慢（由于利用动态样式），因此他们能够添加这些功能，同时保持与 v4 相当的样式性能。

makeStyles与 Material-UI v5 一起使用的最大缺点是，您会导致用户同时下载 JSS 和 Emotion 作为捆绑包的一部分。如果您有一个使用 v4 构建的现有应用程序已经使用makeStyles了很多（您现在正在迁移到 v5），那么您无法轻松避免这种额外的包大小，但是如果您还没有大量makeStyles使用，我建议直接使用 Emotion 而不是makeStyles如果您担心sx. 即使您确实makeStyles大量使用，我还是建议避免添加更多，以便逐渐迁移到不需要该@material-ui/styles软件包。

在我工作的应用程序中，我们有 500 多个 的用法makeStyles，因此我打算使用的迁移方法将专注于替换makeStyles我们应用程序的主要入口点中的用法（例如登录和登录后最常见的初始页面）和使用代码拆分避免在@material-ui/styles到达仍然使用它的页面之前拉入包。然后我们将逐渐从makeStyles使用最频繁的页面迁移，然后削减其他页面，以便我们希望在 v6 出现之前设法删除所有页面。

虽然它仍然需要更改代码，但对于那些经常makeStyles使用的人来说，一个迁移选项是tss-react，它保留了与 类似的语法makeStyles，但由 Emotion 而不是 JSS 支持。