Performance with infinite scroll or a lot of dom elements?

I have a question on a big # of dom elmenets and performance.

Let’s say I have 6000 dom elements on a page and the number of the elements can be increased as a user interact with the page (user scrolls to create a new dom element) like twitter.

To improve the performance of the page, I can think of only two things.

1. set display to none to invisible items to avoid reflow
2. remove invisible items from the dom then re-add them as needed.

Are they any other ways of improving a page with a lot of dom elements?

Answer

No experience myself with this, but there are some great tips here: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

I had a look at Facebook and they don’t seem to do anything in particular on Firefox. As you scroll down, the DOM elements at the top of the page don’t change. Firefox’s memory usage climbs to about 500 meg before Facebook doesn’t allow you to scroll further.

Twitter appears to be the same as Facebook.

Google Maps is a different story – map tiles out of view are removed from the DOM (although not immediately).