Question

我遇到了应用程序性能问题。我有一些如下所示的组件。我添加了一些控制台时间来深入挖掘可能的问题，这些都是调查结果。

GridRenderTime~2-5 ms

GridRenderOverallTime~5秒

巨大的差异。我不确定componentWillUpdate和componentDidUpdate之间还有哪些处理没有被度量标准＆＃34; GridRenderTime＆＃34;捕获。

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 以打开开发人员工具窗口。然后选择“网络”选项卡以查看网络活动。接下来选择Performance选项卡。按照那里的说明获取页面中性能瓶颈的详细信息。

反应还原应用缓慢

1 个答案: