Question

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 clickEffect(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.

Answer 1

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.