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

【问题标题】：What could be the reason Angular 5 + Material 2 are very very slow?Angular 5 + Material 2 非常非常慢的原因可能是什么？
【发布时间】：2018-05-08 07:19:33
【问题描述】：

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

我在本地运行我的自定义 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 秒。如果它是平滑的，那将是可以接受的，但事实并非如此。实际上，关于材料，没有什么是真正顺利的。就是无法解释。

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

【问题讨论】：

因为这和性能有关，请说明您的系统配置。
也许您正在绑定到视图中某处的函数 - 而不仅仅是字段？
事件绑定没问题，但{{someCalculatedValue()}} 或[foo]="someCalculatedValue()" 通常会导致性能问题，因为每次更改检测运行时都会调用someCalculatedValue()。
浏览器分析工具中花费了时间的任何信息？
我可能来不及谈话了，但你试过把 ng-container 改成 div 吗？由于速度问题，我们不得不在代码中删除 ng-containers。简单地用 div 替换 ng-containers 使我们的代码速度提高了几个数量级。

标签： angular material-design angular-material angular-material2

【解决方案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 将材料菜单移到表外，将数据传递到表外的单个菜单。可以通过触发创建对话框的函数来使用对话框。选择没有我找到的好选择，所以我最终重新设计了一个位于表格之外的材质菜单。

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

【讨论】：