Что может быть причиной того, что Angular 5 + Material 2 очень медленный?

Я знаю, что это может быть не очень хороший вопрос. Но я действительно не знаю, что делать, и я ищу причины.

Я запускаю свое пользовательское приложение Angular 5 + Material 2 локально, а mat-dialog mat-tab очень медленные. Я даже пытался отключить анимацию, но она все еще очень медленная.

Также при компиляции для производства с помощью ng-build --prod результаты очень медленные.

Поэтому, возможно, я делаю что-то не так с диалогом Вот мой код:

  openEditDialog(car:Car) {
    let dialogRef = this.dialog.open(EditDemandComponent);
    dialogRef.componentInstance.id = car.id;
    dialogRef.afterClosed().subscribe(result => {
      console.log('The edit dialog was closed');
    });
  }

Мой конструктор:

  constructor(
    private httpClient: HttpClient, 
    private dialog: MatDialog, etc..

и конструктор компонента диалога:

constructor(public dialogRef: MatDialogRef<EditDemandComponent>, etc..

Внутри диалогового компонента я использую код this.dialogRef.close();

У меня действительно нет вариантов здесь, и я действительно не понимаю, так как материал 2 документа очень быстрый, и для меня локально все очень медленно. Указывает на медленный, поскольку анимация не идет гладко. Требуется не менее 2 секунд, чтобы открыть диалоговое окно или переключать вкладки.

Вот мои версии:

  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  }

Это медленно в Chrome, IE и Edge

Моя система - это ноутбук для разработки, ядро I7, SSD, 16 ГБ ОЗУ и т.д. Не думайте, что это медленная система.

Может кто-нибудь мне помочь?

Изменить: добавлен этот показатель производительности браузера: я думаю, что проблема где-то в анимации. Это работает несколько, и только этот уже занимает 1,2 секунды. Было бы приемлемо, если бы это было гладко, но это не так. Нет ничего действительно гладкого в отношении материала. Просто не могу это объяснить.

Добавлен также образ всего, что он делает. Это нормально?

Ответ 1

Теперь я выяснил, что это связано с большой таблицей матов, которая имеет около 300 записей, которые на самом деле содержат кнопки для открытия этих диалогов материалов. Когда у меня есть только две записи, это так же быстро, как и угловая документация. Я до сих пор не могу по-настоящему понять это, так как я ожидаю, что это сработает (300 не так уж много.), Но это отвечает на вопрос. Причина, по которой это происходит медленно, заключается в том, что большие таблицы объединяются с диалогами.

Код:

 <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef fxFlex="96px"> </mat-header-cell>
    <mat-cell *matCellDef="let element" fxFlex="96px">
        <button mat-icon-button (click)="openEditDialog(element)"><mat-icon>edit</mat-icon></button>
        <button mat-icon-button (click)="openDeleteDialog(element)"><mat-icon>delete</mat-icon></button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

К сожалению, исправление не использовало это вообще (таким образом).

Ответ 2

У меня была аналогичная проблема, когда таблица стала очень медленной после 10 строк данных или около того. Оказывается, таблица становится очень медленной, если вы используете такие вещи, как диалоги, выборки, меню и другие сгенерированные элементы управления в строке таблицы. Меню материала можно перемещать за пределы таблицы, используя matMenuTriggerData для передачи данных в одно меню за пределами таблицы. Диалоги можно использовать, вызывая функцию, которая создает диалог. У выбора нет хорошей альтернативы, которую я нашел, поэтому я закончил рестайлинг Material Menu, который жил за пределами таблицы.

Стол очень быстрый с сотнями рядов.