Lazy loading of HTML markup

My organisation are an ecommerce company and have a numberv of pages displaying a long list of products, some pages can have 20 products while others may have up 开发者_如何学JAVAto 100! - Don't ask me why!

I have been tasked with improving the load times of these pages, profiling shows that the majority of the load time is from the markup - there is too much of it!! Due to the amount of info the business must show the markup cannot really be reduced.

This leads me to looking at alternatives and one would be lazy loading of the product markup as the user scrolls down the screen (we currently use this technique for product images).

Does anyone have any experience with doing such a thing that they could share? - the worry is that this could impact performance within the page

Any alternate methods would be listened to as well

Look forward to any opinions

You can dynamically load content while scrolling.

You can load all key data in your barebones HTML and then add necessary markup flourish with Javascript.

Alternatively, you could send a compact XML document and apply an XSLT transform on client side if client accepts it (see 'Accept:' header).

One thing to look at is adding in compression to what the browser is sending. This will substantially reduce the page payload.

As others have mentioned, loading page content can cause a number of problems, especially for users with accessibility needs (which is a much larger percentage than most people think)

I used the following aproach to hide the makeup time to render/create the content (android, jq and jq-mobile)

a) The content is generated in the background. Always small pieces are created (duration 20-30ms) and insert into the dom. After around 50ms (setTimeout) the next piece is created and inserted into the dom

b) Android specific: I noticed that the first selection of an DOM element (e.g. $(‘#xyz’) )takes relatively long (approx 10ms) . If the element is accessed the second time, it takes only 1ms (Samsung S3). Hope this helps