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打開開發人員工具窗口。 然后選擇“網絡”選項卡以查看網絡活動。 接下來，選擇性能選項卡。 請按照此處的說明操作，以詳細了解頁面中的性能瓶頸。