Is div container expensive?

I have a page built with hundreds of div containers (don't ask why :). I know it is not too elegant, but 开发者_如何学运维is it resource-expensive to render? Should I worry about optimization?

It's not the divs themselves that are expensive, but their contents which push the layout around. What do you have in them?

Also, do you actually experience slowness? Measure first, worry after.

Test it out yourself. In Chrome, you can see the rendering timeline within the Dev tools. Try using half as many divs and see what the difference is.

As the other answer mentions, it'll have more to do with what's inside them. Text is easy; images not so much. If you have floating divs, it gets more complicated for the rendering engine. But if you look at the html for a comment thread on a site like Reddit, you're talking thousands of divs, and yet it renders very quickly. Just downloading the content will probably take 10x longer.

Depending on the device and the contents of the divs. Having created 12 div deep nesting, shadows, rounded corners, css3 transforms etc for testing on an iPad 1, it was as smooth as it gets when navigating. Total in excess of 70 divs caused nothing to slow down. Having up to 200 divs with not overly complex rules, content etc shouldn't cause real problems in modern browsers/devices. Also have had to work with a page that is over 40 MB with images, complicated structure and so on, and at least the couple of generations old Mac Mini handles it perfectly.

All in all I wouldn't worry too much about it. However, depending of your precise solution, this might not be true, but if you don't try to do too much HTML/CSS/JS/Flash magic inside the divs, you ought to be just fine. Some mobile browsers might differ too, though. Slower Androids, for example, are probably not gonna be able to handle it smoothly.