I am building a one page webapp and it's starting to get pretty big. There are several ponents 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...

I am building a one page webapp and it's starting to get pretty big. There are several ponents 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...

• javascript
• html
• css
• dom

• 1 If you can provide some example HTML and/or Javascript, we might be able to remend how you might condense it. – Rob Raisch Commented May 16, 2011 at 19:38
• I suppose the best question is why you need all of that on one page at the same time. Could you do pagination or something? – josh.trow Commented May 16, 2011 at 19:46
• What browses are we talking here? – Šime Vidas Commented May 16, 2011 at 20:47
• "I tend to use a lot of DOM elements to get the styling exactly right and working cross browser" - elaborate please. – Šime Vidas Commented May 16, 2011 at 20:48

4 Answers 4

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.

We've built a single page web app. Initially Yslow worried me as we had 2,000+ DOM objects in the page.

After some work we got all the other Yslow items to green. And we ended up living with it(around 1,800 right now) as the app is very fast in various browsers.

But we don't support IE6 and IE7, and it could be different for these browsers.

How can I dramatically cut the number of DOM elements?

By using only those elements that are necessary. If you want an more elaborate advice, post your code.

Will I have to load more of the content on demand (ajax) instead on all on page load?

If you want your page to perform better on start-up, you can do that.

Does a large amount of DOM elements have a big impact on performance?

Not necessarily.

You can render elements on demand when user click a button or can use lazy loading like Twitter.