Performance with infinite scroll or a lot of dom elements?

Question

I have a question on a big # of dom elmenets and performance.

Let's say I have 6000 dom elements on a page and the number of the elements can be increased as a user interact with the page (user scrolls to create a new dom element) like twitter.

To improve the performance of the page, I can think of only two things.

1. set display to none to invisible items to avoid reflow
2. remove invisible items from the dom then re-add them as needed.

Are they any other ways of improving a page with a lot of dom elements?

Answer 1

We had to deal with a similar problem on FoldingText. As the document grew larger, more line elements and associated span elements were created. The browser engine just seemed to choke, and so a better solution needed to be found.

Here's what we did, may or may not be useful for your purposes:

Visualize the entire page as a long document, and the browser viewport as the lens for a specific part of the long document. You really only have to show the part within the lens.

So the first part is to calculate the visible view port. (This depends on how your elements are placed, absolute / fixed / default)

var top = document.scrollTop; var width = window.innerWidth; var height = window.innerHeight; 

Some more resources to find a more cross-browser based viewport:

Get the browser viewport dimensions with JavaScript

Cross-browser method for detecting the scrollTop of the browser window

Second, you need a data structure to know which elements are visible in that area

We already had a balanced binary search tree in place for text editing, so we extended it to manage line heights too, so this part for us was relatively easy. I don't think you'll need a complex data structure for managing your element heights; a simple array or object might do fine. Just make sure you can query heights and dimensions easily on it. Now, how would you get the height data for all your elements. A very simple (but computationally expensive for large amounts of elements!)

var boundingRect = element.getBoundingClientRect() 

I'm talking in terms of pure javascript, but if you're using jQuery $.offset, $.position, and methods listed here would be quite helpful.

Again, using a data structure is important only as a cache, but if you want, you could do it on the fly (though as I've stated these operations are expensive). Also, beware of changing css styles and calling these methods. These functions force redraw, so you'll see a performance issue.

Lastly, just replace the elements offscreen with a single, say <div> element with calculated height

• Now, you have heights for all the elements stored in your Data structure, query all the elements that lie before the visible viewport.

• Create a <div> with css height set (in pixels) to the sum of the element heights

• Mark it with a class name so that you know its a filler div
• Remove all the elements from the dom that this div covers
• insert this newly created div instead

Repeat for elements that lie after the visible viewport.

Look for scroll and resize events. On each scroll, you will need to go back to your data structure, remove the filler divs, create elements that were previously removed from screen, and accordingly add new filler divs.

:) It's a long, complex method, but for large documents it increased our performance by a large margin.

tl;dr

I'm not sure I explained it properly, but the gist of this method is:

• Know the vertical dimensions of your elements
• Know the scrolled view port
• Represent all off-screen elements with a single div (height equal to the sum of all element heights it covers for)
• You will need two divs in total at any given time, one for elements above the visible viewport, one for elements below.
• Keep track of the view port by listening for scroll and resize events. Recreate the divs and visible elements accordingly

Hope this helps.