3

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?

Ulhas Tuscano
  • 5,502
  • 14
  • 58
  • 89
  • do you have on every element extra javascript on events ? – Aristos Apr 05 '12 at 00:45
  • 2
    Maybe doing this technique on both sides, scrolling up and down? When you reached 100 items after scrolling down, remove or hide the top 50. You reload or show them again when you scroll up. – binarious Apr 05 '12 at 00:52
  • @Aristos Nop my all controls are readonly. no events binded – Ulhas Tuscano Apr 05 '12 at 00:55
  • @binarious: can you give me a simple idea how to achieve this inside a div. i will need to maintain scrollbar height too. thanx – Ulhas Tuscano Apr 05 '12 at 00:56
  • Based on binarious comment, if you are open towards HTML5 you can remove the elements from DOM and move them in the local storage, for later use. If the data is frequently changing remove them from the storage when the visitor exits the page. – Bakudan Apr 16 '12 at 07:22

1 Answers1

0
  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--; )
Bakudan
  • 19,134
  • 9
  • 53
  • 73