Serait-il préférable d'utiliser Knockout.js dans cette situation?

Question

Je suis actuellement en train de développer un programme analytique assez grand avec un backend Django/Python et j'utilise jQuery.

Disons que toutes mes statistiques sont basées sur le concept d'un "Person". Après avoir visualisé les statistiques d'aperçu, quelqu'un peut vouloir ouvrir un individu Person et regarder leurs statistiques.

Actuellement, j'envoie une requête AJAX à mon serveur, Django récupère la personne, lui restitue un arbre DOM entier et le renvoie. jQuery prend le <div> retourné et l'ajoute à l'arbre DOM des documents en même temps que les autres personnes ouvertes.

Donc, chaque Person a son propre div avec tous les mêmes éléments, juste avec leurs informations. La personne que vous voyez actuellement est display:block; tandis que je display:none; d'autres personnes. Tous les éléments (tels qu'un bouton permettant d'afficher des informations plus détaillées) qui doivent retourner au serveur pour extraire des informations plus détaillées sont codés avec le système de templates de Django et se voient attribuer un clic sur quelque chose comme getMoreInformation('myUUID');. Je voudrais également noter que je me trouve en utilisant fréquemment les identificateurs UUID dans les identifiants d'éléments afin qu'AJAX puisse trouver et modifier les informations de la bonne personne si nécessaire.

J'ai récemment découvert Knockout.js et je me demande si ce serait mieux pour moi de l'utiliser dans cette situation, et ont des préoccupations au sujet de la vitesse, etc.

Il semble que Knockout.js serait « la bonne chose à faire "car il fournit une meilleure relation 1-à-1 entre les données sur le backend et comment il est représenté dans le Javascript (modèles à modèles) au lieu d'éléments DOM individuels avec id passés pour toutes les fonctions. Sans compter que cela réduirait drastiquement la quantité d'éléments dans l'arbre DOM.

Cependant, mon principal public est IE8, et j'ai des problèmes sur Knockout.js ayant des problèmes de performance. Alors que actuellement je cache et montre les divs liés aux personnes que vous étudiez, Knockout.js devrait passer par tous les data-bind et utiliser Javascript pour remplacer leur contenu.

Quels sont les problèmes de performances liés à l'utilisation de Knockout.js dans une situation comme celle-ci? Ou seraient-ils si minimes qu'ils ne comptent pas? Difficile de trouver des benchmarks, est-ce que quelqu'un a connu une interface utilisateur plus lente en passant à Knockout.js? (Moins d'éléments DOM + Knockout.js vs plus d'éléments DOM sans Knockout.js dans une application "monde réel" est un peu ce que je cherche ici.)

Answer 1

Je pense que KO serait formidable pour cela , rappelez-vous que vous pouvez simplement utiliser la liaison visible pour définir display: none alors ce n'est pas mauvais. En outre, selon les performances, il sera probablement aussi bon ou meilleur que jQuery puisque la liaison a un accès direct à l'élément et n'a pas besoin d'interroger le DOM.

Cependant, il peut y avoir beaucoup de travail si votre serveur renvoie le code HTML. A la place, vous souhaiterez que les données soient renvoyées en tant que JSON et que vous créiez l'interface utilisateur dans le navigateur. De même, à moins que vous ne souhaitiez que des valeurs individuelles soient mises à jour après leur chargement, il n'est probablement pas nécessaire que les bits individuels de données soient observables.

Je ne vois pas pourquoi vous pensez qu'il y aurait plus ou moins d'éléments DOM en passant à KO. Knockout utilise des modèles qui n'ont pas besoin d'être dans le DOM avant le rendu. Votre implémentation actuelle consiste à insérer des parties de code HTML dans le DOM et toutes les autres étant égales, elles doivent être identiques.

Answer 2

Je voulais faire un commentaire mais commentaire était trop long alors voici une réponse

Optimizing performance of data visualisation web application

J'ai changé un outil de visualisation de données après avoir une pensée similaire;

il l'habitude d'appeler fait le reste beaucoup le serveur à chaque interaction,

maintenant le serveur envoyer beaucoup de données & js;

je fixe l'index à la réception des données (jusqu'à 170kb non compressé), puis selon l'interaction de l'utilisateur dom est modifié (pas d'affichage: aucun partout, le contenu est changé ou détaché; éléments html)

le résultat est incroyablement rapide (j'étais surprise); Vous devez faire attention à la façon dont vous ajoutez votre élément au DOM, pour créer un objet bien structuré pour accéder au moins au DOM;

je sais pas à propos de knock-out, mais imo si elle est grande & spécifique & vous regardez les performances que vous feriez mieux de faire l'algorithme vous-même (il n'est pas difficile de traiter simplement vos données dans les tableaux indexés qui seront utilisés comme est lorsque les événements sont déclenchés - soit une boucle à la réception, pas plus)