Optimisation Knockout / TKO – Alpha3

Dans le processus de modernisation Knockout pour la version 4.0 (maintenant en direct au monorepo tko ), j'ai frappé quelques problèmes de performance.

Entre autres changements, certaines choses internes ont été converties en classes ES6, et cela pose des problèmes de performances majeurs. Je préfère ne pas défaire cet effort car il ajoute un peu de clarté à certains codes clés, alors j'aimerais solliciter quelques commentaires sur la façon d'améliorer le code ES6.

J'ai mis en place des exemples simples pour le profilage ici:

Knockout Alpha2 – 349ms

Knockout Alpha3 (préréglage) – 622 ms

Le code dans jsFiddles est le suivant, et il est prototypique des ralentissements rencontrés dans un certain nombre de liaisons.

HTML:

<div id='x'> <strong>{{ count }} / {{ time }} ms</strong> <custom-component></custom-component> </div> <div id='cc-template'> cc {{# unless: finished }} <custom-component></custom-component> {{ /unless }} </div> 

Javascript:

 let count = ko.observable(0) let time = ko.observable(false) const start = performance.now() const ITERATIONS = 1000 class viewModel { constructor () { this.finished = count() > ITERATIONS count(count() + 1) time(performance.now() - start) } } ko.components.register("custom-component", { viewModel, template: {element: 'cc-template'} }) ko.applyBindings({count, time}, document.getElementById('x')) 

Si vous comparez les profils Javascript, les arbres d'appel sont presque identiques (malgré les modifications ES6, par exemple). On dirait que le temps supplémentaire dans Alpha3 est aux appels à la feuille, ce qui les rend plus difficiles à identifier, alors je spécule en fonction des comparaisons de profils que le problème est un peu partiel, y compris:

  • Certains événements non optimisés ou désactivants
  • Certaines boucles sont remplacées par des appels natifs plus lents, par exemple Array.from
  • Plus de collecte des ordures mineures intermédiaires
  • Moins d'optimisation native pour ES6isms

En tout cas, je n'ai pas supposé que, si l'un de ces problèmes, c'est le problème encore, ou où exactement ils se produiraient.

Je serais très reconnaissant pour les idées et aider à identifier où nous pouvons faire des optimisations pour que la performance soit sauvegardée, voire supérieure, par.

Pour consolider toutes les réponses, j'ai commencé une réponse en tant que wiki:

  • Supprimez le chaînage de dépendance inapproprié et inutile avec le template et if / ifnot / unless / with / else et foreach bindings – 3074AA9