React Redux应用程序缓慢

Question

我遇到了我的应用程序性能问题。 我有一些像下面的组件。 我添加了一些控制台时间来深入研究可能的问题，这些是发现的结果。

GridRenderTime〜2-5毫秒

GridRenderOverallTime〜5秒

差异很大。 我不确定componentWillUpdate和componentDidUpdate之间还没有进行其他处理，而该处理未通过度量“ GridRenderTime”捕获。

export default class Grid extends Component {

     componentWillUpdate() {
        console.time('GridRenderOverallTime');
     }

     componentDidUpdate() {
        console.timeEnd('GridRenderOverallTime');
     }

     render() {
         return (
           <div>
              {console.time('GridRenderTime')}
              <BulkActionPanel
                  actions={this.bulkActions}
                  selectedJobIds={this.getFromConfig(this.props.config, [SELECTED_ROWS_PATH_IN_GRID_CONFIG])}
             />
              <SlickGrid
                  data={this.props.jobGridData}
              />
              <UserInputModal />
              <ActionConfirmationModal />
              <ConfigModal />
              <ChangeChkptStatusModal />
              <ResponseModal />
              <CommandModalBox />
              {console.timeEnd('GridRenderTime')}
          </div>
     } }

随着传递给SlickGrid的行数增加，GridRenderOverallTime也成比例地增加。

这里的线索表示赞赏。

谢谢！

Answer 1

在Chrome中，按Ctrl + Shift + I打开开发人员工具窗口。 然后选择“网络”选项卡以查看网络活动。 接下来，选择性能选项卡。 请按照此处的说明操作，以详细了解页面中的性能瓶颈。