web-dev-qa-db-ja.com

理由は何ですか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、16GBですRAMなど。システムが遅いとは思わないでください。

誰も私を助けることができますか？

Edit：このブラウザのパフォーマンス測定を追加しました。問題はアニメーションのどこかにあると思います。数回実行していますが、これだけですでに1.2秒かかります。滑らかであれば許容できますが、そうではありません。材料に関して実際にスムーズなものはありません。説明することはできません。

それが行っているすべての画像も追加されました。これは正常ですか？

enter image description hereenter image description here

angularmaterial-designangular-materialangular-material2
15
Nick N.

これは、実際にこれらのマテリアルダイアログを開くボタンを含む約300のレコードを持つ大きなマットテーブルに関連していることがわかりました。レコードが2つしかない場合、angularドキュメンテーションと同じくらい速い。 これが遅い理由は、ダイアログと組み合わせた大きなテーブルのためです。

コード：

 <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>

残念ながら、修正プログラムはこれをまったく使用していませんでした（この方法で）。

4
Nick N.

10行程度のデータの後、テーブルが非常に遅くなるという同様の問題がありました。結局のところ、テーブル行内でダイアログ、選択、メニュー、その他の生成されたコントロールなどを使用すると、テーブルは非常に遅くなります。マテリアルメニューは、matMenuTriggerDataを使用してテーブル外の単一のメニューにデータを渡すことで、テーブル外に移動できます。ダイアログは、ダイアログを作成する関数をトリガーすることで使用できます。私が見つけた選択には良い選択肢がないので、テーブルの外に住んでいたマテリアルメニューのスタイルを変更しました。

テーブルは非常に高速になり、数百行になりました。

1
Jeph