Optimisations des performances de Kendo UI TreeView à venir

La performance est la clé du succès. C'est pourquoi nous améliorons constamment les performances de tous nos composants d'interface utilisateur. Ce blog présente certaines des améliorations apportées à l'un de nos composants d'interface utilisateur les plus populaires: le TreeView.

Les développeurs ont toujours été obsédés par les performances. Qu'est-ce qui se cache derrière cette obsession?

Réponse courte: La réussite du produit repose sur des interactions rapides et sur l'expérience des utilisateurs. Les utilisateurs de Kendo UI conçoivent des produits qui doivent être couronnés de succès. Les composants de notre interface utilisateur doivent donc avoir les performances correspondantes. C'est pourquoi nous sommes également obsédés par l'amélioration des performances de tous nos composants d'interface utilisateur, en particulier ceux qui traitent beaucoup de données. Pour ce blog en particulier, nous souhaitons nous concentrer sur l'un de nos composants d'interface utilisateur les plus populaires: le TreeView. En ce qui concerne les performances de Kendo UI TreeView, il convient de mesurer et de prendre en compte quelques éléments, à savoir:

• Temps de chargement
• Opérations Développer et Réduire
• Modifier l'état de contrôle des nœuds
• Script Il est temps de réinitialiser TreeView sur le filtre dataSource

Le but de cet article de blog est de vous montrer quelles optimisations ont été apportées et quelles autres solutions pourraient être utilisées pour améliorer votre expérience avec TreeView Kendo UI.

Quel genre de commentaires? Avons-nous reçu?

La réception de rapports pour des performances lentes sonne toujours pour les développeurs. Que ce soit des membres de l'équipe ou des utilisateurs finaux, il semble que nous pouvons toujours faire quelque chose de plus rapidement. Nous avons toujours un maximum théorique qui peut être atteint dans un navigateur, et parfois cela finit par être une bataille difficile contre la lenteur et les problèmes de différents navigateurs. Cela dit, le temps de script global des composants Web doit toujours être évalué. Pour vous donner une idée, voici quelques remarques signalées jour le jour par les utilisateurs de TreeView:

• "Le filtrage de la source de données met longtemps à actualiser TreeView"
• "Expand / L'opération de réduction pour un plus grand ensemble de nœuds est lente "
• " L'option checkChildren activée est lente pour 10 000 nœuds "

Changements de performances à venir dans la R1 2019

Nous avons commencé à analyser et à rechercher des façons d'améliorer les performances avec nos TreeView de Kendo UI . Nous avons révisé le temps de script côté client pour toutes les opérations TreeView et avons examiné de près le composant. Cela nous a aidés à identifier quelques goulots d'étranglement dans notre code, qui constituent des domaines essentiels pour l'amélioration des performances.

Alors, qu'avons-nous fait pour nous débarrasser de ces goulots d'étranglement?

Code Refactoring

Comme pour presque tous les codes de base, regardez comment quelque chose est mis en œuvre avec des années d'expérience ceinture peut conduire à voir de nouvelles façons de résoudre les vieux problèmes. Alors que nous parcourions notre propre code, nous avons trouvé plusieurs zones que nous pourrions refactoriser. Sans entrer dans les détails, nous avons pu optimiser des sections de notre code existant qui permettaient un gain de performance initial

Optimisation des sélecteurs et des appels de fonction

En parcourant le code, nous avons trouvé des fonctions. qui ont été appelés à plusieurs reprises pour une certaine opération. Une victoire rapide réduisait le nombre total de fois où ces fonctions ont été appelées. Connaissant nos connaissances actuelles sur TreeView et les implémentations de nos composants par nos clients, nous avons identifié plusieurs domaines d’optimisation de notre code qui ont finalement amélioré la qualité de code du composant. Nous nous intéressions également aux sélecteurs CSS que nous utilisions en interne et avons effectué plusieurs tests d'efficacité du sélecteur CSS. Grâce à cela, nous avons trouvé des domaines dans lesquels nous pourrions modifier notre façon de faire les sélecteurs CSS, notamment en supprimant les occurrences dans lesquelles nous utilisions des pseudo-classes dans nos sélecteurs.

Bien que ces éléments puissent sembler mineurs au début, tous ces éléments combinés nous permettent d'améliorer considérablement les performances. , même avec des ensembles de données plus petits. Étendre cela à des milliers de nœuds nous a donné un gain de performances considérable!

Implement Caching

Un domaine que nous avons réalisé a pris beaucoup de temps parcourait les éléments de données trouvés dans un nœud ayant des enfants. Passer au travers et faire quelque chose comme un filtre sur la source de données sous-jacente peut prendre beaucoup de temps, ce qui ne fait qu'empirer en traitant de grands ensembles de données. Nous nous sommes rendus compte que nous pouvions implémenter une méthode de mise en cache pour améliorer les performances ici. L'implémentation actuelle utilise un dictionnaire mis en cache de dataItems pour obtenir leurs champs afin d'éviter une traversée importante de la source de données. Cela signifie que le temps de script pour charger, filtrer et développer les nœuds en profite grandement.

Let's Measure!

Ce qui précède ne représente qu'un niveau élevé de ce qui a été réalisé. Pour obtenir des résultats plus précis et des données réelles à examiner, nous avons utilisé des données locales pour tester le temps de script du widget. Ci-dessous, nous allons mesurer le temps nécessaire pour l'opération Expand et le temps nécessaire pour l'opération de filtrage.

Le code utilisé pour tester peut être trouvé ici .

Expand

Dans cet exemple, le Kendo TreeView de Kendo UI est configuré pour afficher 100 nœuds, chacun contenant 100 nœuds (10 000 nœuds sont créés lorsque tous les éléments sont développés).

Filtre

Le Kendo UI TreeView est configuré pour afficher 10 000 nœuds et DataSource est filtré pour afficher 2 000 nœuds.

Que pouvez-vous faire d'autre pour améliorer l'UX avec Kendo UI TreeView?

Tout ce qui a été mentionné dans cet article correspond à des gains de performances pouvant être exploités simplement en passant à la version R1 2019 une fois qu'il est publié. . Cependant, il est possible d'optimiser un TreeView de différentes manières, en le mettant en œuvre et en utilisant les options de configuration disponibles. Voici certaines de nos options recommandées qui ont permis d'améliorer les performances dans la plupart des scénarios actuels:

• Utilisez LoadOnDemand true lorsque possible
  Les nœuds seront initialisés paresseux et le temps d'initialisation être considérablement amélioré
• Ensemble valide a champ hasChildren
  Évitez le codage en dur du champ hasChildren à true .
• [Expand/Collapse] Disable animation établissement avant d'expansion
  treeview.setOptions ({animation: false});
  // développez la logique
  treeview.setOptions ({animation : kendo.ui.TreeView.fn.options.animation});
• [Expand/Collapse] Agrandissement consécutif des nœuds
• Display Display Display Display icon avant l'opération
  Pour améliorer l'UX, l'utilisateur doit être conscient du traitement d'une demande:
  kendo.ui.progress (treeview.element.find ("[role=tree]", true);
  // expand / filter logic
  kendo.ui.progress (treeview.element.find ("[role=tree]"), false)

Préparez-vous à notre TreeView améliorée

Toutes ces réponses les échantillons contenaient des données locales et couvraient quelques scénarios courants. Bien entendu, les performances dépendent des niveaux de hiérarchie et d'autres détails de la mise en œuvre. Par conséquent, même si les performances augmentent, le type de gains de performance que vous obtiendrez dépendra de la mise en œuvre. La version R1 2019 est sur le point de s’ouvrir, nous sommes donc ravis de voir tout le monde tester et mesurer ces optimisations au sein de leurs applications. Nous approcherons tout le monde de la sortie au fur et à mesure que nous approcherons, alors commencez à vous enthousiasmer et gardez l'œil ouvert pour de nouvelles annonces!