HTML: How to make scrolling work faster here

I have developed an application about product and their detials. In that application, at a page, it loads almost 10,000 product details on single page only.

I have attached a raw screenshot here :

http://img51.imageshack.us/img51/4430/uploadm.jpg

As the first step, the page loads an empty structure with no product detials in it. Then using javascript BigPipe, it adds details of products in the structure.

The Product Detail Structure :

<div class="product_disp" 
onclick="return clickEffec开发者_开发技巧t(this,event);"   
onmousemove="return show_img_trail('product_details');"     
onmouseout="return hide_img_trail(this);" align="left" >    
<img src="pic.jpg" class="prodcuts_img"/>   
<span style="overflow:hidden;" align="left"> <b> Product_3 </b> <br/> 
id : 8146 <br /></span> 
<span style="padding:0px;width: 100%;" align="right">Available </span> 
</div> 

But when i try to scroll down the scroller for product_details <div> , it scrolls slowly.

what can i do to make scroll like normal?

i dont know what exactly making it slower.

There are a lot of options, and they might not all be applicable, but here are some:

1. Don't load 10,000 items on a single page, instead opting to load maybe 100 and then allowing users to page through (either using a traditional page selector, or with a "load more" link when they hit the bottom, or even autoloading more as they scroll to the bottom).
2. Move JavaScript event bindings for any events that bubble from the individual elements to the parent, then handle them there. To do this easily, use jQuery.live('event', function(){ ... });.
3. Use a stylesheet instead of putting styles inline. And make sure that your selectors are high-performance (don't over-qualify them, prefer IDs and a class to adding long chains of element names, etc.).
4. Generally speaking (it doesn't appear you're doing this) avoid CSS3 effects like drop shadows until they become more performance-friendly.
5. Make sure you're not executing excessive JavaScript queries (cough, using onscroll or using onmouseover for every element on the page, cough).

Without seeing what you're doing in your JavaScript and what your CSS looks like, it's hard to give you more specific details about your situation, though.

The best idea is to give a full test page or URL if you want specific answer for your case.

• You can keep 10 000 products in memory (as a Javascript object) without displaying all of them as a part of your page. It makes layout computation much faster. Try listing in groups of 10-20-30 items or adding/removing them on scroll event.

• Use event delegation to improve performance (a root element handles all the events)

  function normalize(e) {
      e = e || window.event;
      e.target || (e.target = e.srcElement);
      return e;
  }
  
  var root = document.getElementById("root");
  
  root.onclick = function(e) {
      e = normalize(e);
      return clickEffect(e.target, e);
  }
  
  root.onmouseout = function(e) {
      e = normalize(e);
      return hide_img_trail(e.target);
  }
  

• Use mouseover instead of mousemove (delegated as well)

  root.onmouseover = function(e) {
      return show_img_trail('product_details');
  }
  

• Separate presentation (CSS) from markup (HTML). It won't affect performance, but makes your code readable and maintainable.

I ran across similar problem few days a go! What kind of other creative interface we possible can provide in there? Currently i am using event delegation on my page but i am quite curious about other possible interfaces in such scenarios. Pagination or load more are not an options in my case so what else i can do there?