DOM元素太多

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.

Answer 2

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.

Answer 3

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.

Answer 4

您可以在用户单击按钮时按需呈现元素，也可以使用Twitter等延迟加载。