Présentation de la grille 60fps en interface Kendo pour Angular

Le composant Grid de Interface utilisateur de Kendo pour Angular a été considérablement amélioré. Lisez la suite pour voir comment nous y sommes arrivés et n'oubliez pas de mettre à jour la dernière version.

La grille est une tâche difficile: elle doit prendre en charge de nombreuses fonctionnalités lors du suivi de milliers d'éléments de données. Pour que les performances restent acceptables, nous utilisons les astuces habituelles pour les composants angulaires:

• Définissez la stratégie de détection des modifications sur OnPush pour les composants qui répondent uniquement aux modifications de leurs propriétés en entrée. Zone angulaire donc nous ne déclenchons pas les cycles de détection de changement
• Les événements de rebond afin d'éviter un traitement redondant

Avec autant de préparation en place, les performances devraient être bonnes, non? Eh bien, ça semblait être. Jusqu'à ce que les rapports commencent à s'accumuler; la grille était difficilement utilisable avec IE 11 dans des scénarios étonnamment courants. Au cas où vous ne seriez pas au courant, IE va tousser au moindre signe de trouble. C'est le canari proverbial dans une mine de charbon.

Pour diagnostiquer le problème, nous avons installé une démonstration sur StackBlitz et commencé à établir le profil:

Pour la plupart, nous faisons confiance à Angular pour mettre à jour le DOM. En fait, ngFor parcourait chaque ligne du tableau et y appliquait les modifications, supprimant, remplaçant ou déplaçant des lignes. être un désastre de performance que IE recalculer la disposition de la table à chaque changement.

Une version simplifiée de wh à la Grid peut être démontré dans cet extrait. Remarquez que chaque page remplace les 10 lignes (20 mises à jour au total).

Heureusement pour nous, la directive NgFor a un trait d'échappement: la fonction trackBy . Au lieu de créer une nouvelle ligne pour chaque élément de données, nous pouvons le suivre par index. L'effet est que les lignes de tableau ne sont ajoutées ou supprimées que lorsque le nombre d'éléments par page change. La taille de la page Grid étant uniforme, cela se produira rarement. La plupart du temps, les éléments de ligne seraient réutilisés pendant la mise à jour de leur contenu.

Examinons l'extrait de code mis à jour:

Notez qu'aucune ligne n'est ajoutée ou supprimée lors des modifications de page. Cela est dû à la fonction trackBy qui renvoie l'index de l'élément:

  

    
 {{item.value}} 
  

 public trackIndex (index: number): any {
  index de retour;
} 

Avec cette petite modification, le profil de performance de la grille s'est considérablement amélioré:

A emporter

En réutilisant des éléments DOM dans la table Grid nous avons pu améliorer les performances avec la pagination et

Nous vous recommandons de mettre à niveau @ progress / kendo-angular-grid vers la version 3.7.0 ou ultérieure, surtout si vous ciblez Internet Explorer 11. Si vous êtes nouveau sur l'interface utilisateur Kendo pour Angular, cliquez sur le lien ci-dessous pour commencer avec un essai gratuit de la dernière version.

Commencez avec l'interface utilisateur Kendo pour Angular

En savoir plus

• nous avons fait face à un tel problème Notre collègue, Goergi Krustev, a un excellent exposé sur NgFor et ses performances dans Rendu rapide de liste rapide en angulaire .
• La série Faster Angular Applications de Minko Gechev est une excellente lecture qui vous permettra de repenser votre approche des applications angulaires.

Happy codage!