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.