Web Scroll Optimization via DOM Tree Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
User terminal devices face significant memory and processing capacity challenges when loading and scrolling large web documents, particularly on mobile devices, due to continuous loading of content beyond the display screen, leading to performance delays.
Innovation Solution
A user terminal device architecture that converts web documents into DOM tree data and render tree data, where non-output nodes are optimized as void nodes, stored in video output memory, and scroll mark nodes are inserted to facilitate efficient scrolling by reducing memory load and improving processing speed.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Area of stationary object
If the user terminal device continuously loads web document content exceeding the display screen, then the web document can be fully displayed, but the memory capacity and data processing capability are overwhelmed
Solution Approach 1:
The web document is divided into multiple segments corresponding to displayable regions. Instead of loading the entire document at once, only the current viewport segment and necessary adjacent segments are loaded into memory, while other segments remain on storage medium. This segmentation allows full document display capability while maintaining manageable memory usage.
Solution Approach 2:
The necessary web document segments are pre-loaded into memory before they are actually needed for display. When scrolling is detected or anticipated, the next required segments are already prepared in memory, enabling smooth transitions without sudden memory allocation bursts. This preliminary action reduces peak memory requirements and improves scrolling performance.
2Area of stationary object
If the user terminal device continuously loads web document content exceeding the display screen, then the web document can be fully displayed, but the processing speed decreases due to continuous data loading
Solution Approach 1:
Web document segments are pre-processed and pre-loaded into memory in advance of when they are needed for display. This preliminary action ensures that when the user scrolls, the data is already ready in fast memory rather than being loaded from slow storage during the scroll operation, thereby maintaining high scrolling speed.
Solution Approach 2:
The web document is segmented into displayable regions that can be independently loaded and rendered. This segmentation allows the system to process and display only the necessary portions at any given time, reducing the overall processing burden and improving scrolling responsiveness compared to processing the entire document at once.
3Speed
If all nodes in the DOM tree are stored in high-speed video output memory, then display performance is improved, but memory capacity is excessively consumed
Solution Approach 1:
Different storage media are assigned to different portions of the web document based on their display requirements. Nodes that are currently visible or near the viewport are stored in high-speed video output memory for immediate rendering, while nodes that are far from the viewport are stored in slower, lower-capacity memory. This local quality differentiation optimizes both display performance and memory utilization.
Solution Approach 2:
The DOM tree nodes are segmented into different storage locations based on their distance from the current viewport position. This segmentation strategy places only the necessary nodes in high-speed memory, reducing the memory capacity burden while maintaining display performance for visible content.
4Loss of information
If the web application process loads the entire web document at once, then complete content is available, but the initial loading time and memory consumption increase significantly
Solution Approach 1:
The web document is segmented into multiple smaller units that can be loaded incrementally. Instead of requiring the entire document to be loaded before any content becomes available, segments are loaded in sequence or in parallel, allowing the user to view content as it becomes available while the rest continues to load in the background.
Solution Approach 2:
Critical or frequently accessed segments of the web document are pre-loaded into memory before the user actually needs them. This preliminary loading action reduces the perceived loading time for visible content while maintaining availability of complete document content through background loading of remaining segments.
Data Source
AI summary
Disclosed is a user terminal device and a scroll method supporting high-speed web scroll of a web document. According to an embodiment of the present invention, there is provided a web scroll system including a user terminal device, the system including: a web document providing apparatus for storing the web document configured to include HyperText Markup Language (HTML) and providing the web document to the user terminal device according to connection of the user terminal device; and the user terminal device having a processor for connecting to the web document providing apparatus and receiving the web document, parsing the provided web document and converting into data having a structure formed in a shape of a tree, loading data that will be output on a display means among the converted data on video output memory as display output tree data, and providing the converted data to a web application process.