javascript/dom - quel est le coût de la création ou de la réorganisation des noeuds dom ?

Question

J'essaie d'optimiser un tableau triable que j'ai écrit. Le goulot d'étranglement se situe au niveau de la manipulation des domaines. Je crée actuellement de nouvelles lignes de tableau et les insère à chaque fois que je trie le tableau. Je me demande si je ne pourrais pas accélérer les choses en réarrangeant simplement les lignes, sans recréer les nœuds. Pour que cela fasse une différence significative, il faudrait que la réorganisation des nœuds dom soit beaucoup plus rapide que la création des nœuds. Est-ce le cas ? Je vous remercie, -Morgan

Answer 1

Je ne sais pas si la création ou la manipulation est plus rapide, mais je sais que ce sera plus rapide si vous manipulez le tableau entier lorsqu'il n'est pas sur la page et que vous le placez ensuite sur la page en une seule fois. Dans le même ordre d'idées, il sera probablement plus lent de réorganiser les lignes existantes sur place, à moins que le tableau entier ne soit d'abord retiré du DOM.

Cette page suggère qu'il serait plus rapide de cloner le tableau actuel, de le manipuler comme vous le souhaitez, puis de remplacer le tableau dans le DOM.

Answer 2

Je dessine ce tableau deux fois plus vite maintenant, en utilisant innerHTML, en construisant le contenu entier comme une chaîne, plutôt qu'en insérant les nœuds un par un.

Answer 3

Cette page peut s'avérer utile pour effectuer des comparaisons :

http://www.quirksmode.org/dom/innerhtml.html

Answer 4

Je cherchais une réponse à cette question et j'ai décidé d'effectuer un test de référence rapide. http://jsfiddle.net/wheresrhys/2g6Dn/6/

Il utilise jQuery et n'est donc pas une référence pure, et il est probablement faussé à d'autres égards. Mais le résultat qu'il donne est que le déplacement des nœuds DOM est environ deux fois plus rapide que la création et la destruction des nœuds DOM à chaque fois.

Answer 5

Si vous le pouvez, il est préférable de ne pas manipuler le dom en tant que tel, mais comme une sorte de méthode au sein de votre script et de manipuler ensuite le dom. Ainsi, plutôt que de faire ce qu'on appelle un repeint sur chaque nœud, vous regroupez ce qui aurait été votre repeint sur chaque nœud dans sa propre méthode, puis vous attachez ces nœuds dans un parent qui serait ensuite attaché au dom actuel, ce qui résulte en seulement deux repeints au lieu de centaines. Je dis deux car vous devez nettoyer ce qui est déjà dans le dom avant de le mettre à jour avec vos nouvelles données.