H5 page display method, device, equipment and storage medium

Abstract

The present invention relates to the field of web page design, and discloses an H5 page display method, device, equipment and storage medium for improving the fluency of H5 page display. The H5 page display method comprises: according to the preset nodes in the H5 page, a long list of preset height is set to obtain an initial long list page; based on a preset rendering component, data rendering is performed on the initial long list page to obtain a target long list page; when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain an offset; it is determined whether the offset is greater than a preset offset threshold; if the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display.

Description

Technical Field

[0001] The present invention relates to the field of web page design, and in particular to an H5 page display method, device, equipment and storage medium. Background Art

[0002] With the rapid development of the Internet industry, information display has become more diverse, and it has become the mainstream to present data and information to users through list pages and detail pages. Among them, the content of list pages is rich and varied, including text, pictures, and even videos. For some application pages with complex list pages and large amounts of data, when users quickly slide the list page to browse, performance issues such as list page freezes and other unsmooth sliding may occur, affecting the user experience.

[0003] Long lists are a common display format in apps, web pages, PCs, and mobile devices. When users quickly scroll through pages, the existing technology causes noticeable page display freezes due to untimely page rendering. Summary of the invention

[0004] The present invention provides an H5 page display method, device, equipment and storage medium, which are used to improve the fluency of H5 page display.

[0005] A first aspect of the present invention provides an H5 page display method, which includes: according to preset nodes in the H5 page, setting a long list of preset height to obtain an initial long list page; based on a preset rendering component, rendering data on the initial long list page to obtain a target long list page; when the target long list page starts to scroll, obtaining the vertical scrolling distance of the target long list page by monitoring element scrolling events to obtain an offset; judging whether the offset is greater than a preset offset threshold; if the offset is greater than the offset threshold, rendering the H5 page twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and using the page to be displayed at the bottom of the page for page display.

[0006] Optionally, in a first implementation method of the first aspect of the present invention, the long list of preset height is set according to the preset node in the H5 page to obtain the initial long list page, including: obtaining the preset node in the H5 page, setting a fixed-length list in the node, the fixed-length list sequentially including a list above the visible area, a list in the visible area, and a list below the visible area; determining the list above the visible area, the list in the visible area, and the list below the visible area as the initial long list page.

[0007] Optionally, in a second implementation method of the first aspect of the present invention, the data rendering of the initial long list page based on the preset rendering component to obtain the target long list page includes: obtaining the entries in the initial long list page, and obtaining the target data to be rendered; calling the preset rendering component, and filling the entries with data based on the target data to obtain the target long list page.

[0008] Optionally, in a third implementation method of the first aspect of the present invention, after the preset rendering component performs data rendering on the initial long list page to obtain the target long list page, when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by listening to the element scrolling event, and before obtaining the offset, it also includes: calculating the data rendering rate of the initial long list page; and calling a preset callback function to control the data rendering rate.

[0009] Optionally, in a fourth implementation method of the first aspect of the present invention, when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring element scrolling events, and the offset is obtained, including: when the target long list page starts to scroll, setting a page top monitoring node and a page bottom monitoring node above and below the page of the target long list page respectively; using a preset Intersection Observer object to add monitoring element scrolling events to the page top monitoring node and the page bottom monitoring node; obtaining the vertical distance coordinate of the target long list page through the monitoring element scrolling event, and determining the vertical distance coordinate as the offset to obtain the offset.

[0010] Optionally, in a fifth implementation manner of the first aspect of the present invention, the method further includes: if the offset is less than or equal to a preset offset threshold, using the target long list page for page display.

[0011] Optionally, in a sixth implementation method of the first aspect of the present invention, if the offset is greater than the offset threshold, the H5 page is rendered a second time from the bottom of the H5 page to obtain the page to be displayed at the bottom of the page, and after the page is displayed using the page to be displayed at the bottom of the page, it also includes: calling a preset virtual dom to recycle the list of the target long list page after the page is displayed.

[0012] The second aspect of the present invention provides an H5 page display device, which includes: a list setting module, which is used to set a long list of preset height according to preset nodes in the H5 page to obtain an initial long list page; a rendering module, which is used to render data on the initial long list page based on a preset rendering component to obtain a target long list page; a monitoring module, which is used to obtain the vertical scrolling distance of the target long list page by monitoring element scrolling events when the target long list page starts to scroll, and obtain an offset; a judgment module, which is used to judge whether the offset is greater than a preset offset threshold; a display module, which is used to perform a secondary rendering on the H5 page from the bottom of the H5 page if the offset is greater than the offset threshold to obtain a page to be displayed at the bottom of the page, and use the page to be displayed at the bottom of the page for page display.

[0013] Optionally, in a first implementation method of the second aspect of the present invention, the list setting module is specifically used to: obtain a preset node in the H5 page, set a fixed-length list in the node, and the fixed-length list includes a list above the visible area, a list in the visible area, and a list below the visible area in sequence; determine the list above the visible area, the list in the visible area, and the list below the visible area as the initial long list page.

[0014] Optionally, in a second implementation method of the second aspect of the present invention, the rendering module is specifically used to: obtain the entries in the initial long list page, and obtain the target data to be rendered; call a preset rendering component, and fill the entries with data based on the target data to obtain the target long list page.

[0015] Optionally, in a third implementation of the second aspect of the present invention, the H5 page display device further includes: a control module, used to calculate the data rendering rate of the initial long list page; and call a preset callback function to control the data rendering rate.

[0016] Optionally, in a fourth implementation method of the second aspect of the present invention, the monitoring module is specifically used to: when the target long list page starts to scroll, set a page top monitoring node and a page bottom monitoring node respectively above and below the target long list page; use a preset Intersection Observer object to add a monitoring element scrolling event to the page top monitoring node and the page bottom monitoring node; obtain the vertical distance coordinate of the target long list page through the monitoring element scrolling event, and determine the vertical distance coordinate as an offset to obtain the offset.

[0017] Optionally, in a fifth implementation of the second aspect of the present invention, the H5 page display device further includes: a second display module, configured to use the target long list page for page display if the offset is less than or equal to a preset offset threshold.

[0018] Optionally, in a sixth implementation of the second aspect of the present invention, the H5 page display device further includes: a list recycling module, which is used to call a preset virtual DOM to perform list recycling on the target long list page after the page is displayed.

[0019] The third aspect of the present invention provides an H5 page display device, comprising: a memory and at least one processor, wherein the memory stores instructions; the at least one processor calls the instructions in the memory so that the H5 page display device executes the above-mentioned H5 page display method.

[0020] A fourth aspect of the present invention provides a computer-readable storage medium, in which instructions are stored. When the computer-readable storage medium is run on a computer, the computer executes the above-mentioned H5 page display method.

[0021] In the technical solution provided by the present invention, a long list of preset height is set according to the preset nodes in the H5 page to obtain an initial long list page; based on the preset rendering component, data is rendered on the initial long list page to obtain a target long list page; when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain an offset; it is determined whether the offset is greater than a preset offset threshold; if the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display. The present invention can render the page to be displayed at the bottom of the page in advance when the offset is large, thereby improving the fluency of the H5 page display. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 This is a schematic diagram of a first embodiment of the H5 page display method in an embodiment of the present invention;

[0023] Figure 2 This is a schematic diagram of a second embodiment of the H5 page display method in an embodiment of the present invention;

[0024] Figure 3 This is a schematic diagram of a first embodiment of an H5 page display device in an embodiment of the present invention;

[0025] Figure 4 This is a schematic diagram of a second embodiment of the H5 page display device in an embodiment of the present invention;

[0026] Figure 5 It is a schematic diagram of an embodiment of an H5 page display device in an embodiment of the present invention. DETAILED DESCRIPTION

[0027] Embodiments of the present invention provide an H5 page display method, apparatus, device and storage medium for improving the fluency of H5 page display.

[0028] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including" or "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0029] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 The first embodiment of the H5 page display method in the embodiment of the present invention includes:

[0030] 101. According to the preset nodes in the H5 page, a long list of preset height is set to obtain an initial long list page;

[0031] It is understandable that the execution subject of the present invention may be an H5 page display device, or a terminal or a server, which is not limited here. The embodiment of the present invention is described by taking the server as the execution subject as an example.

[0032] The server sets a long list of preset height in the node according to the preset node in the H5 page. The preset height is set to 3 to 4 times the height of the H5 page. For example, the row height is set to 50 pixels (px) per row. The pixel here refers to the pixel of the mobile terminal. The pixel changes with the resolution of the mobile phone. The H5 page has a total of 1,000 rows, so the H5 page height is 50,000. The long list is set to 3 times the height of the H5 page, and the long list height is set to 150,000, and the initial long list page height is 150,000. Furthermore, the long list refers to the need to display a large number of structured data lists in front-end development, such as: city lists, vehicle brand lists, credit card brand lists, etc.

[0033] 102. Based on the preset rendering component, data rendering is performed on the initial long list page to obtain the target long list page;

[0034] The server obtains the entries in the initial long list page and obtains the target data to be rendered entered by the user, calls the preset rendering component, and writes the target data into the entries in the initial long list page for data filling, marks the rendering range corresponding to the target data, obtains the node height according to the node rendered by the rendering function, and then calculates the total height of the initial long list page, renders the target data through the rendering component, and obtains the target long list page.

[0035] 103. When the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain the offset;

[0036] When the target long list page starts to scroll, the server sets the page top listening node and the page bottom listening node respectively at the top and bottom of the target long list page, and uses the preset Intersection Observer object to add the listening element scroll event to the page top listening node and the page bottom listening node. By listening to the element scroll event, the vertical distance coordinate of the target long list page is obtained, and the vertical distance coordinate is determined as the offset. The element scroll listening event is used for callback when sliding the target long list page. There is a sliding y value in the element scroll listening event, and the y value represents the offset of the sliding distance above the screen during the sliding process.

[0037] 104. Determine whether the offset is greater than a preset offset threshold;

[0038] The server determines whether the offset is greater than a preset offset threshold. For example, when the offset is 5 and the offset threshold is 4, the offset is greater than the offset threshold; when the offset is 3 and the offset threshold is 4, the offset is less than or equal to the offset threshold.

[0039] 105. If the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain the page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display.

[0040] When the offset is greater than the offset threshold, the server assumes that the user wants to browse the bottom of the page, and then performs reverse rendering from the bottom of the H5 page during the secondary rendering. Reverse rendering is to perform secondary rendering from the bottom of the H5 page to the top of the page, and obtain the page to be displayed at the bottom of the page. The page size of the page to be displayed at the bottom of the page is three times the size of the visible area of ​​the H5 page, and the page to be displayed at the bottom of the page is used for page display. When the offset is less than or equal to the offset threshold, the server considers that the user browses the page in a conventional way. At this time, the target long list page is used for page display.

[0041] In an embodiment of the present invention, a long list of preset height is set according to a preset node in an H5 page to obtain an initial long list page; based on a preset rendering component, data is rendered on the initial long list page to obtain a target long list page; when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain an offset; it is determined whether the offset is greater than a preset offset threshold; if the offset is greater than the offset threshold, the page is rendered twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and the page is displayed using the page to be displayed at the bottom of the page. The present invention can render the page to be displayed at the bottom of the page in advance when the offset is large, thereby improving the fluency of the H5 page display.

[0042] See also Figure 2 The second embodiment of the H5 page display method in the embodiment of the present invention includes:

[0043] 201. According to the preset nodes in the H5 page, a long list of preset height is set to obtain an initial long list page;

[0044] The server sets a long list of preset height in the node according to the preset node in the H5 page. The preset height is set to 3 to 4 times the height of the H5 page. For example, the row height is set to 50 pixels (px) per row. The pixel here refers to the pixel of the mobile terminal. The pixel changes with the resolution of the mobile phone. The H5 page has a total of 1,000 rows, so the H5 page height is 50,000. The long list is set to 3 times the height of the H5 page, and the long list height is set to 150,000, and the initial long list page height is 150,000. Furthermore, the long list refers to the need to display a large number of structured data lists in front-end development, such as: city lists, vehicle brand lists, credit card brand lists, etc.

[0045] Optionally, step 201 includes: obtaining a preset node in the H5 page, setting a fixed-length list in the node, the fixed-length list sequentially including a list above the visible area, a list in the visible area, and a list below the visible area; determining the list above the visible area, the list in the visible area, and the list below the visible area as the initial long list page.

[0046] The server obtains the preset nodes in the H5 page, and the nodes include: nodes above the visible area, nodes in the visible area, nodes below the visible area, a list above the visible area equal to the height of the visible area is set at the node above the visible area, a list of the visible area equal to the height of the visible area is set at the node in the visible area, and a list above the visible area equal to the height of the visible area is set at the node below the visible area. For example: when the height of the visible area of ​​the H5 page is 50000, 50000 is composed of 1000 rows with a row height of 50 pixels (pixel, px), the list height of the list above the visible area is set to 50000, the list height of the list in the visible area is set to 50000, and the list height of the list below the visible area is set to 50000, and the height of the initial long list page is 150000.

[0047] 202. Based on a preset rendering component, data rendering is performed on the initial long list page to obtain a target long list page;

[0048] The server obtains the entries in the initial long list page and obtains the target data to be rendered entered by the user, calls the preset rendering component, and writes the target data into the entries in the initial long list page for data filling, marks the rendering range corresponding to the target data, obtains the node height according to the node rendered by the rendering function, and then calculates the total height of the initial long list page, renders the target data through the rendering component, and obtains the target long list page.

[0049] Optionally, step 202 includes: obtaining entries in the initial long list page, and obtaining target data to be rendered; calling a preset rendering component, and filling data into the entries based on the target data to obtain a target long list page.

[0050] The server obtains the entries in the initial long list page, and calculates the number and range of entries in the initial long list page based on the size of the initial long list page and the average height of the preset list entries. When rendering the initial long list page, the target data to be rendered is obtained based on the average height of the list entries and the entries in the initial long list page. The server constructs a rendering tree, calculates the position and style of the entries in the initial long list page, and then renders the page according to the rendering tree. For example: limit the target data to be rendered to the initial long list page, give the initial long list page a fixed height, and then the target data will be displayed on the initial long list page. It is necessary to render an appropriate number of nodes in the initial long list page. For example, if the initial long list page has a height of 500 and each entry is 50, then rendering 10 entries can fill the initial long list page and obtain the target long list page.

[0051] Optionally, after step 202 and before step 203, the method further includes: calculating the data rendering rate of the initial long list page; and calling a preset callback function to control the data rendering rate.

[0052] The server fills the items with data based on the target data, that is, the data rendering rate generated by the time each item is rendered. The server calls the preset callback function based on the data rendering rate obtained. The callback function is requestAnimationFrame(callback). When requestAnimationFrame(callback) is called, the callback is not executed, but the tuple is<handle,callback> Insert to the end of the callback function list and return the handle value. The callback function contains a Boolean flag (cancelled). The initial value of the Boolean flag is failure (false) and is not visible to the outside. The H5 page traverses the callback function list and determines the tuple<handle,callback> The Boolean flag of the callback. If the execution result is false, the callback is executed to control the rate of data rendering.

[0053] 203. When the target long list page starts to scroll, an upper page monitoring node and a lower page monitoring node are respectively set at the upper page and the lower page of the target long list page;

[0054] When the target long list page starts to scroll, the server sets an upper page listening node and a lower page listening node at the top and bottom of the target long list page respectively. By setting an upper page listening node and a lower page listening node at the top and bottom of the target long list page respectively, the user can make the target long list page jump to the listening node position of the target long list page by clicking a button or other click operations.

[0055] 204. Use the preset Intersection Observer object to add a monitoring element scrolling event to the upper monitoring node and the lower monitoring node of the page;

[0056] The server uses the preset Intersection Observer object to add monitoring element scrolling events to the upper and lower monitoring nodes of the page. When the page starts to scroll, the transparency of the top bar increases as the height of the page curl increases. When the page scrolls beyond a certain height, the transparency remains fixed. The server monitors the event behaviors generated by the upper and lower monitoring nodes in the web page, and automatically collects the data generated by the monitoring. For example: if you want to obtain the number of clicks on a certain product, you have to collect the clicked product data in the click event and send out data containing the product name and the click event.

[0057] 205. Obtain the vertical distance coordinate of the target long list page by monitoring the element scrolling event, and determine the vertical distance coordinate as an offset to obtain the offset;

[0058] The server listens to the element scrolling event to obtain the vertical distance coordinate of the scrolling. According to the vertical distance coordinate, we can know which row should be rendered at present. However, if the H5 page scrolls quickly, in order to avoid the flickering effect, we need to pre-render the page in advance. For example, if 10 rows need to be displayed, we can render 10 more rows as a reserve. When the H5 page starts to scroll, according to the set threshold, we will render the extra rows to be displayed in advance again. In addition, in order to avoid the rapid scrolling of the H5 page and the frequent rendering of rows, we use requestAnimationFrame to control the rendering rate, so that the H5 page can scroll smoothly.

[0059] 206. Determine whether the offset is greater than a preset offset threshold;

[0060] The server determines whether the offset is greater than a preset offset threshold. For example, when the offset is 5 and the offset threshold is 4, the offset is greater than the offset threshold; when the offset is 3 and the offset threshold is 4, the offset is less than or equal to the offset threshold.

[0061] Optionally, after step 206, the method further includes: if the offset is less than or equal to a preset offset threshold, using the target long list page for page display.

[0062] When the offset is less than or equal to the offset threshold, the server uses the target long list page for page display, specifically: obtain the size of the H5 page, and calculate the height of the list item corresponding to the target long list page according to the size, obtain the items in the initial long list page, calculate the number of items in the initial long list page according to the size of the initial long list page and the average height of the preset list items, call the preset life cycle function, perform a height information callback for the offset and the list item height, and calculate the actual rendering height of the target long list page to obtain the actual rendering height, and call the preset life cycle function. The life cycle function, for example, componentDidMount life cycle is an event callback when the page comes out, or componentDidUpdate life cycle is a callback when the component data changes. The server performs a height information callback based on the offset and the list item height, and calculates the actual rendering height of the target long list page to obtain the actual rendering height of the target long list page.

[0063] 207. If the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain the page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display.

[0064] When the offset is greater than the offset threshold, the server assumes that the user wants to browse the bottom of the page, so the second rendering is performed in reverse order from the bottom of the H5 page. The reverse rendering is to render from the bottom of the H5 page to the top of the page in sequence to obtain the page to be displayed at the bottom of the page. The page size of the page to be displayed at the bottom of the page is three times the size of the visible area of ​​the H5 page, and the page to be displayed at the bottom of the page is used for page display.

[0065] Optionally, after step 207, the method further includes: calling a preset virtual DOM to recycle the target long list page after the page is displayed.

[0066] The server uses a preset marking tool to mark the rendering range of the target long list page to obtain a marked long list page. Based on the marked long list page, the server calculates the list in the target long list page that is not on the page to obtain the list to be updated; the preset virtual dom is called to recycle the list to be updated. Specifically, a preset marking tool is used to mark the rendering range of the target long list page to obtain a marked long list page. The server uses a preset marking tool. The marking tool includes: startIndex and endIndex. The rendering range of the array data corresponding to the fixed-length list is marked by startIndex and endIndex. When the data length or content changes, it is updated and reinitialized in time. According to the previously marked startIndex and endIndex, totalHeight, padding-top, and padding-bottom are recalculated, and then the dom nodes are updated according to the changed data items in startIndex and endIndex. point, so the entire target long list page is also updated. Based on the marked long list page, the list that is not on the target long list page is calculated to get the list to be updated. The marked long list page is subtracted from the target long list page to get the list that is not on the target long list page, that is, the list to be updated. Through DOM recycling technology, the number of nodes in the long list page can be kept at a low value, which will take up less memory and optimize the system overhead of each re-layout, and there will be no jamming when sliding the page; through the placeholder skeleton diagram, when the user slides the long list page quickly, the corresponding position of the list item can be occupied in the form of a skeleton diagram, which will not cause the sliding jam, thereby improving the performance of the H5 long list page. The server calls the preset virtual DOM to reduce the proportion of the to-be-updated list in the target long list page. The target long list page refers to the cache page that is actually accessed. If the ratio of the target long list page is low, part of the disk bandwidth will be wasted on reading useless caches, and useless list pages will indirectly lead to system memory tension, which may seriously affect the system's operating performance. Therefore, the to-be-updated list is released to achieve the purpose of efficient recycling of the to-be-updated list.

[0067] The H5 page display method in the embodiment of the present invention is described above. The H5 page display device in the embodiment of the present invention is described below. Figure 3 In the embodiment of the present invention, the first embodiment of the H5 page display device includes:

[0068] The list setting module 301 is used to set a long list of preset height according to the preset nodes in the H5 page to obtain an initial long list page;

[0069] A rendering module 302 is used to render data on the initial long list page based on a preset rendering component to obtain a target long list page;

[0070] The monitoring module 303 is used to obtain the vertical scrolling distance of the target long list page by monitoring the element scrolling event when the target long list page starts to scroll, and obtain the offset;

[0071] A judging module 304 is used to judge whether the offset is greater than a preset offset threshold;

[0072] The first display module 305 is used to perform secondary rendering on the H5 page from the bottom of the H5 page if the offset is greater than the offset threshold, to obtain a page to be displayed at the bottom of the page, and use the page to be displayed at the bottom of the page for page display.

[0073] In an embodiment of the present invention, a long list of preset height is set according to a preset node in an H5 page to obtain an initial long list page; based on a preset rendering component, data is rendered on the initial long list page to obtain a target long list page; when the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain an offset; it is determined whether the offset is greater than a preset offset threshold; if the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display. The present invention can render the page to be displayed at the bottom of the page in advance when the offset is large, thereby improving the fluency of the H5 page display.

[0074] See also Figure 4 The second embodiment of the H5 page display device in the embodiment of the present invention includes:

[0075] The list setting module 301 is used to set a long list of preset height according to the preset nodes in the H5 page to obtain an initial long list page;

[0076] A rendering module 302 is used to render data on the initial long list page based on a preset rendering component to obtain a target long list page;

[0077] The monitoring module 303 is used to obtain the vertical scrolling distance of the target long list page by monitoring the element scrolling event when the target long list page starts to scroll, and obtain the offset;

[0078] A judging module 304 is used to judge whether the offset is greater than a preset offset threshold;

[0079] The first display module 305 is used to perform secondary rendering on the H5 page from the bottom of the H5 page if the offset is greater than the offset threshold, to obtain a page to be displayed at the bottom of the page, and use the page to be displayed at the bottom of the page for page display.

[0080] Optionally, the list setting module 301 is specifically used to: obtain a preset node in the H5 page, set a fixed-length list in the node, and the fixed-length list includes a list above the visible area, a list in the visible area, and a list below the visible area in sequence; determine the list above the visible area, the list in the visible area, and the list below the visible area as the initial long list page.

[0081] Optionally, the rendering module 302 is specifically used to: obtain the items in the initial long list page, and obtain the target data to be rendered; call a preset rendering component, and fill the items with data based on the target data to obtain a target long list page.

[0082] Optionally, the H5 page display device further includes: a control module 306, which is used to calculate the data rendering rate of the initial long list page; and call a preset callback function to control the data rendering rate.

[0083] Optionally, the monitoring module 303 is specifically used for: when the target long list page starts to scroll, setting a page top monitoring node and a page bottom monitoring node respectively above and below the target long list page; using a preset Intersection Observer object to add a monitoring element scrolling event to the page top monitoring node and the page bottom monitoring node; obtaining the vertical distance coordinate of the target long list page through the monitoring element scrolling event, and determining the vertical distance coordinate as an offset to obtain the offset.

[0084] Optionally, the H5 page display device further includes: a second display module 307, configured to use the target long list page for page display if the offset is less than or equal to a preset offset threshold.

[0085] Optionally, the H5 page display device further includes: a list recovery module 308, which is used to call a preset virtual DOM to perform list recovery on the target long list page after the page is displayed.

[0086] above Figure 3 and Figure 4 The H5 page display device in the embodiment of the present invention is described in detail from the perspective of modular functional entities. The H5 page display device in the embodiment of the present invention is described in detail from the perspective of hardware processing.

[0087] Figure 5 : is a structural schematic diagram of an H5 page display device provided by an embodiment of the present invention. The H5 page display device 500 may have relatively large differences due to different configurations or performances, and may include one or more processors (central processing units, CPU) 510 (for example, one or more processors) and a memory 520, and one or more storage media 530 (for example, one or more mass storage devices) storing application programs 533 or data 532. Among them, the memory 520 and the storage medium 530 can be short-term storage or permanent storage. The program stored in the storage medium 530 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the H5 page display device 500. Furthermore, the processor 510 can be configured to communicate with the storage medium 530 to execute a series of instruction operations in the storage medium 530 on the H5 page display device 500.

[0088] The H5 page display device 500 may also include one or more power supplies 540, one or more wired or wireless network interfaces 550, one or more input and output interfaces 560, and / or one or more operating systems 531, such as Windows Serve, Mac OS X, Unix, Linux, FreeBSD, etc. Those skilled in the art will appreciate that Figure 5 The H5 page display device structure shown does not constitute a limitation on the H5 page display device, and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

[0089] The present invention also provides an H5 page display device, which includes a memory and a processor. The memory stores computer-readable instructions. When the computer-readable instructions are executed by the processor, the processor executes the steps of the H5 page display method in the above-mentioned embodiments.

[0090] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are executed on a computer, the computer executes the steps of the H5 page display method.

[0091] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0092] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.

[0093] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A H5 page display method, characterized in that: The H5 page display method includes: According to the preset nodes in the H5 page, a long list with a preset height is set to obtain an initial long list page; Based on a preset rendering component, data rendering is performed on the initial long list page to obtain a target long list page; Calculating the data rendering rate of the initial long list page; Calling a preset callback function to control the data rendering rate; When the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event to obtain the offset; Determining whether the offset is greater than a preset offset threshold; If the offset is greater than the offset threshold, the H5 page is rendered twice from the bottom of the H5 page to obtain a page to be displayed at the bottom of the page, and the page to be displayed at the bottom of the page is used for page display; Using a preset marking tool, marking the rendering range of the target long list page to obtain a marked long list page; When the data length or content changes, recalculate the changed data items and update the DOM nodes; Based on the marked long list page, calculate the list that is not in the target long list page to obtain the list to be updated; Subtract the marked long list page from the target long list page to obtain the list that is not on the target long list page, that is, the list to be updated; Call the preset virtual DOM to reduce the proportion of the list to be updated in the target long list page.

2. The H5 page display method according to claim 1, characterized in that: The method of setting a long list of preset height according to the preset nodes in the H5 page to obtain the initial long list page includes: Obtain a preset node in the H5 page, and set a fixed-length list in the node, wherein the fixed-length list includes a list above the visible area, a list in the visible area, and a list below the visible area in sequence; The list above the visible area, the list in the visible area, and the list below the visible area are determined as initial long list pages.

3. The H5 page display method according to claim 1, characterized in that: The step of rendering data on the initial long list page based on a preset rendering component to obtain a target long list page includes: Obtaining the items in the initial long list page, and obtaining the target data to be rendered; A preset rendering component is called, and data is filled into the items based on the target data to obtain a target long list page.

4. The H5 page display method according to claim 1, characterized in that: When the target long list page starts to scroll, the vertical scrolling distance of the target long list page is obtained by monitoring the element scrolling event, and the offset is obtained, which includes: When the target long list page starts to scroll, an upper page listening node and a lower page listening node are respectively set at the upper and lower parts of the target long list page; Using a preset Intersection Observer object, add a monitoring element scrolling event to the upper monitoring node of the page and the lower monitoring node of the page; The vertical distance coordinate of the target long list page is acquired by monitoring the element scrolling event, and the vertical distance coordinate is determined as an offset to obtain the offset.

5. The H5 page display method according to claim 1, characterized in that: The method further comprises: If the offset is less than or equal to the preset offset threshold, the target long list page is used for page display.

6. An H5 page display device, characterized in that: The H5 page display device includes: The list setting module is used to set a long list of preset height according to the preset nodes in the H5 page to obtain the initial long list page; A rendering module, used for rendering data on the initial long list page based on a preset rendering component to obtain a target long list page; A monitoring module, used for obtaining a vertical scrolling distance of the target long list page by monitoring an element scrolling event when the target long list page starts to scroll, and obtaining an offset; A judging module, used to judge whether the offset is greater than a preset offset threshold; The first display module is used for, if the offset is greater than the offset threshold, performing secondary rendering on the H5 page from the bottom of the H5 page to obtain the page to be displayed at the bottom of the page, and using the page to be displayed at the bottom of the page for page display; using a preset marking tool to mark the rendering range of the target long list page to obtain a marked long list page; when the data length or content changes, recalculating the changed data items to update the DOM node; based on the marked long list page, calculating the list that is not in the page in the target long list page to obtain the list to be updated; subtracting the marked long list page from the target long list page to obtain the list that is not in the page in the target long list page, that is, the list to be updated; calling the preset virtual DOM to reduce the proportion of the list to be updated in the target long list page; The device also includes a control module, which is used to calculate the data rendering rate of the initial long list page; and call a preset callback function to control the data rendering rate.

7. An H5 page display device, characterized in that: The H5 page display device includes: a memory and at least one processor, wherein instructions are stored in the memory; The at least one processor calls the instruction in the memory so that the H5 page display device executes the H5 page display method as described in any one of claims 1-5.

8. A computer-readable storage medium having instructions stored thereon, characterized in that: When the instruction is executed by the processor, the H5 page display method as described in any one of claims 1 to 5 is implemented.

Images