Infinite Scrolling Large Datasets via Dynamic DOM Management
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing mechanisms for displaying large lists in computing environments, such as web pages, often lead to performance degradation and unresponsiveness due to the high resource consumption of maintaining a large Document Object Model (DOM), especially when scrolling through thousands or millions of items.
Innovation Solution
Implementing infinite scrolling by maintaining only a subset of list items in an actively laid out representation and using dummy placeholders to occupy space vacated by moved items, allowing for dynamic adjustment of placeholders to maintain a constant number of nodes in the DOM, thereby conserving resources and enhancing performance.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If all list items are maintained in the DOM for scrolling, then the list can be scrolled through, but resource consumption increases to the point where presentation becomes nonresponsive and slow
Solution Approach 1:
The patent extracts only the necessary portion of list items into the DOM at any given time. Instead of maintaining all items in the DOM, it loads and maintains only a subset of items (e.g., current viewport items plus a buffer), while representing other items through placeholders or lazy-loading mechanisms. This extraction approach enables scrolling functionality while significantly reducing resource consumption and improving responsiveness.
2Quantity of substance
If the DOM contains a large number of items, then the list can display comprehensive data, but processing becomes nonresponsive and may freeze
Solution Approach 1:
The patent segments the large list of items into manageable portions that are loaded into the DOM as needed. Instead of loading all items at once, it divides the list into segments (e.g., pages or batches) and loads only the relevant segments for the current viewing context. This segmentation maintains comprehensive data availability while ensuring processing remains responsive by limiting the active DOM size at any moment.
Solution Approach 2:
The patent implements preliminary action by pre-loading a buffer of items beyond the immediate viewport before the user actually needs to access them. This anticipatory loading strategy ensures that when the user scrolls to those items, they are already available in the DOM, eliminating rendering delays and maintaining responsiveness while managing DOM size efficiently.
3Quantity of substance
If more list items are added to the DOM, then the list becomes more comprehensive, but the system becomes less responsive and more resource-intensive
Solution Approach 1:
The patent applies dynamics by making the DOM content adaptive and flexible rather than static. The DOM dynamically adjusts its content based on user interaction (scrolling, viewing context) and device capabilities. Items are added to or removed from the DOM in response to user actions, and placeholders are used to maintain the visual structure while actual content is loaded on demand. This dynamic approach maintains data comprehensiveness while preserving system responsiveness.
Data Source
AI summary
Scrolling of a large number of list items can be supported without degradation in performance. Instead of continually moving list items into an actively laid out representation of the list items, list items can be moved in and out of the actively laid out representation as scrolling progresses. Management of the actively laid out representation can be performed transparently to a user to maintain the impression that the total list is present. List items can be grouped into page units, which can be managed to keep a constant number of page units present in the actively laid out representation. Further enhancements can be accomplished by storing some list items remotely.