CODEWITHSUNDEEP
htmlperformancedom
Tower
Tower

Reputation: 102795

Is having a lot of DOM elements bad for performance?

I am making a button that looks like this:

<!-- Container -->
<div>

<!-- Top -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Middle -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Bottom -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

</div>

It has many elements, because I want it to be skinnable without limiting the skinners abilities. However, I am concerned about performance. Does having a lot of DOM elements refrect bad performance? Obviously there will always be an impact, but how great is that?

Update:

The container div sets properties like drop shadow and border for the whole button. Then we have a grid-like 3x3 where each corner can have its own image, border and other CSS properties. And finally we have the middle part that contains the text and possible some other styling like padding.

Say I want to have a button with box-shadow, 4 corner images, 4 edges images and the center image where all images are SVG and the center needs padding. How would I accomplish this with less DIVs? My target browsers are HTML5 browsers.

Upvotes: 2

Views: 2332

Answers (3)

Slawek
Slawek

Reputation: 782

Best to cut off elements, and use semantic code (ul, li, span, etc.)

But code as simple won't affect any browser's performance. Of course when it'll become more complicated that's browser dependant. Generally javascript code is much bigger performance hit (simple libraries like jquery having hundreds of thousands of lines), so you shouldn't worry too much about 2 or 3 additional html tags... just limit the scripting to required minimum :)

For modern browsers, unfortunatelly using modern HTML / CSS means you'll be dropping IE6,7,8 users... or the website will look bad for them.

Upvotes: 0

Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28541

Replying to your comment: all modern HTML5 browsers will support CSS 3 which should be more than enough to your designers to make some pretty buttons.

If by any chance one of them would be complaining about that, you could just make use of jQuery script to add some markup around the button.

I simply would not throw such garbage into my pages and make the code hard to read and thus hard to style.

Upvotes: 0

Pekka
Pekka

Reputation: 449465

This is hard to answer because obviously, the impact will vary from browser to browser.

For a single button, though, that is a lot of elements. Any chance of cutting down some?

What I also find difficult is that the "div soup" makes code extremely hard to read, and requires every element to get a class for styling. Try to find more suitable elements like

  • <h1> <h2>... for captions and titles

  • <ul> <li> ... for navigation and other lists

Also try to work with border and background-image properties where possible, they will almost certainly reduce the need for the number of elements used. I can't think of a button that needs this many elements to work.

Upvotes: 3

Related Questions