Page viewport element scrolling method, apparatus, storage medium, and computer device

Abstract

The page viewport element scrolling method and device, the storage medium and the computer device provided by the application, when displaying a front-end page, a viewport container in the front-end page is identified first, and dynamic style injection is performed on the viewport container to form a scrolling container, which provides a clear and standard action range for subsequent scrolling operation and element management; then, the scrolling container area is divided into a visible area, a buffer loading area and a deep off-screen area, so as to perform differential processing on elements in different areas. For example, the elements in the visible area are completely rendered to present them in the best state; the elements in the buffer loading area are preloaded to reduce the waiting time when they are completely rendered; the elements in the deep off-screen area are set with element snapshots and size placeholders to maintain the overall layout stability of the page. Therefore, when a user performs a scrolling operation on the visible area, the rendering state of the elements in each area can be dynamically switched based on the scrolling operation, so that adaptive scrolling optimization is achieved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, storage medium, and computer device for scrolling page viewport elements. Background Technology

[0002] With the explosive growth of data volume in modern web applications, efficiently displaying massive amounts of data on web pages, such as tables with tens of thousands of rows and long lists, has become a critical requirement. Early on, JavaScript virtual scrolling libraries explicitly controlled element positions through absolute positioning. This reduced the number of rendered elements, but required pre-calculating all row heights, resulting in poor adaptability to dynamic content, and scrollbar accuracy relied on estimation. Later, the Intersection Observer-assisted loading solution emerged, triggering rendering by listening for elements entering and leaving the viewport, which optimized rendering timing to some extent. However, without CSS rendering optimization, it still rendered too much off-screen DOM during initial loading, resulting in limited performance improvements. Subsequently, basic Content Visibility applications appeared, allowing for element rendering optimization simply by setting `content-visibility: auto`. However, this solution also exposed many problems, such as abnormal scrollbar heights, loss of off-screen element states, and lack of adaptive scrolling speed optimization.

[0003] In summary, the current page viewport element scrolling methods are unstable, severely impacting user experience. For example, rendering granularity is coarse, easily resulting in blank screens during rapid scrolling; state maintenance is lacking, skipped elements lose their rendering context, affecting data integrity; layout stability is poor, with scrollbar height dynamically changing with loading, causing page jumps; and development is highly intrusive, requiring manual calibration of element size and position logic, increasing development costs. Summary of the Invention

[0004] The purpose of this application is to at least solve one of the aforementioned technical defects, particularly the poor stability of the existing page viewport element scrolling method, which seriously affects the user experience.

[0005] This application provides a method for scrolling page viewport elements, the method comprising:

[0006] The viewport container in the front-end page is identified, and dynamic styles are injected into the viewport container to form a scrollable container;

[0007] The scrolling container is divided into regions to obtain three levels of rendering regions; the three levels of rendering regions include the visible area, the buffer loading area, and the depth off-screen area.

[0008] Based on preset layered style rules, the elements in the visible area are fully rendered, the elements in the buffer loading area are preloaded, and element snapshots and size placeholders are set for the elements in the depth off-screen area.

[0009] By listening to the scrolling events, the user's scrolling speed and direction in the visible area are monitored, and the rendering state of elements in the three-level rendering area is dynamically switched based on the scrolling speed and direction.

[0010] Optionally, the step of dynamically injecting styles into the viewport container to form a scrollable container includes:

[0011] Add scope identifiers to the child items within the viewport container to limit the scope of the viewport container, thus forming a selector;

[0012] Set hierarchical style rules in the selector to define the style of the elements in the selector, and obtain a scroll container.

[0013] Optionally, the step of dividing the scrolling container into three levels of rendering regions includes:

[0014] The viewport of the scrolling container is determined based on the page layout of the front-end page;

[0015] The viewport is expanded according to the first division height to obtain the visible area;

[0016] The visible area is divided into upper and lower regions based on the second division height to obtain a buffer loading area;

[0017] The area in the scrolling container other than the visible area and the buffer loading area is marked as the depth off-screen area.

[0018] Optionally, dynamically switching the rendering state of elements in the three-level rendering area based on the scrolling speed and the scrolling direction includes:

[0019] When a first element enters the viewport from the buffer loading area, the state switching trigger condition of the first element is determined based on the scrolling speed and the scrolling direction, and the first element is fully rendered in the viewport based on the state switching trigger condition.

[0020] When a second element enters the buffer loading area from the viewport or the depth off-screen area, a DOM node of the second element in the preloaded state is generated in the buffer loading area.

[0021] When a third element enters the depth off-screen area from the buffer loading area, a size placeholder for the third element is generated in the depth off-screen area, and a snapshot of the element corresponding to the size placeholder is saved.

[0022] Optionally, determining the state switching trigger condition of the first element based on the scrolling speed and the scrolling direction includes:

[0023] When the scrolling speed is low, the first element is moved into the visible area by 10% according to the scrolling direction as the state switching trigger condition for the first element.

[0024] When the scrolling speed is high-speed scrolling, the state switching trigger condition for the first element is set when the first element enters 50% of the visible area, according to the scrolling direction.

[0025] Optionally, generating the DOM node of the second element in the preloaded state in the buffer loading area includes:

[0026] Create an empty DOM node for the second element in the buffer loading area, and populate the empty DOM node with the lightweight content of the second element;

[0027] Preload images and / or components onto the empty DOM nodes after they have been filled, to form the DOM node of the second element in the preloaded state.

[0028] Optionally, generating a size placeholder for the third element in the depth-outside-screen area and saving a snapshot of the element corresponding to the size placeholder includes:

[0029] Obtain the actual layout size of the third element, and insert a size placeholder in the depth screen area corresponding to the third element according to the actual layout size;

[0030] Perform a state serialization operation on the component instance corresponding to the third element, generate an element snapshot, and store the element snapshot in a memory pool in the form of key-value pairs.

[0031] This application also provides a page viewport element scrolling device, including:

[0032] The container optimization module is used to identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrollable container.

[0033] The region division module is used to divide the scrolling container into regions to obtain a three-level rendering region; the three-level rendering region includes a visible area, a buffer loading area, and a depth off-screen area.

[0034] The element rendering module is used to fully render the elements in the visible area based on preset layered style rules, preload the elements in the buffer loading area, and set element snapshots and size placeholders for the elements in the depth off-screen area.

[0035] The state switching module is used to listen to the scrolling speed and scrolling direction of the user's operation on the visible area through scrolling events, and dynamically switch the rendering state of the elements in the three-level rendering area based on the scrolling speed and scrolling direction.

[0036] This application also provides a storage medium, characterized in that: the storage medium stores computer-readable instructions, which, when executed by one or more processors, cause one or more processors to perform the steps of the page viewport element scrolling method as described in any of the above embodiments.

[0037] This application also provides a computer device, characterized in that it includes: one or more processors, and a memory;

[0038] The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the page viewport element scrolling method as described in any of the above embodiments.

[0039] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0040] The page viewport element scrolling method, apparatus, storage medium, and computer device provided in this application, when displaying a front-end page, can first identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrolling container, providing a clear and standardized scope for subsequent scrolling operations and element management. Then, the scrolling container can be divided into three levels of rendering areas, including the visible area, the buffer loading area, and the depth off-screen area, thereby enabling differentiated processing of elements in different areas. For example, elements in the visible area are fully rendered to ensure that the content currently visible to the user is presented in the best possible state; elements in the buffer loading area are preloaded to reduce the waiting time for users to scroll through elements in this area; and element snapshots and size placeholders are set for elements in the depth off-screen area, thus preserving the layout information of the elements while maintaining the overall layout stability of the page. Therefore, when a user scrolls in the visible area, the rendering state of elements in the three levels of rendering areas can be dynamically switched based on their scrolling speed and direction, achieving adaptive scrolling optimization, thereby minimizing unnecessary rendering and calculations while ensuring a good user experience. Attached Figure Description

[0041] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0042] Figure 1 A flowchart illustrating a page viewport element scrolling method provided in an embodiment of this application;

[0043] Figure 2 This application provides a schematic diagram of the structure of a three-level rendering region.

[0044] Figure 3 A schematic diagram of a page viewport element scrolling device provided in an embodiment of this application;

[0045] Figure 4 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0046] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0047] The current page viewport element scrolling method has poor stability, which seriously affects the user experience. For example, the rendering granularity is coarse, and white screens are prone to occur when scrolling quickly; state maintenance is lacking, and skipped elements lose their rendering context, affecting data integrity; the layout stability is poor, and the scrollbar height changes dynamically with loading, causing page jumps; it is highly intrusive to development, requiring manual calibration of element size and position logic, increasing development costs.

[0048] Based on this, this application proposes the following technical solution, as detailed below:

[0049] In one embodiment, such as Figure 1 As shown, Figure 1 This is a flowchart illustrating a method for scrolling page viewport elements according to an embodiment of this application. This application provides a method for scrolling page viewport elements, specifically including the following:

[0050] S110: Identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrollable container.

[0051] In this step, when displaying the front-end page, the computer device can first identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrollable container, providing a clear and standardized scope for subsequent scrolling operations and element management.

[0052] Specifically, the computer device can inject an AST analyzer into the Vue compilation chain. This AST analyzer has certain conditions set, such as containing a v-for directive and exceeding the data source length threshold, having a fixed height or max-height style, and specific comment tags. The AST analyzer can identify viewport containers that meet the conditions and inject proxy components into them. <virtualscrollproxy>It replaces the original container tag and performs dynamic style injection, thereby upgrading the original ordinary viewport container into a scrolling container with virtualized scrolling capabilities and extended management capabilities.

[0053] Understandably, dynamic style injection restricts the scrolling behavior of related elements to the scope of the viewport container, ensuring context boundaries during scrolling and rendering. This effectively prevents page misalignment, element occlusion, or interaction disruptions caused by uncontrolled scrolling. Furthermore, dynamic style injection provides a clear and unified rendering strategy for subsequent element management operations, allowing for precise control and optimization of page component layout and scrolling behavior, thereby improving page loading efficiency and user interaction smoothness.

[0054] S120: Divide the scrolling container into three levels of rendering areas; the three levels of rendering areas include the visible area, the buffer loading area, and the depth off-screen area.

[0055] In this step, after obtaining the scrolling container through step S110, the computer device can divide the scrolling container into regions to obtain three-level rendering regions. These three-level rendering regions include the visible area, the buffer loading area, and the depth off-screen area, thereby enabling differentiated processing of elements in different regions.

[0056] Specifically, such as Figure 2 As shown, Figure 2 This application provides a schematic diagram of the structure of a three-level rendering region. Figure 2 In this process, the computer device can divide the scrolling container into three levels of rendering regions based on its actual display area within the viewport of the front-end page. Specifically, the computer device can define the content that the user can currently see directly on the front-end page as the visible area, and the elements in this area need to be rendered in real time to ensure the immediacy of interface interaction and the consistency of visual experience. Secondly, a certain transition range can be reserved above and below the visible area, which is divided into a buffer loading area to preload elements that are about to enter or leave the viewport, so that the user can get a smooth and lag-free transition effect during scrolling. Finally, for areas that exceed the buffer and will not enter the user's field of view in a short time, they can be divided into a depth off-screen area, and the elements in this area can be rendered with deferred or destroyed on demand to minimize unnecessary computation and memory consumption.

[0057] Understandably, by dividing the page into regions, computer devices can perform differentiated processing on elements in different regions. This can not only improve the rendering efficiency and resource utilization of the front-end page in scenarios with large amounts of data, but also optimize the smoothness and stability of scrolling operations, thereby improving the user's interactive experience.

[0058] S130: Fully renders elements in the visible area based on preset layered style rules, preloads elements in the buffer loading area, and sets element snapshots and size placeholders for elements in the depth off-screen area.

[0059] In this step, after the three-level rendering area is divided in step S120, the computer device can adopt different rendering strategies for the elements in each area based on the preset layered style rules. This includes fully rendering the elements in the visible area to ensure that the content currently visible to the user is presented in the best state; preloading the elements in the buffer loading area to reduce the waiting time when the user scrolls through the elements in that area; and setting element snapshots and size placeholders for the elements in the depth off-screen area. This can preserve the layout information of the elements and maintain the overall layout stability of the page.

[0060] Specifically, within the visible area, the computer device can perform full rendering of elements, including loading all their content, styles, and interaction logic, ensuring that the content seen by the user in the current viewport has the highest clarity and completeness to meet the needs of instant browsing and interaction. In the buffer loading area, the computer device can perform pre-loading rendering of elements that are about to enter the user's field of view, that is, build the necessary structure and resources of these elements in advance in the background, so that when the user scrolls the elements in this area into the visible area, they can be displayed seamlessly, avoiding loading delays or content flickering. In the depth off-screen area, the computer device no longer performs full rendering of all elements, but adopts a lightweight processing method, only retaining the necessary snapshot information and size placeholders for the elements, thereby maintaining the stability of the page layout, avoiding content jumps or misalignments due to missing elements, and effectively reducing memory consumption and rendering overhead.

[0061] S140: Listen for the scrolling speed and direction of the user's operation in the visible area through scrolling events, and dynamically switch the rendering state of elements in the three-level rendering area based on the scrolling speed and direction.

[0062] In this embodiment, after the elements in the scrolling container are initialized and displayed on the front-end page through step S130, the computer device can detect user operations in real time. After detecting that the user is scrolling in the visible area, it can dynamically switch the rendering state of the elements in the three-level rendering area based on the scrolling speed and scrolling direction to achieve adaptive scrolling optimization. This can minimize unnecessary rendering and calculation while ensuring user experience.

[0063] Specifically, the computer device can detect and perceive user actions in real time during the operation of the front-end page, and when it detects that the user is performing a scrolling operation within the visible area, it calculates the real-time scrolling speed and direction through a preset onscroll event stream. Based on these parameters, the computer device can flexibly switch the rendering state of elements entering and exiting other areas within the three-level rendering region.

[0064] For example, when a user scrolls down quickly, the computer device can prioritize releasing the resources of elements above that have left the viewport, while activating the rendering of elements in the lower buffer loading area to ensure that newly entering content is rendered instantly.

[0065] Understandably, through this adaptive scrolling optimization mechanism, computer devices can minimize the ineffective rendering and calculation of elements outside the depth screen area while ensuring the user's browsing experience and smooth interaction. This avoids performance waste and excessive resource consumption, thereby effectively improving the overall page rendering efficiency and operational stability.

[0066] In the above embodiments, when displaying the front-end page, the viewport container in the front-end page can be identified first, and dynamic styles can be injected into the viewport container to form a scroll container, providing a clear and standardized scope for subsequent scrolling operations and element management. Then, the scroll container can be divided into three-level rendering areas, including the visible area, the buffer loading area, and the depth off-screen area, thereby enabling differentiated processing of elements in different areas. For example, elements in the visible area can be fully rendered to ensure that the content currently visible to the user is presented in the best state; elements in the buffer loading area can be preloaded to reduce the waiting time for users to scroll through elements in this area; and element snapshots and size placeholders can be set for elements in the depth off-screen area, which can preserve the layout information of the elements and maintain the overall layout stability of the page. Therefore, when the user scrolls in the visible area, the rendering state of elements in the three-level rendering areas can be dynamically switched based on their scrolling speed and scrolling direction to achieve adaptive scrolling optimization, thereby minimizing unnecessary rendering and calculations while ensuring user experience.

[0067] In one embodiment, the process of dynamically injecting styles into the viewport container to form a scrollable container in step S110 may include:

[0068] S111: Add scope identifiers to the child items within the viewport container to limit the scope of the viewport container, forming a selector.

[0069] S112: Set hierarchical style rules in the selector to define the style of the elements in the selector and obtain a scroll container.

[0070] In this embodiment, when injecting dynamic styles into the viewport container, the computer device can first add scope identifiers to the child items in the viewport container to limit the scope of the viewport container and form a selector. Then, hierarchical style rules are set in the selector to define the style of the elements in the selector and obtain a scroll container.

[0071] Specifically, child items within a viewport container refer to the smallest independently renderable element unit that carries data or UI content within the container. They have different hierarchies and structures, but all belong to the container's content scope. A scope identifier, on the other hand, is a unique identifier generated or assigned by a computer device in a front-end page to distinguish and limit a specific scope, such as a viewport container and its internal elements. It typically exists in a form recognizable by style rules or scripts, such as `[data-vs-item]`, and can be used to ensure that injected styles or logic only apply to child items within the target container, without affecting other containers or elements on the front-end page. Therefore, by adding scope identifiers, the scope of the viewport container is strictly limited, and the viewport container can generate selectors with hierarchical constraints based on these identifiers.

[0072] Subsequently, the computer device can define and apply layered style rules within this selector, enabling fine-grained style control over the elements covered by the selector based on the rendering needs of different areas. For example, it can set complete visual styles and interactive attributes for elements in the visible area, lightweight transition styles for elements in the buffer loading area, and reserve size placeholders and snapshot styles for elements in the depth off-screen area. In this way, the computer device can achieve localized management and differentiated rendering of elements within the container without affecting the overall page style. This allows the scrolling container to have higher style isolation and controllability, avoiding style pollution and selector conflicts.

[0073] In one embodiment, the process of dividing the scrolling container into regions to obtain three-level rendering regions in step S120 may include:

[0074] S121: Determine the viewport of the scroll container based on the page layout of the front-end page.

[0075] S122: Expand the viewport area according to the first division height to obtain the visible area.

[0076] S123: Divide the visible area into the upper and lower regions according to the second division height to obtain the buffer loading area.

[0077] S124: Mark the area outside the visible area and the buffer loading area in the scroll container as the depth off-screen area.

[0078] In this embodiment, as Figure 2 As shown, the computer device can determine the viewport of the scrolling container based on the page layout of the front-end page, and then expand the viewport area according to the first division height to obtain the visible area, and divide the visible area into the upper and lower areas according to the second division height to obtain the buffer loading area. Finally, the area in the scrolling container other than the visible area and the buffer loading area can be marked as the depth off-screen area.

[0079] Specifically, after parsing the overall layout structure of the front-end page, the computer device can first determine the viewport position and size of the scrolling container within the page, using this as a benchmark for area division. Specifically, the computer device can expand the viewport area according to a preset first division height, using the expanded area as the visible zone to ensure that all content visible to the user at the current scrolling position is fully rendered and presented. Based on this, the computer device can also divide the visible zone into buffer loading areas on the top and bottom sides according to a second division height, used to preload elements that are about to enter or leave the viewport, thus ensuring that the user can seamlessly see the content without any stuttering or blank transitions while continuing to scroll. For portions of the scrolling container that exceed the visible zone and buffer loading area, the computer device marks them as off-screen depth areas and performs lightweight processing through snapshot replacement and size placeholders to avoid excessive rendering computation and resource waste.

[0080] For example, the visible area can be an area that extends 20% of the viewport height vertically; the buffer loading area can be an area that is 1 times the viewport height vertically; and the remaining areas are all off-screen depth areas.

[0081] In one embodiment, the process of dynamically switching the rendering state of elements in the three-level rendering region based on scrolling speed and scrolling direction in step S140 may include:

[0082] S141: When there is a first element entering the viewport from the buffer loading area, determine the state switching trigger condition of the first element based on the scrolling speed and scrolling direction, and fully render the first element in the viewport based on the state switching trigger condition.

[0083] S142: When a second element enters the buffered area from the viewport or the depth off-screen area, generate the DOM node of the second element in the preloaded state in the buffered area.

[0084] S143: When a third element enters the depth off-screen area from the buffer loading area, a size placeholder for the third element is generated in the depth off-screen area, and a snapshot of the element corresponding to the size placeholder is saved.

[0085] In this embodiment, when a user scrolls through elements within the viewport via the front-end page, the computer device can first determine the first element entering the viewport from the buffer loading area, then determine the state switching trigger condition for the first element based on the scrolling speed and scrolling direction, and fully render the first element in the viewport based on the state switching trigger condition; it can also determine the second element entering the buffer loading area from the viewport or the depth off-screen area, and generate the DOM node of the second element in the preloaded state in the buffer loading area; and determine the third element entering the depth off-screen area from the buffer loading area, then generate the size placeholder of the third element in the depth off-screen area, and save the element snapshot corresponding to the size placeholder.

[0086] It is understandable that when a user scrolls the content within the viewport, the elements in each area will inevitably change synchronously. At this time, the computer device can detect the boundary changes between each area and thus identify the first element that enters the visible area from the buffer loading area, the second element that enters the buffer loading area from the depth out-of-screen area or the visible area, and the third element that enters the depth out-of-screen area from the buffer loading area.

[0087] Specifically, for the first element, the computer device can dynamically calculate the state switching trigger condition of the first element based on the user's scrolling speed and scrolling direction. For example, it can trigger rendering in advance during high-speed scrolling and trigger rendering when entering the viewport at low-speed scrolling, thus achieving adaptive state switching logic. Based on this trigger condition, the computer device can perform a full rendering operation on the first element when it officially enters the visible area, including loading the complete content, styles, and interaction logic, ensuring that the content seen by the user in the current viewport achieves the best visual effect and interactive experience. For the second element, the computer device can generate a preloaded DOM node for the second element in the buffer loading area, thereby allocating the necessary rendering resources in advance for the content that is about to enter the user's field of view, so that the user can seamlessly transition when continuing to scroll, avoiding blank, flickering, or delayed loading issues. For the third element, the computer device can generate a size placeholder for the third element in the depth off-screen area 50ms after the third element leaves the buffer loading area, and save a snapshot of the element corresponding to the size placeholder. This can preserve its original layout information, maintain the stability of the overall page structure, and quickly restore the corresponding element when needed, reducing redundant calculations and rendering overhead.

[0088] In one embodiment, the process of determining the state switching trigger condition of the first element based on the scrolling speed and scrolling direction in step S141 may include:

[0089] S1411: When the scrolling speed is low, the first element is moved into the visible area by 10% according to the scrolling direction as the trigger condition for the state switching of the first element.

[0090] S1412: When the scrolling speed is high speed, the state switching trigger condition for the first element is to enter 50% of the visible area according to the scrolling direction.

[0091] In this embodiment, for the first element, when the scrolling speed is low, the computer device can use the first element entering 10% of the visible area as the state switching trigger condition based on the scrolling direction; conversely, when the scrolling speed is high, the computer device can use the first element entering 50% of the visible area as the state switching trigger condition based on the scrolling direction.

[0092] Understandably, in slow scrolling scenarios, users can precisely track the rendering process of elements. Therefore, computer devices can set the percentage of the first element entering the viewport to 10% as the state switching trigger condition. That is, when only a small portion of the first element enters the viewport, a full rendering operation is triggered, ensuring that users can see the complete content of elements in a timely manner during slow scrolling, enabling detailed browsing and improving visual continuity and interactive responsiveness. Conversely, in fast scrolling scenarios, computer devices can adjust the percentage of the first element entering the viewport to 50%. That is, a rendering operation is triggered only when half of the first element enters the viewport. This effectively avoids frequently rendering elements that have not yet been fully noticed by the user during fast scrolling, thereby reducing unnecessary computational overhead and resource consumption, and avoiding lag.

[0093] It should be noted that in this application, low-speed scrolling can refer to a scrolling speed of <100px / ms, while high-speed scrolling refers to a scrolling speed of ≥100px / ms.

[0094] In one embodiment, the process of generating the DOM node of the second element in the preloaded state in step S142 may include:

[0095] S1421: Create an empty DOM node for the second element in the buffered loading area, and populate the empty DOM node with the lightweight content of the second element.

[0096] S1422: Preload images and / or components onto the empty DOM node after it has been filled, so that the second element becomes a DOM node in the preloaded state.

[0097] In this embodiment, for the second element, the computer device can create an empty DOM node of the second element in the buffer loading area, fill the empty DOM node with the lightweight content of the second element, and then preload the images and / or components of the filled empty DOM node to form the DOM node of the second element in the preloaded state.

[0098] Specifically, the computer device can create empty DOM nodes within the buffer loading area for the second element about to enter the viewport, marking their state as "near-viewport". These empty nodes initially do not carry complete content, thus reducing initial rendering pressure and computational overhead. Subsequently, the computer device can inject data into these empty DOM nodes frame by frame to avoid stuttering. For example, the computer device can first fill the empty DOM nodes with lightweight content of the second element, such as text placeholders, basic styles, or small icons, without immediately loading complex images or dynamic components, thus achieving an initial visual placeholder effect. After filling is complete, the computer device can also preload image resources and / or front-end components in the content-filled DOM nodes, preloading necessary data and rendering logic so that when the user scrolls to the boundary of the buffer loading area and brings the second element into the viewport, the element can quickly present complete content and interactive functions.

[0099] In one embodiment, the process of generating a size placeholder for the third element in the depth-outside-screen region and saving a snapshot of the element corresponding to the size placeholder in step S143 may include:

[0100] S1431: Obtain the actual layout size of the third element, and insert a size placeholder in the depth screen area corresponding to the third element according to the actual layout size.

[0101] S1432: Perform state serialization operation on the component instance corresponding to the third element, generate an element snapshot, and store the element snapshot in the memory pool in the form of key-value pairs.

[0102] In this embodiment, for the third element, the computer device can obtain the actual layout size of the third element, insert a size placeholder in the depth screen area corresponding to the third element according to the actual layout size, and then perform a state serialization operation on the component instance corresponding to the third element to generate an element snapshot, and store the element snapshot in the memory pool in the form of key-value pairs.

[0103] Specifically, the computer device can obtain the actual layout dimensions of the third element within the scrolling container, including its width, height, and precise position within the container, in order to accurately map it to the space in the depth off-screen area. Subsequently, the computer device can insert size placeholders in the depth off-screen area at the positions corresponding to the third element. These placeholders preserve the element's layout information, ensuring the stability of the overall structure during page scrolling or rendering, and preventing content jumps or layout misalignments. Furthermore, the computer device can perform state serialization operations on the component instance corresponding to the third element, packaging its current state, attributes, data, and interaction information to generate an element snapshot and a snapshot ID. The element snapshot, snapshot ID, and element ID can then be stored in a memory pool as key-value pairs.

[0104] The calculation process for the placeholder height of the third element is as follows: Predicted placeholder height = Base height × (1 + Text length coefficient + Media resource coefficient).

[0105] Understandably, by using placeholders and element snapshots, although the third element is not rendered temporarily, its layout and state information are fully preserved. When the user scrolls it to the buffer loading area, the element ID can be matched in the snapshot pool to quickly obtain the corresponding element snapshot and restore the element's preloaded state in the buffer loading area without recalculating or re-rendering the component.

[0106] Furthermore, when the number of snapshot cache entries in the snapshot pool exceeds 1000 or the total memory exceeds 50MB, the computer device can automatically delete the least recently accessed element snapshot.

[0107] The page viewport element scrolling device provided in the embodiments of this application is described below. The page viewport element scrolling device described below can be referred to in correspondence with the page viewport element scrolling method described above.

[0108] In one embodiment, such as Figure 3 As shown, Figure 3 This is a schematic diagram of a page viewport element scrolling device provided in an embodiment of this application. This application also provides a page viewport element scrolling device, including a container optimization module 210, a region division module 220, an element rendering module 230, and a state switching module 240, specifically comprising the following:

[0109] The container optimization module 210 is used to identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrollable container.

[0110] The region division module 220 is used to divide the scrolling container into regions to obtain three-level rendering regions; the three-level rendering regions include the visible area, the buffer loading area, and the depth off-screen area.

[0111] The element rendering module 230 is used to fully render elements in the visible area based on preset layered style rules, preload elements in the buffer loading area, and set element snapshots and size placeholders for elements in the depth off-screen area.

[0112] The state switching module 240 is used to listen to the scrolling speed and scrolling direction of the user's operation on the visible area through scrolling events, and dynamically switch the rendering state of elements in the three-level rendering area based on the scrolling speed and scrolling direction.

[0113] In the above embodiments, when displaying the front-end page, the viewport container in the front-end page can be identified first, and dynamic styles can be injected into the viewport container to form a scroll container, providing a clear and standardized scope for subsequent scrolling operations and element management. Then, the scroll container can be divided into three-level rendering areas, including the visible area, the buffer loading area, and the depth off-screen area, thereby enabling differentiated processing of elements in different areas. For example, elements in the visible area can be fully rendered to ensure that the content currently visible to the user is presented in the best state; elements in the buffer loading area can be preloaded to reduce the waiting time for users to scroll through elements in this area; and element snapshots and size placeholders can be set for elements in the depth off-screen area, which can preserve the layout information of the elements and maintain the overall layout stability of the page. Therefore, when the user scrolls in the visible area, the rendering state of elements in the three-level rendering areas can be dynamically switched based on their scrolling speed and scrolling direction to achieve adaptive scrolling optimization, thereby minimizing unnecessary rendering and calculations while ensuring user experience.

[0114] In one embodiment, the container optimization module 210 may include:

[0115] The scope-limiting submodule is used to add scope identifiers to the child items within the viewport container to limit the scope of the viewport container, thus forming a selector.

[0116] The style definition submodule is used to set hierarchical style rules in the selector to define the style of the elements in the selector and obtain a scroll container.

[0117] In one embodiment, the region division module 220 may include:

[0118] The viewport determination submodule is used to determine the viewport of the scrolling container based on the page layout of the front-end page.

[0119] The first division submodule is used to expand the viewport region according to the first division height to obtain the visible area.

[0120] The second partitioning submodule is used to partition the upper and lower regions of the visible area according to the second partitioning height to obtain the buffer loading area.

[0121] The third submodule is used to mark the area outside the visible area and the buffer loading area in the scrolling container as the depth off-screen area.

[0122] In one embodiment, the state switching module 240 may include:

[0123] The first switching submodule is used to determine the state switching trigger condition of the first element based on the scrolling speed and scrolling direction when there is a first element entering the viewport from the buffer loading area, and to fully render the first element in the viewport based on the state switching trigger condition.

[0124] The second switching submodule is used to generate the DOM node of the second element in the preloaded state in the buffer loading area when there is a second element entering the buffer loading area from the viewport or the depth off-screen area.

[0125] The third switching submodule is used to generate a size placeholder for the third element in the depth outside the screen area when there is a third element entering from the buffer loading area to the depth outside the screen area, and save the element snapshot corresponding to the size placeholder.

[0126] In one embodiment, the first switching submodule may include:

[0127] The low-speed scrolling unit is used to trigger the state switching of the first element when the scrolling speed is low, based on the scrolling direction, by having the first element enter the visible area by 10%.

[0128] The high-speed scrolling unit is used to trigger the state switching of the first element when the scrolling speed is high-speed, based on the scrolling direction, by having the first element enter 50% of the visible area.

[0129] In one embodiment, the second switching submodule may include:

[0130] The node creation unit is used to create an empty DOM node for the second element in the buffer loading area and populate the empty DOM node with the lightweight content of the second element.

[0131] The content preloading unit is used to preload images and / or components onto empty DOM nodes after they have been filled, forming the DOM node of the second element in the preloaded state.

[0132] In one embodiment, the third switching submodule may include:

[0133] The placeholder insertion unit is used to obtain the actual layout size of the third element and insert a size placeholder in the depth off-screen area at the position corresponding to the third element according to the actual layout size.

[0134] The snapshot storage unit is used to perform state serialization operations on the component instance corresponding to the third element, generate an element snapshot, and store the element snapshot in the memory pool in the form of key-value pairs.

[0135] In one embodiment, this application also provides a storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page viewport element scrolling method as described in any of the above embodiments.

[0136] In one embodiment, this application also provides a computer device storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page viewport element scrolling method as described in any of the above embodiments.

[0137] Indicatively, such as Figure 4 As shown, Figure 4 This is a schematic diagram of the internal structure of a computer device 300 provided in an embodiment of this application. The computer device 300 can be provided as a server. (Refer to...) Figure 4 The computer device 300 includes a processing component 302, which further includes one or more processors, and memory resources represented by memory 301 for storing instructions, such as application programs, that can be executed by the processing component 302. The application programs stored in memory 301 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 302 is configured to execute instructions to perform the page viewport element scrolling method of any of the above embodiments.

[0138] The computer device 300 may also include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate on an operating system stored in memory 301, such as Windows Server™, Mac OS X™, Unix™, Linux™, Free BSD™, or similar.

[0139] Those skilled in the art will understand that Figure 4 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0140] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0141] The various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can be referred to each other.

[0142] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.< / virtualscrollproxy>

Claims

1. A method for scrolling page viewport elements, characterized in that, The method includes: The viewport container in the front-end page is identified, and dynamic styles are injected into the viewport container to form a scrollable container; The scrolling container is divided into regions to obtain three levels of rendering regions; the three levels of rendering regions include the visible area, the buffer loading area, and the depth off-screen area. Based on preset layered style rules, the elements in the visible area are fully rendered, the elements in the buffer loading area are preloaded, and element snapshots and size placeholders are set for the elements in the depth off-screen area. By listening to the scrolling events, the user's scrolling speed and scrolling direction in the visible area are monitored, and the rendering state of the elements in the three-level rendering area is dynamically switched based on the scrolling speed and scrolling direction. The dynamic switching of the rendering state of elements in the three-level rendering area based on the scrolling speed and the scrolling direction includes: When a first element enters the visible area from the buffer loading area, the state switching trigger condition of the first element is determined based on the scrolling speed and the scrolling direction, and the first element is fully rendered in the visible area based on the state switching trigger condition. When a second element enters the buffer loading area from the visible area or the depth off-screen area, a DOM node of the second element in the preloaded state is generated in the buffer loading area. When a third element enters the depth off-screen area from the buffer loading area, a size placeholder for the third element is generated in the depth off-screen area, and a snapshot of the element corresponding to the size placeholder is saved. The step of generating a size placeholder for the third element in the depth-outside-screen region and saving a snapshot of the element corresponding to the size placeholder includes: Obtain the actual layout size of the third element, and insert a size placeholder in the depth screen area corresponding to the third element according to the actual layout size; Perform a state serialization operation on the component instance corresponding to the third element, generate an element snapshot, and store the element snapshot in a memory pool in the form of key-value pairs.

2. The page viewport element scrolling method according to claim 1, characterized in that, The step of dynamically injecting styles into the viewport container to form a scrollable container includes: Add scope identifiers to the child items within the viewport container to limit the scope of the viewport container, thus forming a selector; Set hierarchical style rules in the selector to define the style of the elements in the selector, and obtain a scroll container.

3. The page viewport element scrolling method according to claim 1, characterized in that, The process of dividing the scrolling container into regions results in three levels of rendering regions, including: The viewport of the scrolling container is determined based on the page layout of the front-end page; The viewport is expanded according to the first division height to obtain the visible area; The visible area is divided into upper and lower regions based on the second division height to obtain a buffer loading area; The area in the scrolling container other than the visible area and the buffer loading area is marked as the depth off-screen area.

4. The page viewport element scrolling method according to claim 1, characterized in that, The determination of the state switching trigger condition for the first element based on the scrolling speed and the scrolling direction includes: When the scrolling speed is low, the first element is moved into the visible area by 10% according to the scrolling direction as the state switching trigger condition for the first element. When the scrolling speed is high-speed scrolling, the state switching trigger condition for the first element is set when the first element enters 50% of the visible area, according to the scrolling direction.

5. The page viewport element scrolling method according to claim 1, characterized in that, Generating the DOM node of the second element in the preloaded state in the buffer loading area includes: Create an empty DOM node for the second element in the buffer loading area, and populate the empty DOM node with the lightweight content of the second element; Preload images and / or components onto the empty DOM nodes after they have been filled, to form the DOM node of the second element in the preloaded state.

6. A page viewport element scrolling device, characterized in that, include: The container optimization module is used to identify the viewport container in the front-end page and dynamically inject styles into the viewport container to form a scrollable container. The region division module is used to divide the scrolling container into regions to obtain a three-level rendering region; the three-level rendering region includes a visible area, a buffer loading area, and a depth off-screen area. The element rendering module is used to fully render the elements in the visible area based on preset layered style rules, preload the elements in the buffer loading area, and set element snapshots and size placeholders for the elements in the depth off-screen area. The state switching module is used to listen to the scrolling speed and scrolling direction of the user's operation on the visible area through scrolling events, and dynamically switch the rendering state of the elements in the three-level rendering area based on the scrolling speed and scrolling direction. The process of dynamically switching the rendering state of elements in the three-level rendering area based on the scrolling speed and the scrolling direction in the state switching module includes: When a first element enters the visible area from the buffer loading area, the state switching trigger condition of the first element is determined based on the scrolling speed and the scrolling direction, and the first element is fully rendered in the visible area based on the state switching trigger condition. When a second element enters the buffer loading area from the visible area or the depth off-screen area, a DOM node of the second element in the preloaded state is generated in the buffer loading area. When a third element enters the depth off-screen area from the buffer loading area, a size placeholder for the third element is generated in the depth off-screen area, and a snapshot of the element corresponding to the size placeholder is saved. The step of generating a size placeholder for the third element in the depth-outside-screen region and saving a snapshot of the element corresponding to the size placeholder includes: Obtain the actual layout size of the third element, and insert a size placeholder in the depth screen area corresponding to the third element according to the actual layout size; Perform a state serialization operation on the component instance corresponding to the third element, generate an element snapshot, and store the element snapshot in a memory pool in the form of key-value pairs.

7. A storage medium, characterized in that: The storage medium stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page viewport element scrolling method as described in any one of claims 1 to 5.

8. A computer device, characterized in that, include: One or more processors, and memory; The memory stores computer-readable instructions that, when executed by the one or more processors, perform the steps of the page viewport element scrolling method as described in any one of claims 1 to 5.

Images