Problèmes de performance Javascript avec trop de noeuds dom?

Question

Je suis actuellement en train de déboguer une discussion ajax qui remplit sans fin la page avec des éléments DOM. Si vous avez une conversation pendant 3 heures, vous finirez par savoir combien de milliers de DOM-nodes.

Quels sont les problèmes liés à extreme DOM Utilisation?

Est-il possible que l'interface utilisateur ne réponde plus totalement (en particulier dans Internet Explorer)?

(Et lié à cette question est bien sûr la solution, s'il y a d'autres solutions autres que la collecte des ordures manuelle et la suppression des nœuds dom.)

Answer 1

La plupart navigateur moderne devrait être en mesure de traiter assez bien avec d'énormes Arbres DOM. Et "la plupart" n'inclut généralement pas IE. Donc oui, votre navigateur peut ne plus répondre (parce qu'il a besoin de trop de RAM -> échange) ou parce que son moteur de rendu est juste dépassé.

La solution standard consiste à laisser tomber des éléments, par exemple après que la page ait 10 000 lignes de conversation. Même 100'000 lignes ne devraient pas être un gros problème. Mais je commencerais à me sentir mal à l'aise pour des nombres beaucoup plus grands que cela (disons des millions de lignes). [EDIT] Un autre problème est celui des fuites de mémoire. Même si JS utilise le garbage collection, si vous faites une erreur dans votre code et conservez des références aux éléments DOM supprimés dans les variables globales (ou les références d'objets d'une variable globale), vous pouvez manquer de mémoire. mille éléments.

Answer 2

Problèmes avec extrême L'utilisation du DOM peut se résumer à des performances. Les scripts DOM sont très onéreux, donc l'accès et la manipulation permanents du DOM peuvent entraîner des performances médiocres (et une expérience utilisateur), en particulier lorsque le nombre d'éléments devient très important. Envisagez des collections HTML telles que document.getElementsByTagName('div'), par exemple.

Il s'agit d'une requête sur le document qui sera réexécutée à chaque fois que des informations à jour sont requises, telles que la longueur de la collection. Cela pourrait entraîner des inefficacités. Les pires cas se produiront lors de l'accès et de la manipulation des collections à l'intérieur des boucles.

Il y a beaucoup de considérations et d'exemples, mais comme tout dépend de l'application.

Answer 3

Juste ayant beaucoup de nœuds DOM ne devrait pas être un must d'un problème (à moins que le client manque de RAM); cependant, manipuler beaucoup de nœuds DOM sera plutôt lent. Par exemple, faire une boucle sur un groupe d'éléments et changer la couleur de fond de chacun est correct si vous faites cela à 100 éléments, mais cela peut prendre un certain temps si vous le faites sur 100 000. En outre, certains anciens navigateurs ont des problèmes lorsque vous travaillez avec un arbre DOM énorme - par exemple, faire défiler une table avec des centaines de milliers de lignes peut être inacceptable lent.

Une bonne solution à ceci est de mettre en tampon la vue. Fondamentalement, vous n'affichez que les éléments visibles à l'écran à un moment donné, et lorsque l'utilisateur fait défiler, vous supprimez les éléments qui sont cachés et vous montrez ceux qui sont révélés. De cette façon, le nombre de nœuds DOM dans l'arbre est relativement constant, mais vous ne perdez rien.

Une autre solution similaire consiste à implémenter un plafond sur le nombre de messages affichés à un moment donné.De cette façon, tous les messages passés, disons, 10,00 seront supprimés, et pour les voir vous devez cliquer sur un bouton ou un lien qui en montre plus. C'est en quelque sorte ce que fait Facebook avec leurs profils, si vous avez besoin d'une référence.