Как улучшить производительность таблицы PrimeNg, содержащей флажки - PullRequest
Новая
       33

Как улучшить производительность таблицы PrimeNg, содержащей флажки

0 голосов
/ 30 января 2019

У меня проблемы с производительностью при использовании p-таблицы с p-флажком.Таблица содержит около 1000 строк и 15 столбцов, 10 из которых содержат только флажки.

Таким образом, в конце таблицы содержатся 10000 флажков.Когда я убираю флажки из таблицы, время, которое должна сгенерировать таблица, составляет около 5 с.Когда флажки видны, время увеличивается до 20 с!

Эта таблица содержит только 1000 строк, конечно, есть сортировка, включая фильтрацию, но, как я уже писал, при снятии флажков время генерации таблицы составляет около 5 с.

Так в чем же проблема?Даже когда я оставил полностью пустое объявление флажка, вот так: 

        <p-checkbox binary="true">
        </p-checkbox>

время все еще очень велико.Вот структура моей таблицы: 

<p-table
  [value]="data">
  <ng-template pTemplate="caption">
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th class="toggle-column"></th>
      <!-- LAST NAME COLUMN -->
      <th class="lastname-column" [pSortableColumn]="'lastName'">
      </th>
  </ng-template>

  // BODY DEFINITION - CHECKBOXES
  <ng-template pTemplate="body" let-row let-expanded="expanded" 
   let-rowIndex="rowIndex">
    <tr>
      <td class="toggle-column"></td>
      <td *ngFor="let col of columns" class="{{col.styleClass}}">
        <span class="ui-column-title">{{col.header}}</span>
        <p-checkbox
          binary="true"
          [disabled]="!isEditable"
          [(ngModel)]="row[col.field]"
          (onChange)="toggle($event, col.field, rowIndex)">
        </p-checkbox>
      </td>
    </tr>
  </ng-template>

  <ng-template let-row pTemplate="rowexpansion">
    <tr>
      <td>
        <table class="expanded-table">
          <tr *ngFor="let user of row.userGroup.members" class="expanded-row">
            ...
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="emptymessage">
    <tr>
      <td [attr.colspan]="tableConfig.colspan">
        {{'ui.noRecordsFound'}}
      </td>
    </tr>
  </ng-template>
</p-table>

О разбиении на страницы и отложенной загрузке прокрутки не может быть и речи - мой клиент этого не хочет.Он хочет сразу увидеть стол с дырками.

Я также думал об использовании ChangeDetectionStrategy.OnPush, но каждый раз, когда добавляется новый флажок, ngOnChanges и ngDoCheck (я разделил шаблон тела на 3 компонента, чтобы протестировать это средство обнаружения изменения дыры - в примере, который вы видите выше, все в одномсоставная часть).

Я могу предположить, использовать нативный флажок, я уже проверил это, и время также очень хорошо около 8 секунд.Но я использую основу PrimeNg по причине, верно ?!

Основная проблема связана с компонентом p-checkbox, он работает очень медленно, и я знаю, что проблема не в рендеринге, потому что я проверил профилировщик - требуется огромное время для того, что происходит «за»Я думаю, проблема в обнаружении изменений, а не в самом рендеринге.

Так у вас есть идеи, как я могу улучшить свой стол?

...