View display method based on virtual list
Optimize the sliding performance of the applet interface through virtual list and anti-shake technology, solve the problems of sliding lag and rendering delay, improve user experience and system performance, and promote user retention and activity.
Patent Information
- Application Number
- CN202411353761.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-26
- Publication Date
- 2024-12-31
- Estimated Expiration
- Not applicable · inactive patent
AI Technical Summary
When dealing with the mini-program interface of a large number of product categories, the sliding performance is poor, resulting in sliding lag and page rendering delays, affecting the user experience and operation fluency.
Using a virtual list-based view display method, the data loading and rendering process is optimized by monitoring sliding events, using anti-shake technology, data cache and skeleton screen.
It improves sliding performance and user experience, reduces lag and wait time, optimizes system resource utilization and network pressure, enhances code maintainability and scalability, and improves user retention and activity.
Smart Images
Figure CN119225887A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of view rendering, and in particular to a view display method based on a virtual list. Background Art
[0002] In modern web and mobile application development, sliding performance is one of the key factors that directly affect user experience. With the increasing complexity of application functions and the continuous growth of data, especially when dealing with applications containing a large number of product categories and lists (such as Fuyunshang's mini-program interface, which has more than 100 product categories), the optimization of sliding performance becomes particularly important. If the sliding performance is not optimized, the mini-program interface displaying more than 100 product categories will encounter problems such as sliding jams and page rendering delays, which will seriously affect the smoothness of operation and experience satisfaction. For example:
[0003] In mini-programs developed using the Web, the Document Object Model (DOM) allows programs and scripts to dynamically access and update the content, structure, and style of documents (in the Web environment, DOM can be understood as the programming interface of HTML or XML documents, which organizes the content of documents into a tree structure, in which each node is an object, and various operations can be performed through these objects, such as accessing the value of the node, modifying the structure of the node, changing the style of the node, etc.). Each update of a DOM element will trigger the repainting (Repaint) or reflow (Reflow) of the mini-program interface. These operations are computationally intensive, especially when processing a large number of DOM elements, which will lead to performance bottlenecks;
[0004] When the mini program interface needs to load a large amount of data from the server, frequent request and response processing will occupy a large amount of network bandwidth and client resources, resulting in slow response of the mini program interface. During the data loading or mini program interface rendering process, a blank mini program interface or an unfinished mini program interface may be presented, which will affect the user's waiting experience and overall satisfaction.
[0005] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention
[0006] In view of the defects existing in the prior art, the purpose of the present invention is to provide a view display method based on a virtual list, which effectively improves the sliding performance and user experience of the mini-program by reducing DOM operations, controlling the number of elements, using anti-shake technology and data caching, and reduces the lag and waiting time. At the same time, it optimizes the utilization of system resources and reduces network pressure, enhances the maintainability and scalability of the code, and ultimately promotes user retention and activity, providing strong support for business development.
[0007] In order to achieve the above purpose, the technical solution adopted by the present invention is:
[0008] A view display method based on a virtual list, characterized by comprising the following steps:
[0009] Monitor whether a page or component triggers a sliding event due to interactive operations;
[0010] When a sliding event is triggered, an anti-shake timer is started. After the timer ends, a rendering request for the DOM element is initiated.
[0011] When responding to a rendering request, first parse the interactive interface ID involved in the rendering request, load the bound skeleton screen information according to the interactive interface ID, and present the skeleton screen information as a temporary interface during the rendering loading process;
[0012] After the temporary interface is presented, all DOM elements involved in the rendering request are loaded into the virtual storage list in sequence according to their positions in the interactive interface. Then, the vertical position of the scroll bar at the end of the sliding event is obtained, and the interactive interface is paged according to the vertical position to parse the data in the current screen and the data of the upper and lower screens.
[0013] Write the data in the current screen and the data in the upper and lower screens into the virtual list;
[0014] Render the DOM elements in the virtual list.
[0015] Based on the above technical solution, the anti-jitter timer defaults to 200 milliseconds;
[0016] When a sliding event is triggered, a 200-ms delay is followed before a rendering request for the DOM element is initiated; if the sliding is triggered again within 200 ms, the previous delay is canceled and the timing starts again.
[0017] On the basis of the above technical solution, the skeleton screen information includes:
[0018] Visual elements composed of HTML+CSS elements;
[0019] Display control logic consisting of JavaScript library and JavaScript logic code;
[0020] A placeholder element consisting of a placeholder image.
[0021] On the basis of the above technical solution, after obtaining the vertical position of the scroll bar, the range of list items to be rendered is determined based on the height of the visible area and the height of each list item, and then the interactive interface is paging processed.
[0022] On the basis of the above technical solution, when rendering the data in the current screen, the number and priority of the DOM elements involved are analyzed, and the corresponding DOM elements are rendered in sequence according to the priority and replace the placeholder elements in the skeleton screen to present the actual interactive interface content.
[0023] Based on the above technical solution, when the DOM elements in the virtual list are rendered, the placeholder elements in the skeleton screen are progressively replaced one by one. The progressive replacement means first calling and presenting the transition animation effect, and then replacing the placeholder elements in the skeleton screen with the rendered DOM elements.
[0024] On the basis of the above technical solution, it also includes: a temporary list for storing DOM elements that have completed rendering processing after responding to the rendering request, and for binding the DOM elements that have completed rendering processing with the skeleton screen;
[0025] When the skeleton screen is not presented for the first time, the DOM elements that have completed the rendering process in the temporary list are read and presented synchronously with the skeleton screen.
[0026] The virtual list-based view display method of the present invention has the following beneficial effects:
[0027] 1. By reducing unnecessary DOM operations and controlling the number of elements in the sliding list, the sliding jamming problem caused by rendering too many elements is avoided, and the smoothness of user operation is improved.
[0028] By reducing the number of DOM elements and avoiding unnecessary redrawing and rearrangement operations, the browser's computing burden is reduced and the utilization of system resources is improved.
[0029] 2. Use anti-shake technology to reduce the frequency of interface requests, and use data caching technology to reduce server requests and data loading time, so that the page responds faster and the user waiting time is reduced.
[0030] By reducing the number of interface requests and the amount of data transmission, the network bandwidth usage is reduced, the burden on the server is reduced, and the stability and scalability of the system are improved.
[0031] 3. Displaying the skeleton screen during data loading or page rendering gives users an intuitive feeling that data is loading, alleviating users' anxiety caused by waiting and improving user experience.
[0032] The application of the above technologies reduces the lag during sliding, speeds up page rendering, reduces server load, and improves data loading efficiency by optimizing data loading and rendering processes.
[0033] The virtual list-based view display method described in the present invention can be easily integrated into existing mini-programs or Web applications, thereby improving code reusability and portability, enhancing system maintainability and scalability, reducing energy consumption, and ensuring application response speed; improving user interaction experience, and enhancing user satisfaction and loyalty, thereby promoting user retention and conversion; users can browse products and categories more smoothly, thereby improving user activity and participation, and providing users with a smoother and more enjoyable browsing experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0034] The present invention has the following accompanying drawings:
[0035] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.
[0036] Figure 1 A flowchart of embodiment 1 of a view display method based on a virtual list described in the present invention.
[0037] Figure 2 A flowchart of Embodiment 2 of a view display method based on a virtual list described in the present invention. DETAILED DESCRIPTION
[0038] The present invention is further described in detail below in conjunction with the accompanying drawings. The detailed description is an explanation made in conjunction with the exemplary embodiments of the present invention, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.
[0039] like Figure 1 As shown, the view display method based on a virtual list described in the present invention includes the following steps:
[0040] Monitor whether a page or component triggers a sliding event due to interactive operations;
[0041] When a sliding event is triggered, an anti-shake timer is started. After the timer ends, a rendering request for the DOM element is initiated.
[0042] When responding to a rendering request, first parse the interactive interface ID involved in the rendering request, load the bound skeleton screen information according to the interactive interface ID, and present the skeleton screen information as a temporary interface during the rendering loading process;
[0043] After the temporary interface is presented, all DOM elements involved in the rendering request are loaded into the virtual storage list in sequence according to their positions in the interactive interface. Then, the vertical position of the scroll bar at the end of the sliding event is obtained, and the interactive interface is paged according to the vertical position to parse the data in the current screen and the data of the upper and lower screens.
[0044] Write the data in the current screen and the data in the upper and lower screens into the virtual list;
[0045] Render the DOM elements in the virtual list.
[0046] Since the virtual list renders DOM elements according to the visible range, unnecessary rendering processing is greatly reduced. If the DOM element is not in the viewport of the visible range, it will not be rendered. This not only reduces performance waste, but also avoids the problem of sliding jams.
[0047] Based on the above technical solution, the anti-jitter timer defaults to 200 milliseconds;
[0048] When a sliding event is triggered, a 200-ms delay is followed before a rendering request for the DOM element is initiated; if the sliding is triggered again within 200 ms, the previous delay is canceled and the timing starts again.
[0049] Based on the above technical solution, the skeleton screen information includes:
[0050] Visual elements composed of HTML+CSS elements;
[0051] Display control logic composed of JavaScript library and JavaScript logic code, such as when the skeleton screen should be displayed and when the skeleton screen should be hidden;
[0052] A placeholder element consisting of a placeholder image.
[0053] On the basis of the above technical solution, after obtaining the vertical position of the scroll bar, the range of list items to be rendered is determined based on the height of the visible area and the height of each list item, and then the interactive interface is paging processed.
[0054] Based on the above technical solution, Figure 2As shown, when rendering the data in the current screen, the number and priority of the DOM elements involved are parsed, and the corresponding DOM elements are rendered in order of priority and replace the placeholder elements in the skeleton screen to present the actual interactive interface content.
[0055] Based on the above technical solution, Figure 2 As shown, when the DOM elements in the virtual list are rendered, the placeholder elements in the skeleton screen are progressively replaced one by one. The progressive replacement means first calling and presenting the transition animation effect, and then replacing the placeholder elements in the skeleton screen with the rendered DOM elements.
[0056] On the basis of the above technical solution, it also includes: a temporary list for storing DOM elements that have completed rendering processing after responding to the rendering request, and for binding the DOM elements that have completed rendering processing with the skeleton screen;
[0057] When the skeleton screen is not presented for the first time, the DOM elements that have completed the rendering process in the temporary list are read and presented synchronously with the skeleton screen.
[0058] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.
[0059] The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiment. Any equivalent modifications or changes made by those skilled in the art based on the contents disclosed by the present invention should be included in the protection scope recorded in the claims.
Claims
1. A view display method based on a virtual list, characterized in that: The steps include: Monitor whether a page or component triggers a sliding event due to interactive operations; When a sliding event is triggered, an anti-shake timer is started. After the timer ends, a rendering request for the DOM element is initiated. When responding to a rendering request, first parse the interactive interface ID involved in the rendering request, load the bound skeleton screen information according to the interactive interface ID, and present the skeleton screen information as a temporary interface during the rendering loading process; After the temporary interface is presented, all DOM elements involved in the rendering request are loaded into the virtual storage list in sequence according to their positions in the interactive interface. Then, the vertical position of the scroll bar at the end of the sliding event is obtained, and the interactive interface is paged according to the vertical position to parse the data in the current screen and the data of the upper and lower screens. Write the data in the current screen and the data in the upper and lower screens into the virtual list; Render the DOM elements in the virtual list.
2. A view display method based on a virtual list as claimed in claim 1, characterized in that: The anti-jitter timer defaults to 200 milliseconds; When a sliding event is triggered, a 200-ms delay is followed before a rendering request for the DOM element is initiated; if the sliding is triggered again within 200 ms, the previous delay is canceled and the timing starts again.
3. A view display method based on a virtual list as claimed in claim 1, characterized in that: The skeleton screen information includes: Visual elements composed of HTML+CSS elements; Display control logic consisting of JavaScript library and JavaScript logic code; A placeholder element consisting of a placeholder image.
4. A view display method based on a virtual list as claimed in claim 1, characterized in that: After obtaining the vertical position of the scroll bar, the range of list items that need to be rendered is determined based on the height of the visible area and the height of each list item, and then the interactive interface is paging.
5. A view display method based on a virtual list as claimed in claim 1, characterized in that: When rendering the data in the current screen, the number and priority of the DOM elements involved are analyzed, and the corresponding DOM elements are rendered in order of priority and replace the placeholder elements in the skeleton screen to present the actual interactive interface content.
6. A view display method based on a virtual list as claimed in claim 1, characterized in that: When the DOM elements in the virtual list are rendered, the placeholder elements in the skeleton screen are progressively replaced one by one. The progressive replacement means first calling and presenting the transition animation effect, and then replacing the placeholder elements in the skeleton screen with the rendered DOM elements.
7. A view display method based on a virtual list as claimed in claim 1, characterized in that: Also includes: A temporary list is used to store DOM elements that have completed rendering processing after responding to rendering requests, and is used to bind DOM elements that have completed rendering processing to the skeleton screen; When the skeleton screen is not presented for the first time, the DOM elements that have completed the rendering process in the temporary list are read and presented synchronously with the skeleton screen.