Least memory intensive DOM element

Question

I want to render some 4000 odd DOM elements using Javascript. Do all DOM element consume the same memory within the browser? For e.g. between SPAN, DIV, A, etc. are they all the same memory wise?

Answer 1

I would imagine a plain text node would use the least. What you should actually use depends on what the data is and how you want to display it.

Answer 2

I suspect that's browser/implementation dependent.

Perhaps you should run some tests with pages made up of 4000 elements of differing types, and look at the relative memory consumption?

Answer 3

I don't think there is so much difference between DOM elements by themselves.

What is important is the way they are styled.

An input element will require some memory because a native widget is attached to it. A link will require some memory because a click event handler is attached to it. A table cell will require some memory because its style allows it to be resized automatically.

Just use whatever you need and see if it works.

If it does not, pagination will help you more than searching for the right DOM element to use.

Answer 4

Create your markup based on what you want to put in it, not on some perceived benefit to using "the most efficient" DOM element. A <SPAN> serves a very different purpose than a <DIV>. And when you get right down to it, the difference in memory consumption is going to be minor, and 4,000 elements isn't a lot (go to any eCommerce site and parse the page; you'll end up with far more).

On a practical note: it's probably going to be faster to create the elements using innerHTML rather than DOM constructors, and this is what will be important to your users. See this article for more information.

Answer 5

Don't use "TABLE" element for sure - it is a lot slower and requires a lot more of memory than collection of DIVs or SPANs