I have implemented Infinite scrolling(i.e Load records when the scrollbar reaches the bottom of the div). It works fine but after loading too many records on the page, the page becomes too heavy & causes slow rendering. Actually, I am using this technique as a replacement of a gridview so, how do i manage heavy DOM in this scenario?

• javascript
• jquery
• asp.net
• html

1. Reduce the DOM elements to minimum.
2. Minimize the number of wrappers.
3. Minimize the acces to the DOM elements, which includes ( yahoo suggestions ):
   • Cache references to accessed elements
   • Update nodes "offline" and then add them to the tree
   • Avoid fixing layout with JavaScript
4. If there is any computation which can be reduced, like getting the number of rows ( don't calculate it everytime, just add the number of the new rows to the current ), cache it ( memoization ^wikipedia )

If you have any type of iteration over a collection of DOM elements and you don't use jQuery to iterate, use this (suggestions by JavaScript patterns):

for (var iteration = 0, limit = lengthOfElements; iteration++; iteration < limit)

or

for (var i = myarray.length; i--; )

Maybe doing this technique on both sides, scrolling up and down? When you reached 100 items after scrolling down, remove the top 50. You reload or show them again when you scroll up.

Idea of how to achieve this:

$('.entry:lt(50)').remove(); // remove the top 50 .entry elements

$('.entry:lt(' + (current_entries - 50) + ')').remove();

Reload them serverside when scrolling to the top of the div. Hope that helps.