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();

我真的没有选择，我真的没有得到它，因为材料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秒。如果它是平滑的，那是可以接受的，但事实并非如此。实际上，关于材料没有什么是非常顺利只是无法解释。

还添加了它正在做的所有事情的图像。这是正常的吗？

Answer 1

我现在已经发现它与大型mat-table有关，它有大约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>

很遗憾，该修补程序根本没有使用此功能（以这种方式）。

Answer 2

我遇到了类似的问题，即在大约10行数据之后，表变得非常慢。 事实证明，如果您在表格行中使用对话框，选择，菜单和其他生成的控件，则表格会变得非常慢。可以通过使用matMenuTriggerData将资料菜单移到表格外，以将数据传递到表格外的单个菜单。可以通过触发创建对话框的函数来使用对话框。选择并没有找到很好的选择，因此我最终重新设置了位于表外部的“材料”菜单的样式。

该表现在非常快，具有数百行。