angular - Angular 5 + Material 2 非常非常慢的原因可能是什么？

Question

我知道这可能不是一个很好的问题。但我真的不知道该怎么办，我正在寻找原因。

我在本地运行我的自定义 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();

我在这里真的没有选择，我真的不明白，因为 Material 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，16gb RAM 等。不要认为系统慢。

谁能帮帮我？

编辑:添加了此浏览器性能测量:我认为问题出在动画中的某个地方。它运行了几个，只有这个已经用了 1.2 秒。如果顺畅的话还可以接受，但不是。实际上，关于 Material ，没有什么是真正顺利的。只是无法解释。

还添加了它所做的一切的图像。这正常吗？

Answer 1

我现在发现它与包含大约 300 条记录的大垫表有关，这些记录实际上包含打开这些 Material 对话框的按钮。当我只有两条记录时，它和 Angular 文档一样快。我仍然不能真正理解它，因为我希望它能工作(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>

不幸的是，修复根本没有使用它(以这种方式)。