Performances pour l'ajout de grands éléments/ensembles de données dans le dom

Question

J'ajoute de grandes quantités d'éléments de lignes de tableau à la fois et je rencontre des goulots d'étranglement importants. Pour le moment, j'utilise jQuery, mais je suis ouvert à une solution basée sur javascript si elle permet de faire le travail.

J'ai besoin d'ajouter entre 0 et 100 lignes de table à un moment donné (en fait, c'est potentiellement plus, mais je vais paginer tout ce qui dépasse 100).

Pour l'instant, j'ajoute chaque ligne du tableau individuellement au dom...

loop {
  ..build html str...
  $("#myTable").append(row);
}

Puis je les fais disparaître d'un coup.

$("#myTable tr").fadeIn();

Il y a plusieurs choses à considérer ici...

1) Je lie les données à chaque ligne individuelle du tableau, ce qui est la raison pour laquelle je suis passé d'un ajout en masse à l'ajout de lignes individuelles en premier lieu.

2) J'aime beaucoup l'effet de fondu. Bien qu'il ne soit pas essentiel à l'application, je suis très attaché à l'esthétique et aux animations (qui, bien sûr, ne détournent pas l'attention de l'utilisation de l'application). Il doit simplement y avoir un bon moyen d'appliquer un effet de fondu modeste à de plus grandes quantités de données.

(éditer) 3) L'une des principales raisons pour lesquelles j'aborde cette question de manière récursive et en petits morceaux est que je dois lier des données spécifiques à chaque ligne. Est-ce que je lie mal mes données ? Existe-t-il un meilleur moyen de garder la trace de ces données que de les lier à leurs données respectives ? tr ?

---

Est-il préférable d'appliquer les manipulations d'affects/domaines par gros morceaux ou par petits morceaux dans des fonctions récursives ?

Y a-t-il des situations où il est préférable de faire l'un ou l'autre ? Si oui, quels sont les indicateurs permettant de choisir la méthode appropriée ?

Answer 1

Jetez un coup d'œil à ceci post par John Resig Il explique l'avantage d'utiliser DocumentFragments lors d'ajouts importants au DOM.

Un DocumentFragment est un conteneur auquel vous pouvez ajouter des nœuds sans modifier le DOM de quelque façon que ce soit. Lorsque vous êtes prêt, vous ajoutez le fragment entier au DOM et cela place son contenu dans le DOM en une seule opération.

Aussi, faire $("#myTable") en chaque l'itération n'est vraiment pas recommandée - faites-la une fois avant la boucle.

Answer 2

Je pense que vos problèmes de performance sont dus au fait que vous modifiez le DOM plusieurs fois, dans votre boucle.

Essayez plutôt de le modifier une fois que vous aurez obtenu tous vos rangs. Les navigateurs sont vraiment bons pour remplacer les innerHTML. Essayez quelque chose comme

$("#myTable").html("all the rows dom here");

Notez que vous devrez peut-être jouer avec le sélecteur exact à utiliser, pour obtenir le dom au bon endroit. Mais l'idée principale est d'utiliser innerHTML, et de l'utiliser aussi peu de fois que possible.