Material UI withStyles 的潜在性能下降

Material UI Potential Slow Performance of withStyles

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

当加载页面的动作触发时,我们会出现大约 0.5 秒的小停顿。

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

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

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

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

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

+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