Virtual rolling optimization method and system based on behavior prediction
By dynamically adjusting the buffer and using intelligent node recycling strategies, the problems of blank screens and resource waste in virtual scrolling technology are solved, achieving more efficient scrolling performance and resource utilization.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-10
- Publication Date
- 2026-04-07
AI Technical Summary
Existing virtual scrolling technology cannot cover the user's instantaneous scrolling area during fast scrolling, resulting in a blank screen. Fixed buffer strategies waste resources severely during low-speed scrolling, and node reclamation strategies lack predictability, leading to performance degradation.
By constructing a scrolling behavior prediction model, dynamically adjusting the buffer range, and combining a two-layer buffer rendering mechanism and an intelligent node recycling strategy, the rendering and recycling process of DOM nodes is optimized.
It effectively eliminates white screen issues, improves scrolling smoothness, reduces resource consumption, increases node reuse rate, and enhances performance.
Smart Images
Figure CN121808162A_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of front-end development technology, and in particular relates to a virtual scrolling optimization method and system based on behavior prediction. Background Technology
[0002] The statements in this section are merely background information related to the present invention and do not necessarily constitute prior art.
[0003] Virtual scrolling is a key optimization technique in modern web front-end development for efficiently rendering large-scale data lists. Its core principle is to dynamically calculate the user's visible area and render only the Document Object Model (DOM) nodes within that area, rather than rendering the entire dataset at once. This significantly reduces browser memory usage and rendering load, thus improving page performance.
[0004] Currently, there are several mature virtual scrolling implementation solutions in the industry, such as the React-Window library based on React and the Vue Virtual Scroller component based on Vue. These mainstream solutions generally adopt a fixed buffer strategy. This strategy pre-renders a fixed number of nodes (i.e., a buffer) above and below the visible area, aiming to quickly display the pre-set content in the buffer when the user starts scrolling, thereby improving the scrolling experience. However, the applicant has found that this fixed buffer strategy has inherent limitations and is difficult to adapt to complex and varied user scrolling behaviors, specifically manifested in the following defects and shortcomings: (1) When a user scrolls quickly, the buffer's range is fixed and cannot cover the distant areas the user might reach during the instantaneous scrolling. This results in nodes within the visible area failing to render in time during scrolling, causing a "white screen" phenomenon that severely impacts the user experience. Simultaneously, to handle the aforementioned jump-like access, the rendering engine needs to create and insert a large number of DOM nodes instantaneously, blocking the browser's rendering thread, leading to sluggish page response, decreased frame rate, and stuttering.
[0005] (2) When the user scrolls slowly or browses at rest, the fixed-size buffer still maintains pre-rendered redundant nodes. These nodes are not actually browsed by the user, but they continue to occupy memory and computing resources, causing unnecessary waste of resources and failing to achieve optimal resource utilization.
[0006] (3) During scrolling, existing solutions typically do not fully consider the user's scrolling direction and behavior trends when recycling DOM nodes that have moved out of the visible area. This results in a lack of predictability in the recycling strategy, which may frequently recycle nodes that are about to be reused, thereby triggering unnecessary node reconstruction operations, reducing node reuse efficiency, and increasing performance overhead. Summary of the Invention
[0007] To overcome the shortcomings of the prior art, this invention provides a virtual scrolling optimization method and system based on behavior prediction. By constructing a scrolling behavior prediction model, a two-layer buffer rendering mechanism, and an intelligent node recycling strategy, it aims to eliminate white screen flicker, improve scrolling smoothness, reduce resource consumption, and increase node reuse rate.
[0008] To achieve the above objectives, one or more embodiments of the present invention provide the following technical solutions: The first aspect of this invention provides a virtual scrolling optimization method based on behavior prediction; A virtual scrolling optimization method based on behavior prediction includes: Step S1: Initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. Step S2: Listen for the scroll event of the container element that carries the virtual scroll list; Step S3: Based on the detected scrolling events, calculate the predicted scrolling displacement within a predetermined time window in the future using a scrolling behavior prediction model to determine the range of the dynamic buffer. Step S4: Based on the predicted scroll displacement, construct a two-layer buffer rendering mechanism and dynamically calculate the target rendering area; Step S5: Reuse and recycle DOM nodes in the target rendering area based on the intelligent node recycling strategy and node pool; Step S6: By comparing the target rendering area with the old rendering area, the DOM nodes are rendered and updated. Step S7: Perform subsequent processing based on user behavior. If the user continues to scroll, return to step S2 and repeat the above process; if the user closes the viewport, the process ends.
[0009] As a further technical solution, the view is initialized and displayed, the target list data is loaded, and the node pool and preset configuration parameters are initialized simultaneously, including: Initialize and display the view, create a container element, and create a placeholder element inside the container element; Load the target list data, store the complete list data in memory, but do not render the DOM nodes; Initialize the node pool by creating an empty data structure for caching and reusing DOM nodes that will be recycled later; Initialize the preset configuration parameters, which include at least: estimated item height, maximum node pool capacity, prediction time window, and basic buffer size.
[0010] As a further technical solution, the monitoring of scroll events of the container element carrying the virtual scroll list includes: Retrieve the container element that holds the virtual scrolling list; Register an event handler function for the scroll event of the container element by registering the event; The event handling function is throttled to keep its execution frequency synchronized with the browser's rendering frame rate.
[0011] As a further technical solution, the predicted rolling displacement within a predetermined time window is calculated using a rolling behavior prediction model, including: Calculate the current instantaneous scroll speed and instantaneous scroll acceleration based on continuously monitored scroll events; The predicted rolling displacement is calculated using kinematic formulas based on the instantaneous rolling speed, the instantaneous rolling acceleration, and the predetermined time window.
[0012] As a further technical solution, the target rendering area includes a core visible area and a dynamic buffer; wherein, the core visible area is the index range of the area that the user can currently see, calculated based on the scroll distance of the current viewport from the top and the height of the visible area; The dynamic buffer is an area that extends above and below the core view area and is dynamically adjusted based on the calculated dynamic absolute value of the scrolling speed.
[0013] As a further technical solution, DOM nodes in the target rendering area are reused and recycled based on an intelligent node recycling strategy and a node pool, including: When a new list item needs to be rendered, a reusable node is first obtained from the node pool based on the unique identifier of the list item. If no matching node is found, a new DOM node is created. When the node pool capacity exceeds the preset maximum node pool capacity, nodes that are opposite to the current scrolling direction are recycled first. If the scrolling directions are the same or cannot be distinguished, the node with the earliest last used timestamp is recycled.
[0014] As a further technical solution, the rendering and updating of DOM nodes are performed by comparing the target rendering area with the old rendering area, including: By comparing the old rendering area and the target rendering area, we obtain two sets: the index set for newly added rendering and the index set for removed rendering. Iterate through the newly added collection, request nodes from the node pool, and insert them into the DOM tree; Iterate through the removal collection, remove nodes from the DOM tree and return them to the node pool; update the height of the placeholder container, calibrate the position of the rendered nodes using absolute positioning, and save the current rendering area as the old rendering area for the next time.
[0015] A second aspect of the present invention provides a virtual scrolling optimization system based on behavior prediction.
[0016] A virtual scrolling optimization system based on behavior prediction includes: The initialization module is configured to: initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. The scroll event listener module is configured to listen for scroll events of the container element that hosts the virtual scroll list; The scroll prediction module is configured to: calculate the predicted scroll displacement within a predetermined time window based on the monitored scroll events using a scroll behavior prediction model, in order to determine the range of the dynamic buffer. The rendering area calculation module is configured to: construct a two-layer buffer rendering mechanism based on the predicted scroll displacement, and dynamically calculate the target rendering area; The node pool management module is configured to reuse and recycle DOM nodes in the target rendering area based on an intelligent node recycling strategy and the node pool. The rendering execution module is configured to: render and update DOM nodes by comparing the target rendering area with the old rendering area; perform subsequent processing based on user behavior; if the user continues to scroll, return to the scroll event listener module to repeat the above process; if the user closes the viewport, the process ends.
[0017] A third aspect of the present invention provides a computer-readable storage medium having a program stored thereon that, when executed by a processor, implements the steps of a behavior prediction-based virtual scrolling optimization method as described in the first aspect of the present invention.
[0018] A fourth aspect of the present invention provides an electronic device including a memory, a processor, and a program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of a behavior prediction-based virtual scrolling optimization method as described in the first aspect of the present invention.
[0019] The above one or more technical solutions have the following beneficial effects: This invention dynamically predicts the user's scrolling intention and range using a scrolling behavior prediction model, and constructs a dynamic buffer accordingly, ensuring that the content to be displayed in the visible area is rendered in advance. This fundamentally solves the "white screen" problem caused by insufficient coverage during rapid scrolling with a fixed buffer strategy. Furthermore, by setting up a dynamic buffer mechanism, it avoids rendering redundant nodes during slow scrolling, reducing the browser's layout and rendering burden. By dynamically linking the buffer size to scrolling speed, it overcomes the resource rigidity problem of the fixed buffer strategy. During static or slow browsing, the system automatically reduces the buffer size to release memory; only when rapid scrolling is detected does it intelligently expand the buffer to prevent a white screen.
[0020] This invention introduces a smart node reclamation strategy that combines directional priority with Least Recently Used (LRU). This strategy accurately determines which removed nodes are least likely to be used again in the short term (i.e., nodes in the opposite scrolling direction or those that have not been accessed for the longest time) and prioritizes their reclamation or destruction. This ensures that the "inventory" in the node pool remains highly available, significantly improving the reuse rate of DOM nodes and greatly reducing the frequency of the expensive operation of directly creating and destroying DOM nodes, further consolidating the performance improvement.
[0021] Advantages of additional aspects of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description
[0022] The accompanying drawings, which form part of this invention, are used to provide a further understanding of the invention. The illustrative embodiments of the invention and their descriptions are used to explain the invention and do not constitute an improper limitation of the invention.
[0023] Figure 1 This is a flowchart of the method in the first embodiment.
[0024] Figure 2 This is a system structure diagram of the second embodiment. Detailed Implementation
[0025] It should be noted that the following detailed descriptions are exemplary and intended to provide further illustration of the invention. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains.
[0026] It should be noted that the terminology used herein is for the purpose of describing particular implementations only and is not intended to limit the exemplary implementations of the present invention.
[0027] Where there is no conflict, the embodiments and features in the embodiments of the present invention can be combined with each other.
[0028] Example 1 This embodiment discloses a virtual scrolling optimization method based on behavior prediction.
[0029] like Figure 1 As shown, a virtual scrolling optimization method based on behavior prediction includes: Step S1: Initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. Step S2: Listen for the scroll event of the container element that carries the virtual scroll list; Step S3: Based on the detected scrolling events, calculate the predicted scrolling displacement within a predetermined time window in the future using a scrolling behavior prediction model to determine the range of the dynamic buffer. Step S4: Based on the predicted scroll displacement, construct a two-layer buffer rendering mechanism and dynamically calculate the target rendering area; Step S5: Reuse and recycle DOM nodes in the target rendering area based on the intelligent node recycling strategy and node pool; Step S6: By comparing the target rendering area with the old rendering area, the DOM nodes are rendered and updated. Step S7: Perform subsequent processing based on user behavior. If the user continues to scroll, return to step S2 and repeat the above process; if the user closes the viewport, the process ends.
[0030] Specifically, it also includes the following: Step S1: Initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters.
[0031] S101: Initialize and display the view. Create a container element with a fixed height and scrollbar, insert it into the specified position on the page using JavaScript or a front-end framework's (such as React or Vue) rendering function, and define its visual and scrolling characteristics. Then, inside the container element, create a placeholder element whose height is set to the product of the total number of list items and the estimated height of each item, to maintain the correct scrollbar size.
[0032] S102: Load the target list data and store the complete dataset in a JavaScript array or a specific state management variable. Each data item should contain a unique identifier for subsequent node comparison and reuse. At this stage, the data is only kept in memory; no DOM node creation or rendering is performed. This ensures high efficiency in the initial load, allowing the page to respond quickly even with tens or hundreds of thousands of data points.
[0033] S103: Initialize the node pool, creating an empty data structure for caching and reusing DOM nodes that will be recycled later; S104: Initialize preset configuration parameters, which include: estimated item height, maximum node pool capacity, prediction time window, and basic buffer size.
[0034] Step S2: Listen for the scroll event of the container element that carries the virtual scroll list.
[0035] We listen for scroll events of the container element hosting the virtual scroll list by registering an event listener (addEventListener). At the same time, to balance response speed and performance, we throttle this event to ensure that the scroll event processing frequency is synchronized with the browser's rendering frame rate, avoiding excessively frequent calculations that could cause page stuttering.
[0036] Step S3: Based on the monitored scrolling events, calculate the predicted scrolling displacement within a predetermined time window in the future using a scrolling behavior prediction model to determine the range of the dynamic buffer.
[0037] To obtain the instantaneous scroll speed and instantaneous scroll acceleration of the current scroll event, use the formula... Calculate the predicted rolling displacement within the predetermined time window, where For rolling displacement, For instantaneous acceleration, To maintain the rolling speed, This represents the prediction time window. The above formula predicts the scroll displacement within the next t milliseconds, ensuring that the buffer dynamically covers areas the user might quickly scroll into.
[0038] Step S4: Based on the predicted scroll displacement, a two-layer buffer rendering mechanism is constructed to dynamically calculate the target rendering area. The target rendering area includes the core viewport and a dynamic buffer. The core viewport is the index range of the area currently visible to the user, calculated based on the scroll distance from the top of the current viewport (scrollTop) and the viewport height (clientHeight).
[0039] The dynamic buffer is an area extending above and below the core visible area, and it is dynamically adjusted based on the calculated dynamic absolute value of the scrolling speed. Specifically, the buffer size is no longer fixed, but is dynamically adjusted based on the calculated dynamic absolute value of the scrolling speed. The buffer is a base buffer size; when the user scrolls quickly, the buffer increases significantly to preload more data and prevent a blank screen; when scrolling slowly or at rest, the buffer decreases to save memory.
[0040] Step S5: Based on the intelligent node recycling strategy and node pool, the DOM nodes of the target rendering area are reused and recycled.
[0041] During node reuse, when a new item needs to be rendered during the rendering process, the system first checks if a reusable node exists in the node pool based on the unique identifier of the data item. If it does, it is retrieved and its content and position are updated directly; otherwise, a new DOM node is created.
[0042] In this embodiment, the intelligent recycling strategy adopts directional priority and secondary priority (LRU). When the node pool size exceeds the maximum capacity, the recycling mechanism is triggered.
[0043] The directional priority prioritizes reclaiming nodes in the opposite direction to the current scrolling direction. For example, if the user is scrolling down (speed > 0), cached nodes with an index less than `visibleStart` (i.e., nodes that might only be used when scrolling up) are prioritized for reclamation, as these nodes have the lowest probability of being used again in the short term. The secondary priority, when the directions are the same or directional priorities are indistinguishable, uses the least recently used principle to reclaim the least recently accessed node (i.e., the node with the earliest last used timestamp). Each node in the pool records its index position, unique identifier, and last used timestamp for the above strategy to make judgments.
[0044] Step S6: By comparing the target rendering area with the old rendering area, the DOM nodes are rendered and updated.
[0045] Comparing the old rendering area and the target rendering area yields two sets: a set of newly added rendering indices and a set of removed rendering indices. Traversing the newly added set, for each index, a corresponding node is first requested from the node pool management module. If a reusable node exists in the pool, its data and position are retrieved and updated; otherwise, a new DOM node is created and inserted into the correct position in the DOM tree. Traversing the removed set, for each index, its corresponding DOM node is found and removed from the DOM tree, but not immediately destroyed. Instead, it (along with its index, key, and information) is returned to the node pool management module for later reuse. The placeholder container is updated by adjusting its height to equal the product of the total number of list items and the estimated height of each item, maintaining the correct scrollbar height and scrolling experience. Simultaneously, all rendered nodes are precisely positioned using absolute positioning to ensure they appear in the correct position within the viewport.
[0046] Step S7: Perform subsequent processing based on user behavior. If the user continues to perform scrolling operations, return to step S2 and repeat the above process; if the user closes the viewport, destroy the node pool and related resources, and the process ends.
[0047] Example 2 This embodiment discloses a virtual scrolling optimization system based on behavior prediction; like Figure 2 As shown, a virtual scrolling optimization system based on behavior prediction includes: The initialization module is configured to: initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. The scroll event listener module is configured to listen for scroll events of the container element that hosts the virtual scroll list; The scroll prediction module is configured to: calculate the predicted scroll displacement within a predetermined time window based on the monitored scroll events using a scroll behavior prediction model, in order to determine the range of the dynamic buffer. The rendering area calculation module is configured to: construct a two-layer buffer rendering mechanism based on the predicted scroll displacement, and dynamically calculate the target rendering area; The node pool management module is configured to reuse and recycle DOM nodes in the target rendering area based on an intelligent node recycling strategy and the node pool. The rendering execution module is configured to: render and update DOM nodes by comparing the target rendering area with the old rendering area; perform subsequent processing based on user behavior; if the user continues to scroll, return to the scroll event listener module to repeat the above process; if the user closes the viewport, the process ends. Example 3 The purpose of this embodiment is to provide a computer-readable storage medium.
[0048] A computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the steps of a behavior prediction-based virtual scrolling optimization method as described in Example 1.
[0049] Example 4 The purpose of this embodiment is to provide an electronic device.
[0050] An electronic device includes a memory, a processor, and a program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps in a behavior prediction-based virtual scrolling optimization method as described in Embodiment 1.
[0051] The steps and methods involved in the apparatuses of Embodiments 2, 3, and 4 above correspond to those in Embodiment 1. For specific implementation details, please refer to the relevant description section of Embodiment 1. The term "computer-readable storage medium" should be understood as a single medium or multiple media including one or more instruction sets; it should also be understood as including any medium capable of storing, encoding, or carrying an instruction set for execution by a processor and enabling the processor to perform any of the methods in this invention.
[0052] Those skilled in the art will understand that the modules or steps of the present invention described above can be implemented using general-purpose computer devices. Optionally, they can be implemented using computer-executable program code, thereby allowing them to be stored in a storage device for execution by a computer device, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. The present invention is not limited to any particular combination of hardware and software.
[0053] While the specific embodiments of the present invention have been described above in conjunction with the accompanying drawings, this is not intended to limit the scope of protection of the present invention. Those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art without creative effort based on the technical solutions of the present invention are still within the scope of protection of the present invention.
Claims
1. A virtual scrolling optimization method based on behavior prediction, characterized in that, include: Step S1: Initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. Step S2: Listen for the scroll event of the container element that carries the virtual scroll list; Step S3: Based on the detected scrolling events, calculate the predicted scrolling displacement within a predetermined time window in the future using a scrolling behavior prediction model to determine the range of the dynamic buffer. Step S4: Based on the predicted scroll displacement, construct a two-layer buffer rendering mechanism and dynamically calculate the target rendering area; Step S5: Reuse and recycle DOM nodes in the target rendering area based on the intelligent node recycling strategy and node pool; Step S6: By comparing the target rendering area with the old rendering area, the DOM nodes are rendered and updated. Step S7: Perform subsequent processing based on user behavior. If the user continues to perform scrolling operations, return to step S2 and repeat the above process. The process ends if the user closes the viewport.
2. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, Initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters, including: Initialize and display the view, create a container element, and create a placeholder element inside the container element; Load the target list data, store the complete list data in memory, but do not render the DOM nodes; Initialize the node pool by creating an empty data structure for caching and reusing DOM nodes that will be recycled later; Initialize the preset configuration parameters, which include at least: estimated item height, maximum node pool capacity, prediction time window, and basic buffer size.
3. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, The listening for scroll events of the container element carrying the virtual scroll list includes: Retrieve the container element that holds the virtual scrolling list; Register an event handler function for the scroll event of the container element by registering the event; The event handling function is throttled to keep its execution frequency synchronized with the browser's rendering frame rate.
4. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, The predicted rolling displacement within a predetermined time window is calculated using a rolling behavior prediction model, including: Calculate the current instantaneous scroll speed and instantaneous scroll acceleration based on continuously monitored scroll events; The predicted rolling displacement is calculated using kinematic formulas based on the instantaneous rolling speed, the instantaneous rolling acceleration, and the predetermined time window.
5. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, The target rendering area includes a core viewport and a dynamic buffer; wherein, the core viewport is the index range of the area that the user can currently see, calculated based on the scroll distance of the current viewport from the top and the height of the viewport. The dynamic buffer is an area that extends above and below the core view area and is dynamically adjusted based on the calculated dynamic absolute value of the scrolling speed.
6. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, Based on intelligent node recycling strategies and node pools, DOM nodes in the target rendering area are reused and recycled, including: When a new list item needs to be rendered, a reusable node is first obtained from the node pool based on the unique identifier of the list item. If no matching node is found, a new DOM node is created. When the node pool capacity exceeds the preset maximum node pool capacity, nodes that are opposite to the current scrolling direction are recycled first. If the scrolling directions are the same or cannot be distinguished, the node with the earliest last used timestamp is recycled.
7. The virtual scrolling optimization method based on behavior prediction as described in claim 1, characterized in that, By comparing the target rendering area with the old rendering area, the rendering and updating of DOM nodes are performed, including: By comparing the old rendering area and the target rendering area, we obtain two sets: the index set for newly added rendering and the index set for removed rendering. Iterate through the newly added collection, request nodes from the node pool, and insert them into the DOM tree; Iterate through the removal collection, remove nodes from the DOM tree and return them to the node pool; update the height of the placeholder container, calibrate the position of the rendered nodes using absolute positioning, and save the current rendering area as the old rendering area for the next time.
8. A virtual scrolling optimization system based on behavior prediction, characterized in that, include: The initialization module is configured to: initialize and display the view, load the target list data, and initialize the node pool and preset configuration parameters. The scroll event listener module is configured to listen for scroll events of the container element that hosts the virtual scroll list; The scroll prediction module is configured to: calculate the predicted scroll displacement within a predetermined time window based on the monitored scroll events using a scroll behavior prediction model, in order to determine the range of the dynamic buffer. The rendering area calculation module is configured to: construct a two-layer buffer rendering mechanism based on the predicted scroll displacement, and dynamically calculate the target rendering area; The node pool management module is configured to reuse and recycle DOM nodes in the target rendering area based on an intelligent node recycling strategy and the node pool. The rendering execution module is configured to: render and update DOM nodes by comparing the target rendering area with the old rendering area; perform subsequent processing based on user behavior; if the user continues to perform scrolling operations, return to the scroll event listener module to repeat the above process. The process ends if the user closes the viewport.
9. A computer-readable storage medium having a program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps in the virtual scrolling optimization method based on behavior prediction as described in any one of claims 1-7.
10. An electronic device comprising a memory, a processor, and a program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps in the virtual scrolling optimization method based on behavior prediction as described in any one of claims 1-7.