We had to face a similar problem on FoldingText . As the document grew larger, more line elements and related span elements were created. The browser mechanism was simply suffocating, and therefore it was necessary to find the best solution.
Here's what we have done, whether or not it can be useful for your purposes:
Render the entire page as a long document and browser window as a lens for a specific part of a long document. You really need to show only part of the lens.
So, the first part is designed to calculate the visible port. (It depends on how your elements are placed, absolute / fixed / default)
var top = document.scrollTop; var width = window.innerWidth; var height = window.innerHeight;
A few more resources to find a more viewport based on multiple browsers:
Get browser viewport sizes using JavaScript
Cross browser scrollTop detection method of browser window
Secondly, you need a data structure to know which elements are visible in this area.
We already have a balanced binary search tree for editing text, so we also expanded it to control line heights, so this part was relatively simple for us. I do not think that you will need a complex data structure to control the heights of the elements; a simple array or object may work fine. Just make sure you can easily request heights and sizes. Now, how would you get height data for all of your elements. Very simple (but computationally expensive for lots of items!)
var boundingRect = element.getBoundingClientRect()
I speak in terms of pure javascript, but if you use jQuery $.offset , $.position and the methods listed here would be very helpful.
Again, using a data structure is only important as a cache, but if you want, you can do it on the fly (although, as I said, these operations are expensive). Also, beware of changing CSS styles and calling these methods. These functions force redraw, so you will see a performance problem.
Finally, just replace the elements on the screen with a single, like a <div> with a calculated height
Now that you have the heights for all the elements stored in your data structure, request all the elements that lie before the visible viewport.
Create a <div> with a given css height (in pixels) to the sum of the element heights
- Mark it with the class name so you know its div filler
- Remove all elements from dom so this div closes
- insert this newly created div instead
Repeat for elements that lie after the visible viewport.
Look for scroll and resize events. In each scroll, you will need to return to your data structure, remove the placeholders, create items that were previously removed from the screen, and add new placeholders.
:) This is a long, complicated method, but for large documents it increased our productivity by a large margin.
TL; DR
I'm not sure I explained it correctly, but the gist of this method is:
- Know the vertical dimensions of your elements.
- Know the scroll view port
- Represent all elements off-screen with a single div (height equal to the sum of all the heights of the elements that it covers)
- At any given time, you will need two divs, one for the elements above the visible viewport, one for the elements below.
- Keep an eye on the viewing port while listening to scroll and resize events. Re-create divs and visible elements.
Hope this helps.