Problems with Javascript working with too many nodes?

Question

I am currently debugging an ajax chat that just infinitely fills the page with DOM elements. If you have a chat that lasts about 3 hours, you will receive a divine amount of thousands of DOM nodes.

What are the problems associated with extreme use of the DOM?

Is it possible that the user interface is completely unresponsive (especially in Internet Explorer)?

(And the related question disagrees with the solution if there are other solutions than manual garbage collection and removal of dom nodes.)

Answer 1

The most modern browser has to deal with huge DOM trees. And most does not usually include IE.

So, your browser may stop responding (because it needs too much RAM → swapping), or because the visualizer is simply overloaded.

The standard solution is to drop elements, say, after there are 10,000 lines of chat on the page. Even 100'000 lines should not be a big problem. But I was starting to feel embarrassed that the numbers were much larger (say, millions of lines).

[EDIT] Another problem is a memory leak. Despite the fact that JS uses garbage collection, if you make mistakes in your code and save links to remote DOM elements in global variables (or links to objects from a global variable), you can run out of memory even if the page itself contains only a few thousand elements .

Answer 2

Having a large number of DOM nodes should not be a big problem (if the client does not have enough RAM); however, manipulating a large number of DOM nodes will be rather slow. For example, looping through a group of elements and changing the background color of each, it’s good if you do this for 100 elements, but it may take some time if you do this for 100,000 elements. In addition, some older browsers have problems working with a huge DOM tree - for example, scrolling through a table with hundreds of thousands of rows can be unacceptably slow.

A good solution for this is to buffer the view. In fact, you only show the elements that are visible on the screen at any time, and when the user scrolls, you delete the hidden elements and display those that are expanded. Thus, the number of DOM nodes in the tree is relatively constant, but you will not lose anything.

Another similar solution is to impose a limit on the number of messages displayed at any given time. Thus, all messages, say 100, will be deleted, and to see them you need to click on the button or link that shows more. This is what Facebook does with its profiles if you need a link.

Answer 3

Problems using the extreme DOM can boil down to performance. DOM scripts are very expensive, so constant access to and management of the DOM can lead to poor performance (and user experience), especially when the number of items becomes very large.

Consider, for example, HTML collections, for example document.getElementsByTagName('div') . This is a request to the document, and it will be reinstalled every time when updated information is required, for example, the length of the collection. This can lead to inefficiencies. Worst cases will occur when accessing and managing collections within loops.

There are many considerations and examples, but like everything that depends on the application.