css - withStyles 的 Material UI 潜在性能缓慢

Question

我的任务是让我们的 React redux 网络应用程序中的页面加载速度更快。

当加载页面的 Action 触发时，我们会看到大约 0.5 秒的小停顿。

我打开了探查器，乍一看似乎没有任何问题。
Flame Graph

没有不必要的重新渲染，唯一显示的黄色警告大约为 10 毫秒。

当我转到分析器中的排名选项卡时，我得到了一个稍微不同的故事，我发现大部分时间都花在了 withStyles() 上。
Ranked Graph

我们通过 withStyles() 在 JS 中使用 CSS 的 material-ui 方法，似乎使用 WithStyles() 会显着影响加载速度。
是这样吗？或者这仅仅是“我一次渲染了太多东西”的情况

将 JS 中的 CSS 转换为纯 CSS 将是一项巨大的努力，尽管我确实花了一个小时在 JS 中撕掉 CSS 并发现性能提高了大约 40％，但我不知道其中有多少40% 是由于 withStyles 而不是页面上样式元素的性能。

Answer 1

+90% of the time spent in WithStyles is actually spent in JSS, there very few we can do about it on Material-UI side.

From

虽然，有一个可能的加速不包括重写你的 JS CSS 样式方法，它正在切换到 makeStyles 而不是 withStyles

可以查到here