材质 UI 潜在的 withStyles 性能缓慢

Question

我的任务是使我们的 react redux web 应用程序中的页面加载速度更快。

当加载页面的操作触发时，我们会看到大约 0.5 秒的小冻结。

我打开了分析器，乍一看似乎没有什么问题。
火焰图

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

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

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

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

Answer 1

+90% 花在 WithStyles 上的时间实际上花在了JSS 上，在 Material-UI 方面我们能做的很少。

从

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

可以在这里找到