CODEWITHSUNDEEP
javascriptjquerydomclient-sidetemplate-engine
benwebdev
benwebdev

Reputation: 159

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

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

b

Upvotes: 2

Views: 124

Answers (2)

Emil Ivanov
Emil Ivanov

Reputation: 37633

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.

Upvotes: 2

Zack Marrapese
Zack Marrapese

Reputation: 12080

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.

Upvotes: 1

Related Questions