Optimisation des performances d'une application knock-out - Lignes directrices pour améliorer les temps de réponse

Question

J'ai une grande page complexe qui s'appuie fortement sur knockout.js. La Performance commence à devenir un problème, mais l'examen de la pile d'appel et essayer de trouver les goulots d'étranglement est un véritable défi.

J'ai remarqué dans une autre question ( Knockout.js -comprendre les foreach et avec ) que l'on a accepté la réponse a le commentaire:

...et j'ai conseillons de ne pas utiliser with où la haute performance est nécessaire en raison de la surcharge...

En supposant que l'énoncé est vrai, c'est vraiment des trucs utiles à savoir et je n'ai pas trouvé une source pour ces conseils de performances.

Donc, ma question est:

Existe-il des lignes directrices générales / les meilleurs conseils que je peux appliquer pour aider à l'exécution de ma demande avant que je sois profondément dans classique d'optimisation des performances.

Answer 1

Je pense qu'il serait beaucoup trop à disposition les conseils que j'ai à l'esprit en une seule réponse.

J'ai commencé une série de billets de blog sur ce sujet. Le premier post est ici.

Ce post explique un peu comment if/with de travail (copie les enfants comme son modèle et re-rend l'aide du modèle à chaque fois que la liaison est déclenchée) et explique comment ces liaisons peuvent être à l'origine de re-rend beaucoup plus souvent que prévu.

Je mettrai à jour cette réponse avec les futurs postes.

Answer 2

L'une des plus grandes erreurs que j'ai trouvé (et de ne pas voir mentionné ailleurs), c'est que knock-out ré-évalue chaque liaison sur un élément à chaque fois tout de liaison sur l'élément change.

C'est ordinairement pas une grosse affaire, mais pour les liaisons qui ont tendance à être coûteux (par exemple, template), il peut créer de sérieux problèmes de performance.

Fixez les liaisons qui rendent le contenu/enfants (template, foreach, etc.) pour un élément virtuel (à l'aide de la containerless flux de contrôle de la syntaxe) s'ils ne sont pas la seule liaison sur l'élément.

Answer 3

Je pense que la cartographie peut aussi vous aider. Vous pouvez suivre ce test et voir la différence entre l'utilisation de la carte jquert, de la carte knock- out, de la carte knock- card -vs-jquery-map.

Lorsque vous commencez à utiliser fortement la cartographie ObservableArrays devient cruciale