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

我现在已经发现它与具有大约 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>

不幸的是，修复程序根本没有使用它（以这种方式）。