Canvas Layer DOM Rendering for Rich Data GUI Scroll Lag
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Rich data GUIs, such as data boards and tables, experience significant lag and 'stickiness' during scrolling due to low frame rates, which fail to match the screen's refresh rate, leading to a suboptimal user experience.
Innovation Solution
The system generates a canvas layer with graphical representations of document object models (DOMs) and transforms them into corresponding DOMs at a rate matching the screen's refresh rate, allowing for efficient presentation and interaction, even during scrolling, by determining the duration required to generate graphical representations and adjusting the display accordingly.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If the GUI renders all DOMs in detail, then the information completeness is improved, but the frame rate decreases causing stickiness
Solution Approach 1:
The patent applies local quality by rendering DOMs at different levels of detail based on their position and importance. Visible DOMs in the current view are rendered in full detail, while DOMs outside the visible area or less important ones are rendered at lower detail or omitted entirely. This selective rendering approach maintains information completeness for relevant data while preserving frame rate by reducing the overall rendering burden.
Solution Approach 2:
The patent segments the board into multiple DOM elements and processes them independently. By dividing the large data board into discrete DOM segments, the system can selectively render only those segments that are currently visible or likely to be viewed, rather than rendering all DOMs simultaneously. This segmentation enables the GUI to maintain high frame rates while preserving access to complete information when needed.
2Loss of information
If the GUI loads all data at once, then the data availability is improved, but the scrolling performance deteriorates
Solution Approach 1:
The patent implements preliminary action by pre-loading and pre-rendering DOMs that are likely to be viewed based on the user's current position and scrolling behavior. The system anticipates which DOMs will become visible and prepares them in advance, so when the user scrolls to those areas, the data is already ready for immediate display. This maintains data availability while improving scrolling performance by avoiding last-minute rendering delays.
Solution Approach 2:
The patent extracts and separates the data storage function from the data rendering function. All data is loaded and stored in memory for complete availability, but only the necessary portions are extracted and rendered to the display at any given time. This separation allows the system to maintain full data availability in the background while keeping the rendering process lightweight and responsive to user scrolling actions.
3Ease of operation
If the frame rate matches screen refresh rate, then the user experience is improved, but the processing load increases
Solution Approach 1:
The patent implements periodic action by synchronizing the rendering of DOMs with the screen's refresh rate. Instead of continuously rendering all DOMs at maximum detail, the system updates the display periodically at intervals that match the screen refresh cycle (e.g., 60 times per second). This periodic rendering maintains smooth user experience and prevents stickiness while reducing the average processing load compared to continuous high-detail rendering of all elements.
Data Source
AI summary
Systems, methods, and computer-readable media for presenting board graphics are disclosed. The systems and methods may involve receiving a request to present, on a display, a board having a plurality of document object models (DOMs) arranged in rows and columns. A canvas layer of the board may be generated, including a graphical representation of each of the plurality of DOMs. A library of locations on the canvas layer may be generated, storing an arrangement of the plurality of DOMs. Disclosed embodiments may present, on the display, a portion of the canvas layer, where the presented portion of the canvas layer is be determined by a size of the display. The graphical representation of each of the plurality of DOMs presented on the display may be transformed into a corresponding DOM of the plurality of DOMs.