Too Many DOM Elements

Question

I am building a one page webapp and it's starting to get pretty big. There are several components to the app, each one meticulously styled. On average the app has a DOM element count of 1200+. I have been warned by my YSlow scan that this is too many, and that I should have no more than 700 DOM elements.

I am usually quite strict and efficient with my markup and I doubt I would be able to trim much off. I tend to use a lot of DOM elements to get the styling exactly right and working cross browser.

How can I dramatically cut the number of DOM elements? Will I have to load more of the content on demand (ajax) instead on all on page load? Does a large amount of DOM elements have a big impact on performance?

I would love to hear people's experience with this and any solutions you may have...

Answer 1

The number of dom elements would only enter into the picture if you're doing a lot of DOM and/or CSS manipulation on the page via Javascript. Scanning for an ID in a page with 50,000 elements is always going to be slower than a page with only 500. Changing a CSS style which is inherited by most of the page will most likely lead to more redrawing/reflowing than it would on a simpler page, etc...

The only way to cut element count is to simplify the page.