Most lightest DOM Object.

Question

Hi,

Wanted to know which is the most lightest HTML element. Have a huge set of JSON data which i have to display in proper readable format, hence going to loop through the data and create dynamic elements. Which is the most lightest element of HTML, lightest as in which takes the least amount of memory and is easily rendered by the browser etc..

EDIT : Will be using Mootools so no worry for the creation part. Will be using the usual. This is wat i am going todo

objJson.each(function(j, jCounter)
{
     var elm = new Element('', {'html' : j.value}).injectInside($(document.body));
});

Tell me what new element is the best to create ??

Answer 1

That is very browser dependent, and is probably the wrong question.
Usually, loading the data and parsing the JSON object will take a lot longer than displaying the HTML.

Answer 2

My wild guess is span if you want to be able to CSS it any way you want.

Answer 3

I would consider a table or divs. However, if you have a huge amount of data to display, I suggest you might want to investigate using a scrollable grid (or table) along with paging. Your user probably won't be fond of manually traversing lots of data rendered vertically on a page.

Several JS libraries provide nice (scrollable and pageable) solutions.

Answer 4

This is something you shouldn't worry about. Instead you should worry about how you will create those dynamic elements.

For example, .innerHTML is by far the fastest way, but there are some glitches.

If you want to use the pure document.createElement('span') way you could try it by creating the span the first time and then you could use .cloneNode(true) to clone it instead of creating it each time (frameworks do this and there's a good amount of speed you could earn).

In any case you should probably use a framework like jQuery and use their appropriate methods for creating dynamic elements, they are state of the art implemented for speed.

---

UPDATE

I don't think anyone knows which would be the best element to use. It is browser specific, and the differences between using a div or a span are so minor that you shouldn't worry about it.

Since it looks like you're not working with any tables, but just with a single element, I suggest using innerHTML.

Answer 5

As @Kobi mentioned, appending the elements will be much less resource intensive than actually parsing a large json string and looping through it.

If you want to write efficient code don't use .append() for every new element but rather construct a string and then append it. Something along the lines of:

var newElements;

for(i=0; i<objects.length; ++i) {
  newElements += "<div>" + objects[i].name + "</div>"
}

$("#container").append(newElements);

I used a div with a single text entry just as a sample. It can be any elements with any number of values. If you have multiple items in each json object you can make the above code more efficient by doing something like:

var object;
var newElements;
var objectCount = objects.length;

for(i=0; i<objectCount; ++i) {
  object = objects[i];
  newElements += "<div>" + object.name + ", " + object.size + ", " + object.color + "</div>"
}

$("#container").append(newElements);