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 而不是页面上样式元素的性能。
我的任务是让我们的 React redux 网络应用程序中的页面加载速度更快。
当加载页面的动作触发时,我们会出现大约 0.5 秒的小停顿。
我打开了探查器,乍一看似乎没有任何问题。
Flame Graph
没有不必要的重新渲染,唯一显示的黄色警告大约为 10 毫秒。
当我转到分析器中的排名选项卡时,我得到了一个略有不同的故事,我发现大部分时间都花在了 withStyles() 上。
Ranked Graph
我们通过 withStyles() 在 JS 中使用了 CSS 的 material-ui 方法,似乎使用 WithStyles() 会显着影响加载速度。
是这样吗?或者这仅仅是“我一次渲染了太多东西”的情况
将 JS 中的 CSS 转换为 CSS 将是一项巨大的努力,尽管我确实花了一个小时撕掉 JS 中的 CSS 并发现了性能改进大约 40%,尽管我不知道这 40% 中有多少是由于 withStyles 而不是页面上样式元素的性能。