A page display method, device, equipment, and storage medium

Abstract

The present application discloses a page display method, comprising: determining an element to be rendered in a to-be-rendered list of the target page according to a display area located in a display interface of the target page; determining target data of the element to be rendered in the list data of the to-be-rendered list; and rendering the element to be rendered in the to-be-rendered list based on the target data. The present application also discloses a page display device, equipment and storage medium.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and relate to but are not limited to a page display method and apparatus, device, and storage medium. Background Art

[0002] With the development of the e-commerce industry, people often purchase goods online. In order to allow users to see more goods, a long list of goods is usually displayed for users to purchase. However, due to the large number of goods, the time and performance of users loading a large list will be relatively poor. If the entire list is rendered directly, many image resources will be wasted unnecessarily. In response to related issues, in related technologies, the solution of lazy loading of images is used to prevent the waste of resource loading, but this method still causes waste of resources. Summary of the invention

[0003] The embodiments of the present application provide a page display method and apparatus, a device, and a storage medium to solve at least one problem existing in the related art, which can avoid waste of resources to the greatest extent based on the lazy loading of elements.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] In a first aspect, an embodiment of the present application provides a page display method, the method comprising: determining, according to a display area of ​​a target page located on a display interface, an element to be rendered in a to-be-rendered list of the target page;

[0006] Determine target data of the element to be rendered in the list data of the list to be rendered;

[0007] The elements to be rendered in the to-be-rendered list are rendered based on the target data.

[0008] In a second aspect, an embodiment of the present application provides a page display device, including:

[0009] A first determining unit, configured to determine, according to a display area of ​​a target page located on a display interface, an element to be rendered in a to-be-rendered list of the target page;

[0010] A second determining unit, configured to determine target data of the element to be rendered in the list data of the list to be rendered;

[0011] A rendering unit is used to render the to-be-rendered elements in the to-be-rendered list based on the target data.

[0012] In a third aspect, an embodiment of the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned page display method when executing the computer program.

[0013] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, and the computer program implements the above-mentioned page display method when executed by a processor.

[0014] In an embodiment of the present application, a page display method and apparatus, device, and storage medium are provided, including: determining, according to a display area of ​​a target page located in a display interface, an element to be rendered in a to-be-rendered list of the target page; determining target data of the element to be rendered in the list data of the to-be-rendered list; rendering the element to be rendered in the to-be-rendered list based on the target data; thereby rendering data for the elements in the list in the display area with the elements in the list in the target page as the loading and rendering granularity, thereby rendering local elements of the page, not rendering elements that do not need to be displayed in the display area, and not rendering elements in the list that the user has not browsed, thereby reducing the rendering tasks that need to be performed at the same time, and greatly alleviating page performance issues caused by rendering a lot of page content. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 This is a schematic diagram of an optional architecture of a data processing system according to an embodiment of the present application;

[0016] Figure 2 An optional flow chart of a page display method provided in an embodiment of the present application;

[0017] Figure 3 An optional flow chart of a page display method provided in an embodiment of the present application;

[0018] Figure 4 A schematic diagram of the interface of the display area provided in an embodiment of the present application;

[0019] Figure 5 A schematic diagram for comparing page data provided by an embodiment of the present application;

[0020] Figure 6 A schematic diagram of the page display effect provided in the embodiment of the present application;

[0021] Figure 7 An optional structural diagram of a page display device provided in an embodiment of the present application;

[0022] Figure 8 An optional structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the specific technical solution of the application will be further described in detail below in conjunction with the drawings in the embodiments of the present application. The following embodiments are used to illustrate the present application, but are not used to limit the scope of the present application.

[0024] The embodiments of the present application can provide a page display method and system and a storage medium. In practical applications, the page display method can be implemented by a data processing system, and each functional entity in the data processing system can be collaboratively implemented by hardware resources of an electronic device (such as a terminal device or a server), such as computing resources such as a processor, and communication resources (such as for supporting various communication methods such as optical cables and cellular).

[0025] The data processing method provided in the embodiments of the present application is described, and some terms involved in the present application are explained.

[0026] 1) List, i.e., list container, displays areas of the same type in an ordered or unordered manner on a display page, such as the area that displays search results on a product search result page, or the area that displays small appliances on a product browsing page.

[0027] 2) Elements, also called nodes, are objects displayed in the list. The content displayed by an element includes: text, pictures, links, etc.

[0028] 3) Sub-elements: different objects included in the elements. The types of sub-elements may include: text, pictures, links, etc.

[0029] The page display method of the embodiment of the present application can be applied to Figure 1 The data processing system shown includes: a client 10 and a server 20, wherein the client 10 can interact with the user based on an input device, wherein the input device includes: a display, a mouse, a keyboard and other devices that can receive input information from the user.

[0030] In an example, the client 10 and the server 20 are located on different physical entities. In this case, the server 20 can communicate with the client 10 through the network 30 .

[0031] A browser or application program capable of displaying web pages runs in the client 10 , and a user can access the web pages through the browser or application program.

[0032] After receiving the access request from the user to access the target page, the client 10 sends the access request to the server 20, and the server 20 returns the page data of the target page.

[0033] The client 10 obtains page data of a target page from the server 20; and determines the elements to be rendered in the to-be-rendered list of the target page according to a display area of ​​the target page located in a display interface; determines the list data of the to-be-rendered list in the page data, and the target data of the elements to be rendered in the list data of the to-be-rendered list; and renders the elements to be rendered in the to-be-rendered list based on the target data.

[0034] In the embodiment of the present application, the target page includes one or more lists, and the list in the display area of ​​the display interface in the target page is called a list to be rendered. In the current display area, one or more lists to be rendered may be included. When the display area includes multiple lists to be rendered, the rendering of each list to be rendered is independent of each other. In the embodiment of the present application, a list can be understood as a component.

[0035] In one example, when a user accesses the target page: page 1, page 1 includes a list to be rendered: list A, list A includes elements 1, element 2, element 3, element 4 to element 20, when the elements in the display area of ​​the current page 1 located in the display interface include: element 3, element 4, element 5 and element 6, then elements 3, element 4, element 5 and element 6 are determined to be elements to be rendered, and the element data of elements 3, element 4, element 5 and element 6 are determined to be target data. At this time, the target data is rendered into page 1, so that the contents of elements 3, element 4, element 5 and element 6 are displayed in list A.

[0036] In combination with the above data processing system, this embodiment proposes a page display method, which can avoid waste of resources to the greatest extent based on the lazy loading of elements.

[0037] Next, combine Figure 1 The data processing system shown illustrates various embodiments of the page display method, apparatus, device and storage medium provided in the embodiments of the present application.

[0038] The embodiment of the present application provides a page display method. The function implemented by the method can be implemented by calling program code by a processor in an electronic device. Of course, the program code can be stored in a computer storage medium. It can be seen that the electronic device at least includes a processor and a storage medium.

[0039] Figure 2 A schematic diagram of the implementation flow of a page display method according to an embodiment of the present application is shown in FIG. Figure 2 As shown, the method may include the following steps:

[0040] S201 . Determine, according to a display area of ​​a target page located on a display interface, an element to be rendered in a to-be-rendered list of the target page.

[0041] When a user accesses a target page on a client, the client sends the page address of the target page to the server, and the server receives the data of the target page, wherein the received data includes the code and resources of the target page, the code is used to represent the layout structure of the target page, and the resources include the content displayed in the target page. If the target page is larger than the display interface of the client, the display interface cannot fully display the entire area of ​​the target page when displaying the target page, and only displays the local area of ​​the target page located in the display interface.

[0042] In the embodiment of the present application, the local area of ​​the target page located on the display interface is referred to as the display area. The display area may be the area displayed when the target page is first opened, or may include the area displayed after the target page is scrolled. In the embodiment of the present application, the scrolling of the target page may be automatic, or may be based on the user's scrolling operation, wherein the user's scrolling operation may include one or more of the following operations: operation of the mouse wheel, operation of the scroll bar of the target web page based on the mouse cursor, sliding operation of the target page by touch, etc.

[0043] In the embodiment of the present application, the display interface is used to display the target page, wherein the target interface may be the entire display screen of the client, or may be a portion of the display screen. In one example, the display screen of the client is divided into display interface 1 and display interface 2, and display interface 1 is used to display the target page, and display interface 2 is used to display content other than the target page.

[0044] When displaying the target page, the display area of ​​the target page located in the display interface is determined, that is, the area to be displayed in the target page is determined, and the list in the display area and the elements of the list in the display area are determined. Here, the list that has not been rendered in the target page is referred to as the list to be rendered, and the elements in the list to be rendered located in the display area are referred to as the elements to be displayed.

[0045] In one example, when the page is opened, the display area includes: elements A1 to A5 of list A, and the elements to be displayed include elements A1 to A5.

[0046] In one example, the target page includes: List A to List G. When the page is scrolled, the display area includes: elements F5 to F9 of List F. The list to be rendered includes List F, and the elements to be displayed include elements F5 to F9. Among them, the elements of List F include: elements F1 to F20. However, at this time, the display area does not include elements F1 to F4 and elements F10 to F20 of List F. Then, the current elements to be displayed do not include elements F1 to F4 and elements F10 to F20.

[0047] Here, the list can be represented as a class in the page, the element can be represented as a Document Object Model (DOM) node under the class, and different DOM nodes in the same list can be separated by a separator (division, div).

[0048] In an embodiment of the present application, the client may set a monitoring function to monitor the display status of the target page. Here, the monitoring function may be used as a lifecycle function to monitor the status of the current display area, wherein each update of the display area of ​​the page includes the following states: area update, rendering and display, and after the display area update is completed, the target function is called back based on the created monitoring object, and the target function is used to monitor the rendering process.

[0049] In the embodiment of the present application, after determining the elements to be displayed in the to-be-rendered list, the elements to be rendered may be determined according to the elements to be displayed. The method of determining the elements to be rendered according to the elements to be displayed includes at least one of the following methods:

[0050] Method 1: determine the element to be displayed as the element to be rendered.

[0051] Method 2: determining a first number of unrendered elements including the to-be-displayed element as the to-be-rendered elements.

[0052] In the first method, the elements to be displayed in the current display area of ​​the target page are elements to be rendered. The client uses the elements included in a display area as a group of elements to be rendered, and renders all the unrendered elements in a display area each time.

[0053] In one example, when the page is opened, the display area includes: elements A1 to A5 of list A, then the elements to be displayed include: elements A1 to A5 of list A, and the elements to be rendered include: elements A1 to A5 of list A.

[0054] In the second method, the client determines a first number of unrendered elements including the to-be-displayed elements in the elements of the to-be-rendered list as the to-be-rendered elements. Here, the client uses the first number of unrendered elements as a group of elements to be rendered, and renders the first number of unrendered elements each time. The size of the first number can be set according to actual needs, such as 4, 8, etc.

[0055] In one example, when the page is opened, the display area includes: elements A1 to A5 of list A, and the elements to be displayed include: elements A1 to A5 of list A, and when the first number is 8, the elements to be rendered include: elements A1 to A8 of list A. Among them, elements A6, A7, and A8 are not in the current display area.

[0056] In the embodiment of the present application, after the client determines the elements to be rendered, the elements to be rendered may be added to a rendering list (renderlist) to render the elements in the renderlist.

[0057] S202: Determine target data of the to-be-rendered element in the list data of the to-be-rendered list.

[0058] Here, after determining the element to be rendered, the client determines the target data of the element to be rendered from the list data of the list to be rendered, wherein the target data of the element to be rendered includes the sub-elements of the list to be rendered and the resources in each sub-element.

[0059] S203: Render the elements to be rendered in the to-be-rendered list based on the target data.

[0060] After the client determines the target data, it renders each to-be-rendered element based on the target data, so that the client displays the content of the to-be-loaded element on the target page.

[0061] Here, the client can render the elements in renderlsit.

[0062] The embodiments of the present application can be applied to the following scenarios:

[0063] When the user visits the target page: page 1, page 1 includes a list to be rendered: list A, list A includes elements 1, element 2, element 3, element 4 to element 20, when the elements in the display area of ​​the current page A located in the display interface include: element 3, element 4, element 5 and element 6, then elements 3, element 4, element 5 and element 6 are determined to be elements to be rendered, and the element data of elements 3, element 4, element 5 and element 6 are determined to be target data. At this time, the target data is rendered into page 1, so that the contents of elements 3, element 4, element 5 and element 6 are displayed on the page.

[0064] In an embodiment of the present application, based on the display area of ​​the target page located in the display interface, the elements to be rendered in the to-be-rendered list of the target page are determined; the target data of the elements to be rendered in the list data of the to-be-rendered list are determined; the elements to be rendered in the target page are rendered based on the target data; thereby, the elements of the list in the target page are used as the loading and rendering granularity, and data rendering is performed on the elements of the list in the display area, thereby realizing the rendering of local elements of the page, and elements that do not need to be displayed in the display area are not rendered, so that elements in the list that are not browsed by the user are not rendered, thereby reducing the rendering tasks that need to be executed at the same time, and greatly alleviating the page performance problems caused by the large amount of content in the rendering page.

[0065] It should be noted that in the embodiment of the present application, the element is used as the granularity, and a plurality of elements constitute an element group. The page is rendered based on the element group, and an element includes text, images, and video connection content. The present application does not render based on content. When an element does not need to be displayed, the element is not rendered. The lazy loading method of images in the related art is based only on whether an image is displayed, so as to determine whether the image is rendered for each image. However, in the related art, for an element, when the image in an element is not rendered, other content in the element (such as text, links) still needs to be rendered. Therefore, when displaying a list, it is necessary to create corresponding rendering tasks based on the elements included in the list for rendering. Therefore, although the rendered content is reduced, the number of rendering tasks is not reduced. The page display method in the embodiment of the present application can well solve the technical problems existing in the scheme, reduce the number of rendering tasks, increase the page rendering speed, and improve the performance of the client.

[0066] In some embodiments, the page display method provided by the embodiments of the present application, the implementation of S202 includes: obtaining the sub-elements of the element to be rendered by mounting a reference function to a data packet; the data packet includes the list data of the list to be rendered.

[0067] In an embodiment of the present application, the elements of the list to be rendered in the target page are encapsulated in a data packet, which can be identified as react-dom. The page data of the target page includes the list data of each list in the target page. Among them, the list data of a list includes the sub-elements of all elements of the list.

[0068] The client mounts the data packet through the reference function and obtains the child elements of the element to be rendered from the data packet.

[0069] In the embodiment of the present application, the elements in the to-be-rendered list in the target page are virtual nodes, and the child elements of each element cannot be determined. At this time, the child elements of the real node can be obtained from the data packet by referencing the function.

[0070] In some embodiments, the implementation of S201 includes:

[0071] Determine the index of the element to be rendered;

[0072] Based on the index of the element to be rendered, target data of the element to be rendered is acquired from the list data of the list to be rendered.

[0073] In the embodiment of the present application, each element is set with a corresponding index. After the data of the list to be rendered is obtained, when the target data of the element to be rendered needs to be determined, the index of each element to be rendered is first determined, and the target data of the element to be rendered, that is, the sub-element of the element to be rendered, is obtained according to the index of the element to be rendered.

[0074] In one example, the list to be rendered includes 20 elements, and the indexes of the elements are 1 to 20 respectively. At this time, the elements to be rendered are elements 5 to 9, and the indexes of elements 5 to 9 are 5 to 9 respectively. Based on indexes 5 to 9, the sub-elements of elements 5 to 9 are determined from the list data of the list to be rendered.

[0075] In some embodiments, Figure 3 As shown, the implementation of S201 includes:

[0076] S2011, monitoring at least one element to be displayed in the display area among the elements in the to-be-rendered list;

[0077] S2012, determining whether there is an unrendered element in the at least one element to be displayed;

[0078] S2013: When there is an unrendered element in the at least one element to be displayed, take the first unrendered element in the at least one element to be displayed as the first starting element, and determine a first number of unrendered elements as the elements to be rendered.

[0079] When the target page is opened, the client monitors the elements in the display area of ​​the target page and determines whether there are unrendered elements in the elements in the display area. In the embodiment of the present application, the rendered elements and the unrendered elements in the display area can be distinguished by a rendering identifier.

[0080] In the embodiment of the present application, the client can monitor which elements are included in the display area and whether each of these elements has been rendered through a monitoring function (useeffect function). Here, the elements in the display area can be referred to as elements to be displayed.

[0081] The client uses the first unrendered element in the elements of the display area as the first starting element, and determines the first number of unrendered elements in the to-be-rendered list as the to-be-rendered elements, and the determined number of to-be-rendered elements is the first number. Here, the first number of to-be-rendered elements may belong to the same to-be-rendered list.

[0082] In one example, when a page is opened, Figure 4As shown, the display area 401 includes: elements A1 to A4 of list A, and when the first number is 8, the elements to be rendered include: elements A1 to A8. Among them, elements A1 to A6 are located in the current display area 401, and elements A7 and A8 are not located in the current display area 401.

[0083] In one example, after the page is scrolled, the display area includes: elements F5 to F9 of list F, and the elements to be displayed include elements F5 to F9 of list F. When the first number is 8, the elements to be rendered include: elements F5 to F12. Among them, the positions of elements F10 to F12 are not in the current display area.

[0084] In some embodiments, the implementation of S2012 includes: determining whether there is an element to be displayed that is not marked with a rendering identifier among the at least one element to be displayed; when any element to be displayed among the at least one element to be displayed is not marked with a rendering identifier, determining that there is an unrendered element among the at least one element to be displayed.

[0085] In an embodiment of the present application, to determine whether an element to be displayed in the display area has been rendered or not, it can be determined whether a rendering identifier is set corresponding to the element to be displayed. When a rendering identifier is set for an element to be displayed, it indicates that the element to be displayed has been rendered. When a rendering identifier is not set for an element to be displayed, it indicates that the element to be displayed has not been rendered.

[0086] Here, the rendering flag can be used as an attribute of the element to be displayed.

[0087] After S203, the following steps are further implemented: marking the rendered element to be rendered based on the rendering identifier; the rendering identifier is used to mark the element to be rendered as an element that has been rendered;

[0088] After rendering the element to be rendered in S203 , a rendering flag may be set for the rendered element through a target function.

[0089] In the embodiment of the present application, the rendering identifier may be used as a sub-element of an element. After an element is rendered, the rendering identifier is added to the sub-element of the element.

[0090] In some embodiments, the page display method provided by the embodiment of the present application further includes:

[0091] After the page content except the to-be-rendered list in the target page is loaded, a monitoring object is created, and the monitoring object is used to call back the target function;

[0092] The marking of the to-be-rendered element based on the rendering identifier includes:

[0093] The rendered elements to be rendered are marked based on the objective function and the rendering identifier.

[0094] In an embodiment of the present application, after the target page is opened and the content other than the node is loaded in the target page, a monitoring object IntersectionObserver is created, and the target function is set in the parameters of IntersectionObserver.

[0095] When the listening function detects changes in the element to be rendered, the target function is called to mark the rendered element with a rendering flag.

[0096] In the embodiment of the present application, the renderlist is used to store the index of the current element to be rendered. When the element to be rendered is rendered and a new element to be rendered is detected, the new element to be rendered is placed in the renderlist, and the rendering status of each element to be rendered is recorded in the renderlist. The rendering status of the element to be rendered includes: unrendered and rendered.

[0097] When the target function detects that the rendering state of an element to be rendered in the renderlist is changed to rendered, the rendering flag of the element to be rendered is set.

[0098] In one example, the rendering flag may be identified as data-observe, and when the value of the rendering flag is true, the rendering flag is valid.

[0099] For example, the sub-elements of an element to be rendered include: a, b and c. After the element to be rendered is rendered, the sub-elements of the element include: a, b, c and data-observe, and the value of data-observe is true.

[0100] In the embodiment of the present application, the target function does not monitor the elements that have been set with the rendering flag, but only monitors the elements that have not been set with the rendering flag. Here, the rendered elements are identified based on the rendering flag, so that when the page displays the rendered elements, it is not necessary to repeatedly render the rendered elements.

[0101] In some embodiments, the page display method provided by the embodiment of the present application further includes:

[0102] The first element after the element to be rendered in the list to be rendered is used as the second starting element;

[0103] Based on the second starting element, determining a second number of unrendered elements in the to-be-rendered list as candidate elements;

[0104] Element data of the candidate element is acquired, and the candidate element is rendered based on the element data of the candidate element.

[0105] After the client determines the element to be rendered, the second number of unrendered elements after the element to be rendered in the list to be rendered are used as candidate elements. Here, the second number of candidate elements may belong to the same list to be rendered.

[0106] The client determines element data of a candidate element in the list data of the list to be rendered, and renders the element data.

[0107] The second quantity may be the same as or different from the first quantity.

[0108] In one example, the target page includes: List A. When the page is opened, the display area includes: elements A1 to A5 of List A. The elements to be displayed include elements A1 to A5 of List A. When the first number is 5 and the second number is 5, the elements to be rendered include: elements A1 to A5. The candidate elements include elements A6 and A10.

[0109] In one example, the target page includes: nodes A to G. When the page is scrolled, the display area includes: elements F5 to F9 of list F. The elements to be displayed include elements F5 to F9 of list F. When the first number is 8 and the second number is 4, the elements to be rendered include: elements F5 to F12, and the candidate elements include: elements F13 to F16.

[0110] In the embodiment of the present application, the candidate elements can be determined by using the useeffect function.

[0111] In some embodiments, the page display method provided by the embodiment of the present application further includes:

[0112] Obtaining the maximum index of the element to be displayed in the display area;

[0113] When the maximum index of the element to be displayed is greater than the maximum index in the rendering list, the rendering list is updated based on the maximum index of the element to be displayed. The index in the rendering list is the index of the element to be rendered.

[0114] In the embodiment of the present application, the user stores the index of the to-be-rendered element corresponding to the current display area in the rendering list. The client determines the maximum index of the to-be-rendered element in the to-be-rendered area of ​​the current display area through the monitoring function, and uses the obtained maximum index as the input parameter of the objective function. The objective function is used to determine the relationship between the maximum index of the to-be-rendered element in the current display area and the maximum index in the rendering list. If the maximum index of the to-be-rendered element in the current display area and the maximum index in the rendering list are the same, it is determined that the to-be-rendered element in the current display area has been updated and the rendering list needs to be updated. At this time, the index of the to-be-rendered element is determined by the monitoring function to update the rendering list.

[0115] In one example, the elements to be rendered in the current display page are: elements 1 to 4, and their corresponding indexes include 1 to 4, so the indexes in the rendering list include 1 to 4. When the page scrolls, the display area changes, and the maximum index of the elements in the display area changes to 6. At this time, the elements in the display area include: elements 3, elements 4, elements 5, and elements 6. At this time, the maximum index 6 of the elements in the display area is greater than the maximum index 4 in the rendering list, which indicates that the page is scrolling, and the indexes in the rendering list are updated to 5 to 8. At this time, elements 5 to 8 corresponding to indexes 5 to 8 are elements to be rendered, and elements 5 and 8 are rendered.

[0116] In the embodiment of the present application, the elements in the display area of ​​the display interface in the target page are monitored by a monitoring function, without abandoning the monitoring of the scrolling of the page by means of scrolling events, thereby simplifying the monitoring of the page and reducing the computational complexity of the page monitoring.

[0117] Below, taking the product display page as an example, the page display method provided in the embodiment of the present application is further explained.

[0118] In the related technology, the problem of image loading in long lists is mainly solved by some excellent lazy loading components on the market. Among them, these lazy loading components all adopt a method of partially loading images to display the page, which is not very good in terms of performance. At the same time, for long list pages, these lazy loading components will render all nodes at once, and the overall performance still needs a lot of improvement.

[0119] The page display method provided in the embodiment of the present application is aimed at the development requirements of related list loading. It does not lazy load through images, but renders some DOM nodes first when some DOM nodes do not appear in the display window. That is, when an element DOM node appears in the display window, it will be rendered, thereby realizing a component lazy loading method.

[0120] The page display method implemented in the present application adopts the React+hooks method to monitor whether the node appears in the display window to display the page, abandons the method of monitoring page scrolling, and overcomes the page display problem caused by scroll events, which is complex to implement, has large amount of calculation and poor performance.

[0121] Compared with lazy loading of images, the component rendering in the page display method provided in the embodiment of the present application reduces the one-time rendering nodes, and the entire list card will be rendered accordingly with the cards displayed in the display window, where one card corresponds to one element.

[0122] For the current paging operation, if the backend interface returns 60 card data at one time, the comparison between the page loading data caused by the lazy loading of the components of this application and the overall returned data in the related art is as follows: Figure 5 As shown, 501 is the data of the page displayed by the lazy loading component of the present application, and 502 is the data of the page rendered once in the paging display in the related art. Figure 6 As shown, the contents of card 601, card 602, card 603 and card 604 are displayed in the display area 600 of the display page. By comparison, it can be determined that even if the server returns paginated data, the first page rendering is relatively simple, and this application only renders part of the DOM nodes, which optimizes the performance of page loading compared to full rendering.

[0123] It should be noted that, in the data shown in 501, the sub-elements in the first four rows include elements with data-observe being true, which are already rendered elements located in the display area, and the sub-elements in the last four rows do not include elements with data-observe being true, which are already rendered elements that do not appear in the display area.

[0124] The implementation logic of the page display method provided in the embodiment of the present application can be packaged as a library, and the page display method of the embodiment of the present application can be implemented in different clients by calling the library. It should be noted that when calling the library provided in the embodiment of the present application, parameter configuration is required, and the configured parameters include: the name of the list, the first number, i.e., rendercount, etc.

[0125] The page display method provided in the embodiment of the present application includes:

[0126] S701, page initial rendering.

[0127] By setting the useeffect function of an empty array to monitor the loading of the page content except the node data, a monitoring object (Intersection Observer) is created, and the corresponding target function is placed in the parameter of the object. Here, the useeffect function can also monitor the changes of the renderlist to set the observe attribute of the element, so as to monitor the elements in the window through the observe attribute of the element.

[0128] The target function can also be called a callback function. The target function called back by the Intersection Observer object can perform the following operations:

[0129] Operation 1: Traverse the array of visible windows. Each item in the array represents a node. Set the data-observe=true attribute for each node and add a mark to the monitored DOM node. Since each rendering is re-monitoring, the purpose of adding the mark is to prevent the DOM node from being re-monitored, thereby improving performance. The first parameter in the target function represents the array of visible windows.

[0130] Operation 2: Find the list index of the DOM node currently displayed in the window and get the maximum index value, where one index corresponds to one DOM node.

[0131] Operation 3: Check whether the DOM node exceeds the window range. If it exceeds the maximum visible DOM value, directly change the renderlist. Once the renderlist is changed, the entire component will continue to re-render.

[0132] S702: Rendering elements during page scrolling.

[0133] Since the IntersectionObserver object has been created when the page is initially loaded, the target function of IntersectionObserver monitors new elements displayed in the display window. The new elements are also given the attribute data-observe=true to prevent the element from being re-monitored, thereby improving performance.

[0134] The client determines the index of the list currently displayed in the window based on the scrolling distance, and finds the maximum index value currently displayed in the window based on the list index value. Determine whether the current index value of the new element is greater than the maximum length of renderlist rendering. If the length is not greater than the maximum value of renderlist, the renderlist attribute will not be changed, the entire component will not be re-rendered, and the renderlist value will not be changed; if the index value of the element scrolled in the window is greater than or equal to the maximum value of renderlist, the component will be re-rendered and renderlist will be re-listened.

[0135] In the process of element rendering in the embodiment of the present application, the DOM nodes on the page are all virtual DOM nodes. For virtual DOM nodes, there is no way to determine the location of the DOM nodes in the view. In the embodiment of the present application, the reference function ref is mounted in the data packet ReactDom, and all the information of the real DOM can be directly obtained from ReactDom. After obtaining the node information, the child elements of each element in the node can be obtained at the same time, and the child elements children are copied, and rednercount child elements are rendered to the page.

[0136] The page loading method provided in the embodiment of the present application directly monitors the elements located in the display window on the list card through the componentization concept to realize an optimized list loading method, which can exclude the nodes that are not in the visible range from the re-rendering range, so that the rendering tasks that need to be executed at the same time will be greatly reduced, which greatly alleviates the page performance problems caused by too many product cards on the list channel page, and is a very lightweight component loading method.

[0137] Figure 7 Schematic diagram of the structure of a page display device according to an embodiment of the present application. Figure 7 As shown, the page display device 700 includes:

[0138] A first determining unit 701 is used to determine, according to a display area of ​​a target page located on a display interface, an element to be rendered in a to-be-rendered list of the target page;

[0139] A second determining unit 702 is used to determine target data of the element to be rendered in the list data of the list to be rendered;

[0140] The rendering unit 703 is configured to render the to-be-rendered elements in the to-be-rendered list based on the target data.

[0141] In some embodiments, the second determining unit 702 is further used to: obtain the sub-elements of the element to be rendered by mounting a reference function to a data packet; and the data packet includes the list data of the list to be rendered.

[0142] In some embodiments, the second determining unit 702 is further configured to:

[0143] Determine the index of the element to be rendered;

[0144] Based on the index of the element to be rendered, target data of the element to be rendered is acquired from the list data of the list to be rendered.

[0145] In some embodiments, the first determining unit 701 is further configured to:

[0146] Monitoring at least one element to be displayed in the display area among the elements in the to-be-rendered list;

[0147] Determine whether there is an unrendered element in the at least one element to be displayed;

[0148] In the case that there are unrendered elements in the at least one element to be displayed, the first unrendered element in the at least one element to be displayed is used as the first starting element, and a first number of unrendered elements are determined as the elements to be rendered.

[0149] In some embodiments, the first determination unit 701 is further used to determine whether there is an element to be displayed that is not marked with a rendering identifier among the at least one element to be displayed; when any element to be displayed among the at least one element to be displayed is not marked with a rendering identifier, it is determined that there is an unrendered element among the at least one element to be displayed.

[0150] In some embodiments, the rendering unit 703 is further configured to mark the to-be-rendered element based on a rendering identifier after rendering the to-be-rendered element in the to-be-rendered list based on the target data; the rendering identifier is used to mark the to-be-rendered element as a rendered element.

[0151] In some embodiments, the apparatus 700 further includes: a creating unit, configured to:

[0152] After the page content except the to-be-rendered list in the target page is loaded, a monitoring object is created, and the monitoring object is used to call back the target function;

[0153] Correspondingly, the marking unit is further configured to mark the rendered element to be rendered based on the objective function and the rendering identifier.

[0154] In some embodiments, the apparatus 700 further includes: a preloading unit, configured to:

[0155] The first element after the element to be rendered in the list to be rendered is used as the second starting element;

[0156] Based on the second starting element, determining a second number of unrendered elements in the to-be-rendered list as candidate elements;

[0157] Element data of the candidate element is acquired, and the candidate element is rendered based on the element data of the candidate element.

[0158] It should be noted that the data processing system provided in the embodiment of the present application includes various logic units included, which can be implemented by a processor in an electronic device; of course, it can also be implemented by a specific logic circuit; in the implementation process, the processor can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, MicroProcessor Unit), a digital signal processor (DSP, Digital Signal Processor) or a field programmable gate array (FPGA, Field-Programmable Gate Array), etc.

[0159] The description of the above system embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the system embodiment of the present application, please refer to the description of the method embodiment of the present application for understanding.

[0160] It should be noted that in the embodiment of the present application, if the above-mentioned page display method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the relevant technology can be embodied in the form of a software product, which 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 execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (ROM), a disk or an optical disk. In this way, the embodiment of the present application is not limited to any specific combination of hardware and software.

[0161] An embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned page display method when executing the computer program.

[0162] Correspondingly, an embodiment of the present application provides a storage medium, that is, a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the page display method provided in the above embodiment is implemented.

[0163] It should be noted here that the description of the above storage medium embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the storage medium embodiment of the present application, please refer to the description of the method embodiment of the present application for understanding.

[0164] It should be noted that Figure 8 A hardware entity diagram of an electronic device according to an embodiment of the present application is shown in FIG. Figure 8 As shown, the electronic device 800 includes: a processor 801, at least one communication bus 802, at least one external communication interface 804 and a memory 805. The communication bus 802 is configured to achieve connection and communication between these components. In an example, the electronic device 800 also includes: a user interface 803, wherein the user interface 803 may include a display screen, and the external communication interface 804 may include a standard wired interface and a wireless interface.

[0165] The memory 805 is configured to store instructions and applications executable by the processor 801, and can also cache data to be processed or processed by the processor 801 and various modules in the electronic device (for example, image data, audio data, voice communication data, and video communication data), which can be implemented through flash memory (FLASH) or random access memory (Random Access Memory, RAM).

[0166] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in some embodiments" appearing throughout the specification may not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the size of the sequence number of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application. The above-mentioned sequence numbers of the embodiments of the present application are for description only and do not represent the advantages and disadvantages of the embodiments.

[0167] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0168] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.

[0169] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0170] In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be a separate unit, or two or more units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0171] A person skilled in the art can understand that all or part of the steps of implementing the above method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above method embodiment; and the aforementioned storage medium includes: mobile storage devices, read-only memories (ROM), magnetic disks or optical disks, etc., various media that can store program codes.

[0172] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application can be essentially or partly embodied in the form of a software product that contributes to the relevant technology. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks, or optical disks.

[0173] The above is only an implementation method of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A page display method, characterized in that: The method comprises: Determine, according to a display area of ​​a target page located on a display interface, an element to be rendered in a to-be-rendered list of the target page; Determine target data of the element to be rendered in the list data of the list to be rendered; Rendering the to-be-rendered elements in the to-be-rendered list based on the target data; The step of determining the elements to be rendered in the to-be-rendered list of the target page according to the display area of ​​the target page located on the display interface includes: Monitoring at least one element to be displayed in the display area among the elements in the to-be-rendered list; Determine whether there is an unrendered element in the at least one element to be displayed; In the case that there are unrendered elements in the at least one element to be displayed, the first unrendered element in the at least one element to be displayed is used as the first starting element, and a first number of unrendered elements are determined as the elements to be rendered.

2. The method according to claim 1, characterized in that In the determining of the list data of the list to be rendered, the target data of the element to be rendered includes: The sub-elements of the element to be rendered are obtained by mounting a reference function to a data packet; the data packet includes list data of the list to be rendered.

3. The method according to claim 2, characterized in that The determining of the target data of the element to be rendered in the list data of the list to be rendered includes: Determine the index of the element to be rendered; Based on the index of the element to be rendered, target data of the element to be rendered is acquired from the list data of the list to be rendered.

4. The method according to claim 1, characterized in that: The determining whether there is an unrendered element in the at least one element to be displayed includes: Determine whether there is an element to be displayed that is not marked with a rendering identifier among the at least one element to be displayed; When any of the at least one to-be-displayed element is not marked with a rendering identifier, it is determined that there is an unrendered element in the at least one to-be-displayed element.

5. The method according to claim 1 or 4, characterized in that: After rendering the elements to be rendered in the to-be-rendered list based on the target data, the method further includes: The element to be rendered is marked based on the rendering identifier; the rendering identifier is used to mark the element to be rendered as a rendered element.

6. The method according to claim 4, characterized in that The method further comprises: After the page content except the to-be-rendered list in the target page is loaded, a monitoring object is created, and the monitoring object is used to call back the target function; The marking of the to-be-rendered element based on the rendering identifier includes: The rendered elements to be rendered are marked based on the objective function and the rendering identifier.

7. The method according to claim 1, characterized in that The method further comprises: The first element after the element to be rendered in the list to be rendered is used as the second starting element; Based on the second starting element, determining a second number of unrendered elements in the to-be-rendered list as candidate elements; Element data of the candidate element is acquired, and the candidate element is rendered based on the element data of the candidate element.

8. A page display device, characterized in that: The device comprises: A first determining unit is used to determine the elements to be rendered in the to-be-rendered list of the target page according to the display area of ​​the target page located in the display interface; and is also used to monitor at least one to-be-displayed element located in the display area among the elements in the to-be-rendered list; determine whether there is an unrendered element in the at least one to-be-displayed element; if there is an unrendered element in the at least one to-be-displayed element, take the first unrendered element in the at least one to-be-displayed element as the first starting element, and determine a first number of unrendered elements as the elements to be rendered; A second determining unit, configured to determine target data of the element to be rendered in the list data of the list to be rendered; A rendering unit is used to render the to-be-rendered elements in the to-be-rendered list based on the target data.

9. 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 computer program, the steps of the page display method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page display method described in any one of claims 1 to 7 is implemented.

Images