This guy eloquently gives a great explanation of a solution.
So the first part is to calculate the visible view port. (This depends on how your elements are placed, absolute / fixed / default)
Second, you need a data structure to know which elements are visible in that area
Lastly, just replace the elements offscreen with a single, say
<div> element with calculated height
Great Linkedin demonstation of the problem and solution.
Mobile devices have less memory and CPU power compared to Desktop computers. If you render a very long list in the HTML, you run the risk of crashing the device. This makes it challenging to build large, interactive HTML5 apps for mobile devices. Native technologies provide UITableViewController to build long, infinite scrolling lists. UITableView contains reusable UITableViewCells which are optimized for memory, performance and responsiveness . For HTML5, we did not have any solution. So we set out to build one!
Technique #1: unloading images
Technique #2: hiding pages
Technique #3: removing pages
Technique #4: avoid scaling and box-shadow
Technique #5: minimizing DOM nodes