Javascript performance problems with too many dom nodes?

Jens picture Jens · Dec 6, 2010 · Viewed 10.1k times · Source

I'm currently debugging a ajax chat that just endlessly fills the page with DOM-elements. If you have a chat going for like 3 hours you will end up with god nows how many thousands of DOM-nodes.

What are the problems related to extreme DOM Usage?

Is it possible that the UI becomes totally unresponsive (especially in Internet Explorer)?

(And related to this question is off course the solution, If there are any other solutions other than manual garbage collection and removal of dom nodes.)

Answer

Aaron Digulla picture Aaron Digulla · Dec 6, 2010

Most modern browser should be able to deal pretty well with huge DOM trees. And "most" usually doesn't include IE.

So yes, your browser can become unresponsive (because it needs too much RAM -> swapping) or because it's renderer is just overwhelmed.

The standard solution is to drop elements, say after the page has 10'000 lines worth of chat. Even 100'000 lines shouldn't be a big problem. But I'd start to feel uneasy for numbers much larger than that (say millions of lines).

[EDIT] Another problem is memory leaks. Even though JS uses garbage collection, if you make a mistake in your code and keep references to deleted DOM elements in global variables (or objects references from a global variable), you can run out of memory even though the page itself contains only a few thousand elements.