How to handle hundreds of thousands of DOM elements on a page?

I've been working on a protein/DNA sequence alignment tool for some of the scientists here at work. It started off as a simple table view of their alignment files. So I would have one table row with a string inside it for every sequence. But then they basically wanted to be able to do alignments from the component itself and all of a sudden every character in the sequence had to be a span element.

With only a handful of sequences on the page the browser remains smooth. But when the number of sequences goes to around 60 (> 100开发者_开发知识库k DOM elements) the browser starts to chug. By chug I mean that scrolling is no longer smooth and scrolling is an important operation on this page.

Things were manageable but my customer just informed me that they may want to load thousands of sequences into this thing.

So my question is how do you guys handle huge numbers of DOM elements? I've been thinking about using Canvas or Flash or some other non DOM solution but I'm wondering if there is a way to keep it in the DOM.

---

Element reuse! Rather than creating a span for each sequence character, create just enough for the current display, plus a buffer above and below of, say, 1 page. First, store your data in JavaScript (e.g. a JS array). Populate the initial set of elements from the array at load time. Then, as elements scroll off the page, reuse a lines worth of DOM elements by moving them to the bottom of the page and filling them with the data via JavaScript.

If you want to maintain the browser scrollbar positioning, create a pair of suitably sized extra divs, whose height changes dynamically, to "pad" the rest of the page.

---

Try to show not all of this elements but parts, set handler on scroll event and when it was at last or first visible element show another part of elements and hide another that were no longer important (visibility:hidden)