¿Problemas de rendimiento de JavaScript con demasiados nodos dom?

Question

Actualmente estoy depurando un chat ajax que simplemente llena la página con elementos DOM. Si tienes una conversación de aproximadamente 3 horas, terminarás con Dios, cuántos miles de nodos DOM.

¿Cuáles son los problemas relacionados con extreme DOM ¿Uso?

¿Es posible que la UI deje de responder por completo (especialmente en Internet Explorer)?

(y relacionado con esta pregunta es por supuesto la solución, si existen otras soluciones distintas a la recolección de basura manual y eliminación de nodos DOM.)

Answer 1

mayoría navegador moderno debe ser capaz de tratar bastante bien con un enorme Árboles DOM Y "la mayoría" por lo general no incluye IE.

Así que sí, su navegador puede dejar de responder (porque necesita demasiada RAM -> intercambio) o porque su procesador está simplemente desbordado.

La solución estándar es soltar elementos, por ejemplo, después de que la página tiene 10'000 líneas de chat. Incluso 100'000 líneas no deberían ser un gran problema. Pero comenzaría a sentirme incómodo por números mucho más grandes que eso (digamos millones de líneas).

[EDITAR] Otro problema es la pérdida de memoria. Aunque JS utiliza la recolección de elementos no utilizados, si comete un error en su código y mantiene referencias a los elementos DOM borrados en variables globales (o referencias de objetos de una variable global), puede quedarse sin memoria aunque la página contenga solo unos pocos mil elementos

Answer 2

Problemas con extremo El uso DOM puede reducirse al rendimiento. Las secuencias de comandos DOM son muy costosas, por lo que el acceso y la manipulación constantes del DOM pueden dar como resultado un rendimiento deficiente (y la experiencia del usuario), especialmente cuando la cantidad de elementos es muy grande.

Considere colecciones HTML como document.getElementsByTagName('div'), por ejemplo. Esta es una consulta contra el documento y se volverá a ejecutar cada vez que se requiera información actualizada, como la longitud de la colección. Esto podría conducir a ineficiencias. Los peores casos ocurrirán al acceder y manipular colecciones dentro de bucles.

Hay muchas consideraciones y ejemplos, pero como todo depende de la aplicación.

Answer 3

Sólo teniendo muchos nodos DOM no deberían ser un problema (a menos que el cliente tenga poca RAM); sin embargo, manipulando muchos nodos DOM serán bastante lentos. Por ejemplo, recorrer un grupo de elementos y cambiar el color de fondo de cada uno está bien si está haciendo esto en 100 elementos, pero puede llevar un tiempo si lo hace en 100.000. Además, algunos navegadores antiguos tienen problemas cuando se trabaja con un enorme árbol DOM; por ejemplo, desplazarse por una tabla con cientos de miles de filas puede ser inaceptablemente lento.

Una buena solución para esto es proteger la vista. Básicamente, solo muestra los elementos que están visibles en la pantalla en un momento dado, y cuando el usuario se desplaza, elimina los elementos que se ocultan y muestra los que se revelan. De esta forma, la cantidad de nodos DOM en el árbol es relativamente constante, pero en realidad no se pierde nada.

Otra solución similar a esto es implementar un límite en la cantidad de mensajes que se muestran en un momento dado.De esta forma, cualquier mensaje pasado, por ejemplo, 10,00 se elimina, y para verlos debe hacer clic en un botón o enlace que muestre más. Esto es más o menos lo que Facebook hace con sus perfiles, si necesita una referencia.