Huge number of Html table with images performance

i am building a page with repeater style display where there are hundreds of div containers and each consists of a table in them. Something like the following, and like 150+ of them in a page.

My question is how would the page perform? i am seeing a 1.5 min wait from sending the request to the page is fully loaded.

the responded documents size (in chrome developer tool) is 300KB ish images is around 1.5MB

however the time it takes to get the full documents back is开发者_JS百科 1.3 mins to load the images is 8 seconds.

<div style="width:100px; float:left;">
 <table>
  <tbody>
   <tr>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
   </tr>
   <tr>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
   </tr>
  </tbody>
 </table>
</div>

1. Define the image dimensions in the markup or CSS. If you don't there will be a page reflow every time a new image starts to display.

   • Replace your tables with DIVs. Tables add unnecessary elements to the DOM and the flow/dimsensions calculations are much more complicated than simple DIVs (or any block-level element)

   • Have the server generate+store thumbnails (anything less than the 1.5MB could be considered a thumbnail). When the user hovers, clicks, scrolls or takes other action... then you display the full resolution version.

   • Paginate. NO REASON to display 150 images per page (at least when the page first loads). If you are paginating already, lower your "limit" to something more manageable.

   • Use placeholders for all images that would appear "below the fold" (outside of the visible portion of the viewport). There are a number of JS libraries that will swap the SRC for another attribute and populate the SRC with a small placeholder. Then as you scroll images into view, the placeholders are swapped out for actual image URLs.

   jQuery: http://www.appelsiini.net/projects/lazyload

   YUI2: http://developer.yahoo.com/yui/imageloader/

   YUI3: http://developer.yahoo.com/yui/3/imageloader/

   • Load images in the idle time (I presume there is a reason you load 150 high-resolution images).

Learn from existing products:

http://images.google.com

is a good example. On pageload, there are a few dozen images. As you scroll down, it pre-fetches more before you see them in the viewport (in chunks of approx 50).

typically you don't want to do this type of thing because the user experience suffers, as you are finding.

Find a way to rework the workflow so that you are displaying less dom, and loading less things.

Also, maybe some things can be cached client side?

Each request has some overhead, so the performance of your page will suffer the more elements you have to load. The best solution would be to reduce the number of loads which is necessary, you might want to consider using css sprites to reduce the actual number of images which have to be loaded.

Turning keep-alive connections on in your web server may help, as it would reduce the number of connections which have to be negotiated. Also keep in mind that many systems impose a limit on the number of simultaneous connections which may be made to one host, so you may only be downloading two of these images at a time.

It may also be possible to re-engineer your application so this many images are not required, but we'd need to know more about the application. In general however, I would encourage you to cache these images, as trying to generate that many images on each page load is going to kill your server(s). I would also encourage you to use Firebug (the interface is a little easier than that of Chrome's tool [IMHO]), to get a better understanding of how much of the time is spent at each stage of the loading process.