Virtualized Scroll List Rendering with Buffer Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional techniques for rendering large or long scrollable lists overload processing hardware, leading to poor user performance due to the processing of non-displayed items, resulting in slow rendering and high resource usage.
Innovation Solution
Implementing virtualized rendering techniques that group items into pages and buffers, rendering only the currently visible items, and using empty spacer elements to maintain the appearance of a complete list, thereby reducing the number of DOM nodes and processing load.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If conventional rendering techniques are used to display large scrollable lists, then all items in the list are processed and rendered, but processing hardware becomes overloaded and user performance deteriorates
Solution Approach 1:
The patent divides the large scrollable list into multiple DOM fragment segments. Only the visible portion (current buffer) is rendered as actual DOM nodes, while other portions are stored as template fragments. This segmentation allows the rendering process to focus only on the visible items, dramatically reducing processing load while maintaining the appearance of a complete list through virtual scrolling techniques.
2Reliability
If all items in a scrollable list are rendered, then the complete list is displayed, but the number of DOM nodes increases and processing resources are consumed
Solution Approach 1:
The patent creates template fragments that represent portions of the list that are not currently visible. These templates contain the structural information and can be efficiently cloned or rendered only when needed. This copying approach allows the system to maintain a complete logical representation of the list while minimizing the number of actual DOM nodes in memory at any given time.
3Ease of operation
If rendering processes process items in anticipation of being displayed, then items are ready for display, but processing hardware is overloaded with non-displayed items
Solution Approach 1:
The patent performs preliminary actions only for the visible buffer and immediately adjacent buffers. The current buffer is fully rendered and ready for display, while adjacent buffers are prepared as templates for quick switching during scrolling. This limited preliminary action approach ensures items are ready for display when needed while avoiding the energy waste of pre-processing the entire list.
Data Source
AI summary
Provided are techniques for displaying, on a display, a scrollable list of items. In an example, items to be displayed are grouped in pages in buffers. Items to be rendered are selected to be rendered by a scroll input. Items in a current buffer are rendered. Items in no more than one buffer are rendered at a time. An actual height, in pixels, of each of the pages grouped in the current buffer is calculated and the result is stored. A respective estimate of a height, in pixels, of pages grouped in buffers other than the current buffer is determined. A total height of all pages is calculated from the calculated actual height or estimated height of each respective page. A scroll bar's slider is rendered, with the scroll bar slider's size based on the total height.