How to manage DOM elements

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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--; )

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0