web-dev-qa-db-fra.com

Quelle pourrait être la raison Angular 5 + Material 2 sont très très lents?

Je sais que ce n'est peut-être pas une très bonne question. Mais je ne sais vraiment pas quoi faire et je cherche des raisons.

Je lance localement mon application Angular 5 + Material 2 localement et les mat-dialog Et mat-tab Sont très lents. J'ai même essayé de désactiver les animations mais c'est encore très lent.

De plus, lors de la compilation pour la production avec ng-build --prod, Les résultats sont très lents.

Alors peut-être que je fais quelque chose de mal concernant la boîte de dialogue. Voici mon code:

  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');
    });
  }

Mon constructeur:

  constructor(
    private httpClient: HttpClient, 
    private dialog: MatDialog, etc..

et le constructeur du composant de dialogue:

constructor(public dialogRef: MatDialogRef<EditDemandComponent>, etc..

Dans le composant de dialogue, j'utilise le code this.dialogRef.close();

Je n'ai vraiment pas d'options ici et je ne comprends vraiment pas, car le matériel 2 documents est super rapide et pour moi localement, tout est super lent. Indication lente car les animations ne se déroulent pas correctement. Prendre au moins 2 secondes pour ouvrir une boîte de dialogue ou changer d'onglet.

Voici mes versions:

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

C'est lent dans Chrome, IE et Edge

Mon système est un ordinateur portable de développement, Core I7, SSD, 16 Go RAM etc. Ne pensez pas que c'est le système qui est lent.

Quelqu'un peut-il m'aider?

Edit: Ajout de cette mesure de performance du navigateur: Je pense que le problème est quelque part dans les animations. Il en exécute quelques-uns, et seul celui-ci prend déjà 1,2 seconde. Ce serait acceptable si c'était lisse, mais ce n'est pas le cas. Rien n'est vraiment lisse en ce qui concerne le matériel en fait. Je ne peux tout simplement pas l'expliquer.

Ajout également d'une image de tout ce qu'il fait. Est-ce normal?

enter image description hereenter image description here

angularmaterial-designangular-materialangular-material2
15
Nick N.

J'ai maintenant compris qu'il est lié à la grande table de tapis qui contient environ 300 enregistrements qui contiennent en fait les boutons pour ouvrir ces boîtes de dialogue matérielles. Quand je n'ai que deux enregistrements, c'est aussi rapide que la documentation angular. Je ne comprends toujours pas vraiment, car je m'attendrais à ce que cela fonctionne (300 ce n'est pas tant que ça.), Mais ça répond à la question. La raison pour laquelle cela est lent est à cause de tables plus grandes en combinaison avec des boîtes de dialogue.

Code:

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

Malheureusement, le correctif n'utilisait pas cela du tout (de cette façon).

4
Nick N.

J'ai eu un problème similaire avec une table devenant très lente après environ 10 lignes de données. Il s'avère que le tableau devient très lent si vous utilisez des éléments tels que des boîtes de dialogue, des sélections, des menus et d'autres contrôles générés dans une ligne de tableau. Les menus de matériaux peuvent être déplacés en dehors du tableau en utilisant matMenuTriggerData pour transmettre les données à un seul menu en dehors du tableau. Les boîtes de dialogue peuvent être utilisées en déclenchant une fonction qui crée la boîte de dialogue. Les sélections n'ont pas une bonne alternative que j'ai trouvée, j'ai donc fini par redessiner un menu de matériaux qui vivait en dehors de la table.

Le tableau est très rapide avec des centaines de lignes maintenant.

1
Jeph