A method, device, equipment and medium for accelerating rendering of H5 lists

Abstract

The present invention provides a rendering acceleration method, device, equipment and medium for an H5 list, the method comprising: obtaining the screen height and the virtual DOM height value of each data; obtaining the actual data height and the actual data number of the first screen and the second screen in turn through a cyclic data height accumulation method and recording them, and putting the data of the first screen and the second screen into a virtual cache; when the page triggers a pull-up scroll, the data of subsequent screens are loaded into the virtual cache one by one through the cyclic data height accumulation method; or when the page triggers a pull-down scroll, the historical data is loaded into the virtual cache screen by screen; but each time the loading is performed, only three screens of data are retained in the virtual cache, which are the data of the current screen, the previous screen and the next screen. The present invention obtains the number of screen virtual caches by accumulating the data heights one by one, and optimizes the rendering, thereby solving the problems of non-smooth screen scrolling and screen freeze caused by the height problem of data content.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, equipment and medium for accelerating the rendering of an H5 list. Background Art

[0002] H5 (i.e. HTML5 standard) list rendering acceleration is a common technology in the IT field. However, the current H5 list rendering acceleration is to force the height of all data to be limited, and then apply the specified content. Therefore, when the height of the data in the list is inconsistent, but the number of data per screen is fixed, when pulling down or pulling up to load, if the height of a certain data is too small, there may be only half a screen of data in the cache. At this time, when the screen is pulled, it is found that the cache is not enough, and new data has to be reloaded, resulting in the cache of the screen data being calculated twice, and running to calculate again when sliding halfway, which will cause the screen to scroll unsmoothly. When the height of the data in the list is too high, the screen will freeze due to too much cache content. However, in actual applications, the data in the list is often of unequal height. If there are too many data that cannot be scrolled smoothly or freezes, it will inevitably bring a poor user experience. Summary of the invention

[0003] The technical problem to be solved by the present invention is to provide a rendering acceleration method, device, equipment and medium for an H5 list. Before the H5 list is rendered, the data height is accumulated one by one to obtain the number of screen virtual cache items, so that the rendering can be optimized, thereby solving the problems of uneven screen scrolling and screen freeze caused by the content height problem inside the list.

[0004] In a first aspect, the present invention provides a method for accelerating the rendering of an H5 list, comprising the following steps:

[0005] S1. Get the screen height through the API when the page is initialized, and use the API to get the virtual DOM height value of each data before the list is rendered;

[0006] S2, by means of a cyclic data height accumulation method, the actual data height and the actual number of data items of the first screen and the second screen are obtained in turn and recorded, and the data of the first screen and the second screen are put into a virtual cache;

[0007] The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen;

[0008] S3, when the page triggers the pull-up scroll, the data of the subsequent screens are loaded into the virtual cache one by one through the cyclic data height accumulation method, and each time a screen of data is loaded, the actual number of data items and the value of the end data items of the screen data are recorded, but each time loading is performed, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped;

[0009] When the page triggers a drop-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items on each screen and the value of the end data item. However, each time the data is loaded, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen, and the next screen. When the current screen is the second screen, the data of the first screen is loaded and the loading stops.

[0010] In a second aspect, the present invention provides a rendering acceleration device for an H5 list, comprising:

[0011] The API height acquisition module is used to obtain the screen height when the page is initialized, and obtain the virtual DOM height value of each data before the list is rendered;

[0012] The two-screen data acquisition module is used to obtain the actual data height and the actual number of data items of the first screen and the second screen in turn through a cyclic data height accumulation method and record them, and put the data of the first screen and the second screen into a virtual cache;

[0013] The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen;

[0014] The third screen data acquisition module is used to load the data of subsequent screens into the virtual cache one by one through the cyclic data height accumulation method when the page triggers the pull-up scroll, and record the actual number of data items and the value of the end data items of each screen data loaded, but each time loading only retains three screens of data in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped; or

[0015] When the page triggers a drop-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items on each screen and the value of the end data item. However, each time loading, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen. When the current screen is the second screen, the data of the first screen is loaded and the loading is stopped.

[0016] In a third aspect, the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0017] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.

[0018] One or more technical solutions provided in the embodiments of the present invention have at least the following technical effects or advantages: before the H5 list is rendered, the virtual DOM height of the data is accumulated one by one through the cyclic data height accumulation method to match the amount of data displayed on the screen, and only the data of the current screen and the previous and next screens (two screens of data are loaded for the first screen or the last screen) are loaded and saved in the cache, so that the data in the cache can just cope with the screen display of pull-up scrolling and pull-down scrolling, thereby minimizing the amount of data stored in the cache, and more space can be used for cumulative calculation, so that the screen freeze problem caused by too much cache content will not be caused, and the rendering can be optimized. Due to the use of the cyclic data height accumulation method, there is no need to forcibly limit the height of the data, which solves the problem of uneven screen scrolling caused by the content height problem inside the list.

[0019] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The present invention will be further described below in conjunction with embodiments with reference to the accompanying drawings.

[0021] Figure 1 is a flow chart of the method in Embodiment 1 of the present invention;

[0022] Figure 2 This is a schematic diagram of data loading status when a page triggers pull-up scrolling according to an embodiment of the present invention;

[0023] Figure 3 This is a schematic diagram of data loading status when a page triggers a pull-down scroll according to an embodiment of the present invention;

[0024] Figure 4 It is a structural schematic diagram of the device in the second embodiment of the present invention;

[0025] Figure 5 This is a schematic diagram of the structure of an electronic device in Embodiment 3 of the present invention;

[0026] Figure 6 Schematic diagram of the structure of the medium in the fourth embodiment of the present invention. DETAILED DESCRIPTION

[0027] The embodiments of the present application provide a method, apparatus, device and medium for accelerating the rendering of an H5 list. Before the H5 list is rendered, the number of screen virtual cache items is obtained by accumulating the data heights one by one, so that the rendering can be optimized, thereby solving the problems of uneven screen scrolling and screen freeze caused by the content height problem inside the list.

[0028] The technical solution in the embodiment of the present application has the following overall idea: before the H5 list is rendered, the virtual DOM height of the data is accumulated one by one through the cyclic data height accumulation method to match the amount of data displayed on the screen, and only the data of the current screen and the previous and next screens (two screens of data are loaded for the first or last screen) are loaded and saved in the cache, so that the data in the cache can just cope with the screen display of pull-up scrolling and pull-down scrolling, thereby minimizing the amount of data stored in the cache, and more space can be used for cumulative calculation, so that the screen freeze problem caused by too much cache content will not be caused, and the rendering can be optimized. Due to the use of the cyclic data height accumulation method, there is no need to forcibly limit the height of the data, which solves the problem of uneven screen scrolling caused by the content height problem inside the list.

[0029] Embodiment 1

[0030] like Figure 1 As shown, this embodiment provides a method for accelerating the rendering of an H5 list, comprising the following steps:

[0031] S1. When the page is initialized, the screen height is obtained through the API, and before the list is rendered, the virtual DOM height value of each data is obtained through the API; the data displayed on the page is divided into segments, and each paragraph of text, picture, etc. is a piece of data.

[0032] S2, by means of a cyclic data height accumulation method, the actual data height and the actual number of data items of the first screen and the second screen are obtained in turn and recorded, and the data of the first screen and the second screen are put into a virtual cache;

[0033] The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen;

[0034] S3, when the page triggers the pull-up scroll, the data of the subsequent screens are loaded into the virtual cache one by one through the cyclic data height accumulation method, and each time a screen of data is loaded, the actual number of data items and the value of the end data items of the screen data are recorded, but each time loading is performed, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped;

[0035] When the page triggers a drop-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items on each screen and the value of the end data item. However, each time the data is loaded, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen, and the next screen. When the current screen is the second screen, the data of the first screen is loaded and the loading stops.

[0036] Among them, as a better or more specific implementation of this embodiment:

[0037] In the step S2 and the step S3, when obtaining the virtual DOM height value of each data, the virtual DOM heights of all data are put into the first list in order, and the virtual DOM height of each data can be referred to by the sequence number of the first list, so that when the virtual DOM height values ​​are accumulated, the actual number of data items in one screen and the value of the item of the end data can be easily corresponded.

[0038] In the step S2 and the step S3, each time the actual data height and the actual number of data items of one screen are obtained, the actual data height, the actual number of data items and the item value of the end data of one screen are stored in the second list.

[0039] For example, Figure 2 As shown, in the initial state, the actual data height and the actual number of data items from the first screen to the second screen are obtained by cyclic data height accumulation method. The specific process is as follows:

[0040] (1) Accumulate the virtual DOM height value of each data item one by one in sequence, and stop accumulating when the accumulated value is greater than or equal to the screen height, obtain the actual data height and the actual number of data items of the first screen, and record the item value of the end data of the first screen, and put the actual data height, the actual number of data items and the item value of the end data of the first screen into the second list;

[0041] (2) Obtain the value of the end data of the first screen in the second list, take the next data of the end data of the first screen as the starting point, continue to accumulate the virtual DOM height value of each data one by one in sequence, and stop accumulating when the accumulated value is greater than or equal to the screen height, obtain the actual data height and actual number of data of the second screen, and record the value of the end data of the second screen, and put the actual data height, actual number of data and the value of the end data of the second screen into the second list;

[0042] Then determine whether the page is pulled. If the second screen is in the visible area when the page is pulled and scrolled, use the same cyclic data height accumulation method to get the height and number of the third screen, and also record it in the second list, and put the third screen into the cache. The specific process is:

[0043] (3) Obtain the value of the last data item of the second screen in the second list, and take the next data item of the last data item of the second screen as the starting point, and continue to accumulate the virtual DOM height value of each data item in sequence downward, and stop accumulating when the accumulated value is greater than or equal to the screen height, and obtain the actual data height and actual number of data items of the third screen, and record the value of the last data item of the third screen, and put the actual data height, actual number of data items and the value of the last data item of the third screen into the second list, and also put the data of the third screen into the cache.

[0044] The same principle applies. When the page is the second screen and is pulled up and scrolled to the third screen, when the third screen is in the visible area, the same cyclic data height accumulation method is used to calculate the actual data height and the actual number of data items on the fourth screen, and the fourth screen data is put into the cache. At this time, the first screen that cannot be seen is synchronously cleared from the cache, and only one screen of data before and after the current screen is retained, and so on.

[0045] For example Figure 3 As shown, if the page is the third screen and is pulled down to scroll and load historical data, the second screen is placed in the visible area. Conversely, the actual data height and the actual number of data items of the first screen are obtained from the second list, and the data of the first screen is added to the cache. At this time, the invisible first screen is synchronously cleared from the cache, and only one screen of data before and after the current screen is retained, and so on.

[0046] For example, when the previous page is the mth screen (2≤m≤n, n is the total number of screens of data), the virtual cache retains the data of the m-1th screen, the mth screen, and the m+1th screen;

[0047] When the page triggers the pull-up scrolling from the mth screen, so that the m+1th screen enters the visible area, the actual data height and the actual number of data items of the m+2th screen are obtained through the cyclic data height accumulation method, and the data of the m+2th screen is also put into the cache. Synchronously, the data of the m-1th screen is cleared from the cache, so that the three screens of the mth screen, the m+1th screen, and the m+2th screen are retained;

[0048] When the page triggers a pull-down scroll from the mth screen, making the historical m-1th screen enter the visible area, the data of the historical m-2th screen is also put into the cache according to the actual number of data items and the value of the end data items recorded on each screen. At the same time, the data of the m+1th screen is cleared from the cache, thereby retaining the three screens of m-2th screen, m-1th screen, and mth screen.

[0049] Based on the same inventive concept, the present application also provides a device corresponding to the method in Example 1, see Example 2 for details.

[0050] Embodiment 2

[0051] like Figure 4As shown, in this embodiment, a rendering acceleration device for an H5 list is provided, including:

[0052] The API height acquisition module is used to obtain the screen height when the page is initialized, and obtain the virtual DOM height value of each data before the list is rendered;

[0053] The two-screen data acquisition module is used to obtain the actual data height and the actual number of data items of the first screen and the second screen in turn through a cyclic data height accumulation method and record them, and put the data of the first screen and the second screen into a virtual cache;

[0054] The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen;

[0055] The third screen data acquisition module is used to load the data of subsequent screens into the virtual cache one by one through the cyclic data height accumulation method when the page triggers the pull-up scroll, and record the actual number of data items and the value of the end data items of each screen data loaded, but each time loading only retains three screens of data in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped; or

[0056] When the page triggers a drop-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items on each screen and the value of the end data item. However, each time loading, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen. When the current screen is the second screen, the data of the first screen is loaded and the loading is stopped.

[0057] The third screen data acquisition module is used to obtain the actual data height and the actual number of data items of the m+2th screen by the cyclic data height accumulation method when the page triggers the pull-up scroll from the mth screen and the m+1th screen enters the visible area, and also put the data of the m+2th screen into the cache, and synchronously clear the data of the m-1th screen from the cache, so as to retain the three screens of the mth screen, the m+1th screen, and the m+2th screen; or

[0058] When the page triggers a pull-down scroll, making the m-1th screen of the history enter the visible area, the data of the m-2th screen of the history is also put into the cache according to the actual number of data items and the value of the end data items of each screen recorded, and synchronously, the data of the m+2th screen is cleared from the cache, thereby retaining the three screens of the m-1th screen, the mth screen, and the m+1th screen.

[0059] Among them, as a better or more specific implementation of this embodiment:

[0060] When obtaining the virtual DOM height value of each data, the API height acquisition module also puts the virtual DOM heights of all data in the first list in order, and the virtual DOM height of each data can be referred to by the sequence number of the first list.

[0061] In the two-screen data acquisition module and the third-screen data acquisition module, each time the actual data height and the actual data number of a screen are obtained, the actual data height, the actual data number and the value of the end data of a screen are saved in the second list.

[0062] For example, Figure 2 As shown, in the initial state, the actual data height and the actual number of data items from the first screen to the second screen are obtained by cyclic data height accumulation method. The specific process is as follows:

[0063] (1) Accumulate the virtual DOM height value of each data item one by one in sequence, and stop accumulating when the accumulated value is greater than or equal to the screen height, obtain the actual data height and the actual number of data items of the first screen, and record the item value of the end data of the first screen, and put the actual data height, the actual number of data items and the item value of the end data of the first screen into the second list;

[0064] (2) Obtain the value of the end data of the first screen in the second list, and take the next data of the end data of the first screen as the starting point, and continue to accumulate the virtual DOM height value of each data one by one in sequence downward. When the accumulated value is greater than or equal to the screen height, stop accumulating, and obtain the actual data height and actual number of data of the second screen, and record the value of the end data of the second screen, and put the actual data height, actual number of data and the value of the end data of the second screen into the first list.

[0065] Then determine whether the page is pulled. If the second screen is in the visible area when the page is pulled and scrolled, use the same cyclic data height accumulation method to get the height and number of the third screen, and also record it in the second list, and put the third screen into the cache. The specific process is:

[0066] (3) Obtain the value of the last data item of the second screen in the second list, and take the next data item of the last data item of the second screen as the starting point, and continue to accumulate the virtual DOM height value of each data item in sequence downward, and stop accumulating when the accumulated value is greater than or equal to the screen height, and obtain the actual data height and actual number of data items of the third screen, and record the value of the last data item of the third screen, and put the actual data height, actual number of data items and the value of the last data item of the third screen into the second list, and also put the data of the third screen into the cache.

[0067] The same principle applies. When the page is the second screen and is pulled up and scrolled to the third screen, when the third screen is in the visible area, the same cyclic data height accumulation method is used to calculate the actual data height and the actual number of data items on the fourth screen, and the fourth screen data is put into the cache. At this time, the first screen that cannot be seen is synchronously cleared from the cache, and only one screen of data before and after the current screen is retained, and so on.

[0068] For example Figure 3 As shown, if the page is the third screen and is pulled down to scroll and load historical data, the second screen is placed in the visible area. Conversely, the actual data height and the actual number of data items of the first screen are obtained from the second list, and the data of the first screen is added to the cache. At this time, the invisible first screen is synchronously cleared from the cache, and only one screen of data before and after the current screen is retained, and so on.

[0069] For example, when the previous page is the mth screen (2≤m≤n, n is the total number of screens of data), the virtual cache retains the data of the m-1th screen, the mth screen, and the m+1th screen;

[0070] When the page triggers the pull-up scrolling from the mth screen, so that the m+1th screen enters the visible area, the actual data height and the actual number of data items of the m+2th screen are obtained through the cyclic data height accumulation method, and the data of the m+2th screen is also put into the cache. Synchronously, the data of the m-1th screen is cleared from the cache, so that the three screens of the mth screen, the m+1th screen, and the m+2th screen are retained;

[0071] When the page triggers a pull-down scroll from the mth screen, making the historical m-1th screen enter the visible area, the data of the historical m-2th screen is also put into the cache according to the actual number of data items and the value of the end data items recorded on each screen. At the same time, the data of the m+1th screen is cleared from the cache, thereby retaining the three screens of m-2th screen, m-1th screen, and mth screen.

[0072] Since the device introduced in the second embodiment of the present invention is a device used to implement the method of the first embodiment of the present invention, those skilled in the art can understand the specific structure and deformation of the device based on the method introduced in the first embodiment of the present invention, so it is not described here in detail. All devices used in the method of the first embodiment of the present invention belong to the scope of protection of the present invention.

[0073] Based on the same inventive concept, the present application provides an electronic device embodiment corresponding to the first embodiment, see the third embodiment for details.

[0074] Embodiment 3

[0075] This embodiment provides an electronic device, such as Figure 5As shown, it includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, any implementation method in the first embodiment can be implemented.

[0076] Since the electronic device introduced in this embodiment is a device used to implement the method in the first embodiment of the present application, based on the method introduced in the first embodiment of the present application, a person skilled in the art can understand the specific implementation of the electronic device of the present embodiment and its various variations, so how the electronic device implements the method in the embodiment of the present application is not described in detail here. As long as a person skilled in the art implements the device used by the method in the embodiment of the present application, it belongs to the scope of protection of the present application.

[0077] Based on the same inventive concept, the present application provides a storage medium corresponding to the first embodiment, see the fourth embodiment for details.

[0078] Embodiment 4

[0079] This embodiment provides a computer-readable storage medium, such as Figure 6 As shown, a computer program is stored thereon, and when the computer program is executed by a processor, any implementation method in Example 1 can be implemented.

[0080] The technical solution provided in the embodiments of the present application has at least the following technical effects or advantages: before the H5 list is rendered, the virtual DOM height of the data is accumulated one by one through the cyclic data height accumulation method to match the amount of data displayed on the screen, and only the data of the current screen and the previous and next screens (the first screen or the last screen loads two screens of data) are loaded and saved in the cache, so that the data in the cache can just cope with the screen display of pull-up scrolling and pull-down scrolling, thereby minimizing the amount of data stored in the cache, and more space can be used for cumulative calculation, so that the screen freeze problem caused by too much cache content will not be caused, and the rendering can be optimized. Due to the use of the cyclic data height accumulation method, there is no need to forcibly limit the height of the data, which solves the problem of uneven screen scrolling caused by the content height problem inside the list.

[0081] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, devices or systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0082] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0083] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0084] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0085] Although the specific implementation modes of the present invention are described above, those skilled in the art should understand that the specific implementation modes described are only illustrative and are not intended to limit the scope of the present invention. Equivalent modifications and changes made by those skilled in the art in accordance with the spirit of the present invention should be included in the scope of protection of the claims of the present invention.

Claims

1. A method for accelerating the rendering of an H5 list, characterized in that: The steps include: S1. Get the screen height through the API when the page is initialized, and use the API to get the virtual DOM height value of each data before the list is rendered; S2, by means of a cyclic data height accumulation method, the actual data height and the actual number of data items of the first screen and the second screen are obtained in turn and recorded, and the data of the first screen and the second screen are put into a virtual cache; The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen; S3, when the page triggers the pull-up scroll, the data of the subsequent screens are loaded into the virtual cache one by one through the cyclic data height accumulation method, and each time a screen of data is loaded, the actual number of data items and the value of the end data items of the screen data are recorded, but each time loading is performed, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped; When the page triggers the pull-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items and the value of the end data items recorded on each screen. However, each time the data is loaded, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen and the next screen. When the current screen is the second screen, the data of the first screen is loaded and the loading stops. In the step S2 and step S3, when obtaining the virtual DOM height value of each data, the virtual DOM heights of all data are put into the first list in order, and the virtual DOM height of each data can be referred to by the sequence number of the first list; In the step S2 and the step S3, when the actual data height and the actual number of data items of one screen are obtained, the actual data height, the actual number of data items and the item value of the end data of one screen are stored in the second list; The specific process of obtaining the actual data height and the actual number of data items from the first screen to the second screen through the cyclic data height accumulation method is as follows: (1) Accumulate the virtual DOM height value of each data item one by one in sequence, and stop accumulating when the accumulated value is greater than or equal to the screen height, obtain the actual data height and the actual number of data items of the first screen, and record the item value of the end data of the first screen, and put the actual data height, the actual number of data items and the item value of the end data of the first screen into the second list; (2) Obtain the value of the last data item of the first screen in the second list, and take the next data item of the last data item of the first screen as the starting point, and continue to accumulate the virtual DOM height value of each data item in sequence downward, and stop accumulating when the accumulated value is greater than or equal to the screen height, and obtain the actual data height and actual number of data items of the second screen, and record the value of the last data item of the second screen, and put the actual data height, actual number of data items and the value of the last data item of the second screen into the second list.

2. A rendering acceleration device for an H5 list, characterized in that: include: The API height acquisition module is used to obtain the screen height when the page is initialized, and obtain the virtual DOM height value of each data before the list is rendered; The two-screen data acquisition module is used to obtain the actual data height and the actual number of data items of the first screen and the second screen in turn through a cyclic data height accumulation method and record them, and put the data of the first screen and the second screen into a virtual cache; The cyclic data height accumulation method is to accumulate the virtual DOM height value of each data in a cyclic manner, and stop accumulating when the accumulated value is greater than or equal to the screen height, so as to obtain the actual data height and the actual number of data items of one screen; The third screen data acquisition module is used to load the data of subsequent screens into the virtual cache one by one through the cyclic data height accumulation method when the page triggers the pull-up scroll, and record the actual number of data items and the value of the end data items of each screen data loaded, but each time loading only retains three screens of data in the virtual cache, namely the data of the current screen, the previous screen and the next screen, until the current screen is the second to last screen, the last screen of data is loaded, and then the loading is stopped; or When the page triggers a drop-down scroll, the historical data is loaded into the virtual cache screen by screen according to the actual number of data items and the value of the end data items recorded on each screen. However, each time the data is loaded, only three screens of data are retained in the virtual cache, namely the data of the current screen, the previous screen, and the next screen. When the current screen is the second screen, the data of the first screen is loaded, and then the loading stops; When obtaining the virtual DOM height value of each data, the API height acquisition module also puts the virtual DOM heights of all data in a first list in order, so that the virtual DOM height of each data can be referred to by the sequence number of the first list; In the two-screen data acquisition module and the third-screen data acquisition module, when the actual data height and the actual number of data items of one screen are obtained, the actual data height, the actual number of data items and the item value of the end data of one screen are stored in the second list; The specific process of the two-screen data acquisition module obtaining the actual data height and the actual number of data items of the first screen and the second screen is as follows: (1) Accumulate the virtual DOM height value of each data item one by one in sequence, and stop accumulating when the accumulated value is greater than or equal to the screen height, obtain the actual data height and the actual number of data items of the first screen, and record the item value of the end data of the first screen, and put the actual data height, the actual number of data items and the item value of the end data of the first screen into the second list; (2) Obtain the value of the last data item of the first screen in the second list, and take the next data item of the last data item of the first screen as the starting point, and continue to accumulate the virtual DOM height value of each data item in sequence downward, and stop accumulating when the accumulated value is greater than or equal to the screen height, and obtain the actual data height and actual number of data items of the second screen, and record the value of the last data item of the second screen, and put the actual data height, actual number of data items and the value of the last data item of the second screen into the second list.

3. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to claim 1 is implemented.

4. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to claim 1 is implemented.

Images