Knockout JS et grands modèles

Question

J'essaie de comprendre les meilleures façons d'utiliser KnockoutJS et j'ai besoin de votre avis.

modèle

Ma vue contient un ensemble de « documents » chacun d'eux a un ensemble de « valeurs ». Chaque « document » est rendu sous la forme d'une table séparée en utilisant le modèle suivant:

<div data-bind="foreach: Documents"> 
     <table data-bind="foreach: Values"> 
      <tr data-bind="foreach: $data"> 
       <td data-bind="attr: {colspan: Colspan}"> 
        <label data-bind="text: Label"></label> 
        <br /> 
        <span data-bind="html: Value"></span> 
       </td> 
      </tr> 
     </table> 
</div> 

Tout fonctionne bien, sauf lorsque la vue des modèles sont grandes.

Par exemple, si la taille d'un modèle de vue est d'environ 1 méga-octet (et contient 80 documents avec 60 valeurs chacun), le rendu est plus de deux minutes sur ma machine.

Je me demande s'il y a un moyen d'améliorer considérablement les performances ... Ou sera-ce plus rapide de renoncer à knock-out et juste construire html sur un côté serveur et il suffit de pousser au navigateur ...

Le rendu "juste" du modèle de vue 300kb prend près de 30 secondes.

Les « documents » sont définis par les utilisateurs, il y a même> 2 méga-octets scénarios (je ne sais pas pourquoi font-ils le font).

Quelqu'un at-il une expérience avec de grands modèles de vue en JavaScript?

Answer 1

Avec votre exigence actuelle d'être incapable de charge paresseux (charge sur demande) données, vous êtes assez limité.

côté serveur HTML

Génération du côté serveur HTML sera la méthode la plus rapide. Mais même si le modèle est énorme, il y aura un retard. Envisagez de télécharger un fichier HTML de 5 Mo, votre navigateur devra prendre le temps d'analyser et de rendre quelque chose de si grand.

utilisent encore KNOCKOUT JS

Si vous souhaitez toujours utiliser votre cadre Knockout JS alors ma meilleure suggestion est mis chaque document dans un IFRAME. Ce n'est pas vraiment recommandé et cela augmenterait la charge de votre serveur, mais s'il était implémenté correctement, cela accélérerait votre expérience utilisateur.

www.mysite.com/view/1 

<div> 
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div> 
<div> 
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div> 
... 

www.mysite.com/view/1/document/1 

<!-- Just the single Document template --> 
    <table data-bind="foreach: Values"> 
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: {colspan: Colspan}"> 
       <label data-bind="text: Label"></label> 
       <br /> 
       <span data-bind="html: Value"></span> 
      </td> 
     </tr> 
    </table> 

Le navigateur client d'abord obtenir tout le code HTML contenant tous les IFRAME il enverra des demandes pour chaque mode asynchrone. Chaque requête de document unique sera rendue en utilisant Knockout JS dans sa propre trame de manière asynchrone.

Pour améliorer l'interaction de l'utilisateur, vous pouvez même mettre en place des événements de charge sur les iframes. L'événement de chargement peut redimensionner l'IFRAME de sorte qu'il n'y a pas de barre de défilement ou extraire le code HTML de l'IFRAME et remplacer l'élément IFRAME par le code HTML extrait.

Answer 2

Le moteur de modèle natif dans KO n'est pas particulièrement rapide. Je voudrais d'abord essayer le moteur jQuery.tmpl (described here). Si ce n'est pas assez rapide, vous devriez essayer de réduire la quantité de contenu rendu - par exemple, ne restituer un en-tête pour chaque document initialement et ensuite rendre les détails quand il est sélectionné ou développé.

Answer 3

Vous ne savez pas comment fonctionne votre application, mais si vous n'avez pas besoin d'afficher tout ce contenu à la fois, vous pouvez remplir votre modèle en morceaux.Comme dans l'une de mes applications, j'ai un modèle de vue qui a une grande liste d'éléments mais qui ne contient que des éléments visibles dans la table. La vue a également sélectionné l'entrée d'élément qui a plus d'informations et je la remplis quand une entrée est sélectionnée dans la liste.

En général, j'ai vu peu de fois que les gens mettent toutes sortes de choses sur le modèle de vue, même si ce n'est pas rendu dans l'interface utilisateur. Il a quelques avantages si vous obtenez vos affaires directement du serveur, mais d'un autre côté cela peut gonfler le modèle de vue.