DOM Insertion: Are some tag types faster when inserting into DOM?

views:

answers:

+2 Q:

DOM Insertion: Are some tag types faster when inserting into DOM?

Hi,

I have a web page that used client side templating to update part of the page based on json obtained via an ajax call.

At the moment I'm using an unordered list where inside each Li I have markup to display information about a product.

I'm interested to know, are some tags faster when inserting into the DOM than others? That is to say should I look to either change my ul into some other tag or maybe change the tags inside the Li s?

thanks

+2 A:

The fastest way is to construct HTML as text and set the innerHTML property once.

Another approach is to create a document fragment and once done put it into the DOM.

There might be a difference in the speed of insertion of one tag or another, but it will be marginal and different between browsers.

The thing is that touching the DOM is a very expensive operation - if speed is what you are after - minimize that.

Have a look at Stoyan Stefanov's performance tips.

Emil Ivanov 2010-01-13 15:49:37

The tag insertion point you make is interesting, and what I thought the answer would be. The reason I ask however is because I have a colleague who suggests replacing this layout to use a table. His theory is based on this post here: http://blogs.nitobi.com/dave/2007/01/30/html-rendering-pains/I'm surprised and v sceptical though as using a table for this goes against everything I've learned in layouting over the past few years.Any opinion?thanks again

benwebdev 2010-01-13 16:55:07

Some of these things are probably correct, but I wouldn't go for tables just for speed. Yes, it might be 3ms faster - but there are other things, like latency, that will cost me 300ms. Have a look at the last link I added about performance - it's a very good source.

Emil Ivanov 2010-01-14 08:19:48

What latency do you mean? is this latency with css rendering? sorry to dig this up. been discussing it with colleague just now.

benwebdev 2010-01-27 12:47:09

@benwebdev: No, I mean latency in the classic case - the time it takes the html to get from the server to the client, the time that the server spends waiting for a response from the database.

Emil Ivanov 2010-01-27 14:46:06

+1 A:

First off, that is completely dependent on the browser.

That being said, the difference between the rendering time of different tags should be negligible. Use the tag which provides the best semantic meaning. Don't worry about render times of different tags.

Zack 2010-01-13 15:50:26

ansaurus

tags:

views:

answers:

DOM Insertion: Are some tag types faster when inserting into DOM?

related questions