React Redux应用程序缓慢

Question

I am facing issues with performance of my application. I have some component like below. I added some console times to dig deep into the possible issue and these are the findings.

GridRenderTime ~ 2-5 ms

GridRenderOverallTime ~ 5 seconds

Huge difference. I am not sure what else processing is happening between componentWillUpdate and componentDidUpdate that is not getting captured by metric "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>
     } }

As the number of rows passed to SlickGrid increases, GridRenderOverallTime increases proportionally.

Leads here are appreciated.

Thanks!

Answer 1

In Chrome, press Ctrl + Shift + I to open the developer tools window. Then select the Network tab to view network activity. Next select the Performance tab. Follow the instructions there to get a detailed view of the performance bottlenecks in your page.