mootools: How can i put 10,000 < div > tags in a single page

I have developed an application in mootools. But its going little slow coz of number of tags it contains are almost 10,000. and every tag's structure is like:

<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

in following container

<div id="tags_container" style="overflow: scroll;height: 700px;">
 <div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
  <img src=""> <p>name</p> <p>Gender</p开发者_JAVA百科> <p>Mood</p> 
 </div>
 <!-- tag-2 -->
   .  
   .
   .
 <!-- all tags one after another -->
</div>

i m showing these tags in rows and columns format ( 5 columns and 2000 rows). The id="tags_container" < div > has vertical scrollbar. but when i try to scroll down in that division to see further tags it scrolls little slow.

what should i do about it?

should i change the implementation method from < div > tags to < table > tag?

what are the options to make it any faster?

In few previous questions, i was advised not to use those many tags in one single document but there is gonna be those many tags so what should i do about it.?

I've done something like this before. Use more CSS classes and fewer elements, and remove everything unnecessary (like comments). Though the data was tabular in nature, I found it much easier to create a pixel-perfect layout using <div>s.

Markup

<div class="cell">
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

CSS

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
}

If possible, it may also be quicker to use CSS spriting for the images, rather than 10k more elements for the images. Something like:

Markup

<div class="cell" style="background-position: 0px 0px;">
    <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

CSS

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
    background-image: url(path/to/sprite);
    background-repeat: no-repeat;
}

Edit If you need to do any sort of DOM manipulation of these elements, I recommend loading all of them up into a JS array — once — and then accessing them by index from the array. Repeatedly querying the DOM for the same elements will wreck performance.

If possible, also remove the <p> elements within each <div>. If you've got 10k <div> elements, each containing 3 <p>s, then you're really working with a minimum of 40k elements.

That's a lot of DOM, baby.

If you can figure out how to get the same layout removing even just 1 or 2 <p>s from each <div>, you're instantly down to 20k or 30k elements.

Why not use a table? It looks like you're trying to build a table with divs.

Sounds like a tabular document to me. Why not use a table?

Note that even with a table you may have some trouble, but I suspect it will be faster.

You should also consider using a class for your styling, rather than doing it manually for each row.

That seems to be the exact reason tables were created in the first place - tabular style data. Any reason you aren't using tables already?

A large amount of tabular data renders fastest if you break it up into separate tbodies, and set table-layout to fixed. Keep all the style info out of the html and in a style element or linked stylesheet.

Is it necessary to show all 10,000 rows on the page at once? Perhaps you could look at implementing the ScrollSpy plugin developed by David Walsh. This will allow you to load a smaller initial record set then access more records when required.