javascript - React Redux 应用程序缓慢

Question

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

网格渲染时间 ~ 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 打开开发人员工具窗口。然后选择“网络”选项卡以查看网络事件。接下来选择性能选项卡。按照其中的说明详细了解页面中的性能瓶颈。