A page rendering method, device, apparatus and storage medium

Abstract

This disclosure provides a page rendering method, apparatus, device, and storage medium, relating to the field of computer technology, particularly to the fields of internet applications, computer vision, and page processing. The specific implementation scheme is as follows: In response to detecting a rendering instruction for a target page, a pre-rendered object of a first functional component is displayed on the target page; target data corresponding to the first functional component is requested from the server; wherein the target data corresponding to any functional component includes static business data and dynamic business data; in response to obtaining the target data corresponding to the first functional component, based on the target data corresponding to the first functional component, rendering of the display object for the first functional component is performed on the target page, and the pre-rendered object displayed on the target page is hidden. Therefore, this scheme can improve page loading speed.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to the fields of Internet applications, computer vision, and page processing, specifically to a page rendering method, apparatus, device, and storage medium. Background Technology

[0002] For dynamic pages composed of personalized functional components, the height of a functional component depends on the rendering of the business data corresponding to that component; that is, the height of a functional component is affected by the personalized business data.

[0003] Furthermore, when a user opens a dynamic page, the interfaces of each functional component on that dynamic page will simultaneously send data requests to the server to obtain the business data corresponding to each functional component, thereby rendering the corresponding functional component. Summary of the Invention

[0004] This disclosure provides a page rendering method, apparatus, device, and storage medium.

[0005] According to one aspect of this disclosure, a page rendering method is provided, applied to a client, the client communicating with a server, the method comprising:

[0006] In response to the detection of a rendering instruction for a target page, a pre-rendered object of a first functional component is displayed on the target page; wherein, the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component;

[0007] Request the target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data;

[0008] In response to a request to obtain target data corresponding to the first functional component, based on the target data corresponding to the first functional component, rendering of the display object for the first functional component is performed on the target page, and the pre-rendered object displayed on the target page is hidden.

[0009] According to another aspect of this disclosure, a page rendering apparatus is provided, applied to a client that communicates with a server, the apparatus comprising:

[0010] A pre-rendering module is used to display a pre-rendered object of a first functional component on the target page in response to the detection of a rendering instruction for the target page; wherein the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component.

[0011] The request module is used to request target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data;

[0012] The rendering module is used to respond to a request to obtain target data corresponding to the first functional component, and based on the target data corresponding to the first functional component, to render the display object of the first functional component on the target page, and to hide the pre-rendered object displayed on the target page.

[0013] According to another aspect of this disclosure, an electronic device is provided, comprising: at least one processor; and a memory communicatively connected to said at least one processor; wherein the memory stores instructions executable by said at least one processor, said instructions being executed by said at least one processor to enable said at least one processor to perform any of the page rendering methods described above.

[0014] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform the page rendering method according to any of the preceding claims.

[0015] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the page rendering method according to any of the preceding claims.

[0016] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0017] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0018] Figure 1 This is a flowchart of a page rendering method according to the present disclosure;

[0019] Figure 2 This is another flowchart based on the page rendering method disclosed herein;

[0020] Figure 3This is yet another flowchart based on the page rendering method disclosed herein;

[0021] Figure 4 This is a flowchart illustrating step S202 in the page rendering method disclosed herein;

[0022] Figure 5 This is a flowchart illustrating a specific example of the page rendering method disclosed herein;

[0023] Figure 6 This is a schematic diagram of a page skeleton, representing a specific example of the page rendering method disclosed herein.

[0024] Figure 7 This is a schematic diagram of the structure of a page rendering device according to the present disclosure;

[0025] Figure 8 This is a block diagram of an electronic device used to implement the page rendering method of the embodiments of this disclosure. Detailed Implementation

[0026] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0027] Below, we will first introduce a page rendering method provided by an embodiment of this disclosure.

[0028] The page rendering method provided in this disclosure can be applied to a client that can communicate with a server. In specific applications, the client implementing this page rendering method can be a client with page display capabilities on a terminal device, such as a browser. In practical applications, the terminal device can be a smartphone, tablet, desktop computer, etc.

[0029] Specifically, the entity executing this page rendering method can be a page rendering device. For example, when this page rendering method is applied to a terminal device, the page rendering device can be functional software running on the terminal device, such as software used for page display.

[0030] The page rendering method provided in this embodiment may include the following steps:

[0031] In response to the detection of a rendering instruction for a target page, a pre-rendered object of a first functional component is displayed on the target page; wherein, the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component;

[0032] Request the target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data;

[0033] In response to a request to obtain target data corresponding to the first functional component, based on the target data corresponding to the first functional component, rendering of the display object for the first functional component is performed on the target page, and the pre-rendered object displayed on the target page is hidden.

[0034] In the solution provided in this disclosure, the first functional component is a functional component located on the first screen of the target page. When a rendering instruction for the target page is detected, a pre-rendered object of the first functional component is first displayed on the target page. This allows for a timely response to the rendering instruction, enabling users to quickly see the content on the first screen after opening the target page, achieving a visually instantaneous loading effect. Then, target data corresponding to the first functional component is requested from the server. Once the target data is obtained, the display object for the first functional component is rendered on the target page based on this data, and the pre-rendered object displayed on the target page is hidden. Thus, the actual rendered object corresponding to the first functional component is displayed on the interface, allowing users to view the actual content of the first functional component through the first screen. Therefore, this solution, by detecting a rendering instruction for the target page and rendering the display object for the first functional component on the target page, enables on-demand rendering of functional components, thereby improving page loading speed.

[0035] The page rendering method provided in the embodiments of this disclosure will now be described in conjunction with the accompanying drawings.

[0036] like Figure 1 As shown, the page rendering method provided in this embodiment may include the following steps:

[0037] S101, in response to detecting a rendering instruction for a target page, a pre-rendered object of a first functional component is displayed on the target page; wherein, the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component;

[0038] In this embodiment, the target page can be a dynamic page composed of functional components customized by the merchant. When a user opens the target page in the client, and the client detects a rendering instruction for the target page, it can display a pre-rendered object of the first functional component on the target page. The first functional component is the functional component located on the first screen of the target page. For example, in practical applications, the first functional component can be a functional component pre-set by the merchant to be displayed on the first screen when configuring the functional components of the target page, or it can be a preset number of functional components selected from the functional components configured by the merchant and ranked high on the page, serving as the functional components located on the first screen of the target page; both are reasonable.

[0039] For example, the functional components of the target page may include components for displaying merchant information, product information, or product reviews, etc. These functional components can serve as containers for display objects, and the display objects within them can be determined by the business data corresponding to that component. Each piece of business data may include: the element to be displayed, and its corresponding display position, display size, etc. Each element to be displayed may include: image data, text data, video data, etc. Based on the business data corresponding to each functional component, each element to be displayed can be displayed within the functional component, resulting in the display object. Furthermore, it can be understood that rendering the target page is actually rendering the page content of that target page, that is, rendering the display object. When the pre-rendered object is displayed on the target page, it can be a target page with empty content.

[0040] In practical applications, the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component. This static business data can be the default business data corresponding to the first functional component, meaning it is business data that is not affected by the merchant's dynamic configuration of the target page. For example, if the first functional component is a functional component used to display merchant information content, then the static business data can be the merchant's organizational structure information, store logo information, etc.

[0041] Understandably, responding to the rendering command detected by the target page and displaying the pre-rendered object of the first functional component on the target page allows for timely response to the target page's rendering command. This enables users to quickly see the first screen of content after opening the target page, achieving a visually instantaneous loading effect and improving the user experience.

[0042] It should be noted that the pre-rendered object of the first functional component can be pre-stored on the client, allowing the client to directly retrieve the pre-rendered object from its local machine upon detecting the rendering command of the target page; alternatively, in response to detecting the rendering command of the target page, the client requests the pre-rendered object of the first functional component from the server, and the server generates the pre-rendered object of the first functional component based on the static business data corresponding to the first functional component and sends it back to the client. Both of these are reasonable. Furthermore, it should be noted that in practical applications, the number of the first functional components can be at least one. In this embodiment, the same process can be executed for each first functional component.

[0043] S102, request the target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data;

[0044] Understandably, in practical applications, the target data corresponding to the first functional component is stored on the server side. When the page loads, the target data corresponding to the first functional component can be requested from the server. The target data corresponding to any functional component includes both static and dynamic business data. The dynamic business data is the business data that changes dynamically based on the merchant's configuration of the target page. For example, if the first functional component is a component used to display product information, this product information includes product images, price information, etc. Since merchants may periodically set discount activities for products, the price information in the business data corresponding to the first functional component can be dynamic business data; while the image information in the business data corresponding to the first functional component can be static business data.

[0045] Additionally, it should be noted that the step of requesting the target data corresponding to the first functional component can be executed in parallel with the process of displaying the pre-rendered object of the first functional component on the target page in step S101 above. That is, in response to the detection of the rendering instruction of the target page, the target data corresponding to the first functional component is requested from the server.

[0046] S103, in response to the request to obtain the target data corresponding to the first functional component, based on the target data corresponding to the first functional component, render the display object for the first functional component on the target page, and hide the pre-rendered object displayed on the target page.

[0047] In this embodiment, after obtaining the target data corresponding to the first functional component, the target data can be used to render the display object of the first functional component on the target page, that is, to display the elements to be displayed in the target data onto the first functional component. Since the target data is the complete business data corresponding to the first functional component, using the target data to render the display object of the first functional component on the target page can render the actual rendered object corresponding to the first functional component. After rendering the display object of the first functional component on the target page, the actual rendered object corresponding to the first functional component can be displayed, while the pre-rendered object displayed on the target page is hidden, allowing the user to view the actual content of the first functional component through the client interface.

[0048] It is understandable that, since the first functional component is the functional component located on the first screen of the target page, by requesting the target data of the first functional component and rendering the display object of the first functional component on the target page, only the business data corresponding to the first functional component can be loaded on the first screen interface, without loading the business data corresponding to other functional components, thereby realizing on-demand rendering of the target page.

[0049] In the solution provided in this disclosure, the first functional component is a functional component located on the first screen of the target page. When a rendering instruction for the target page is detected, a pre-rendered object of the first functional component is first displayed on the target page. This allows for a timely response to the rendering instruction, enabling users to quickly see the content on the first screen after opening the target page, thus achieving a visually instantaneous loading effect. Then, target data corresponding to the first functional component is requested from the server. Once the target data is obtained, the display object for the first functional component is rendered on the target page based on this data, and the pre-rendered object displayed on the target page is hidden. Finally, the actual rendered object corresponding to the first functional component is displayed on the interface, allowing users to view the actual content of the first functional component through the first screen. Therefore, this solution, by detecting a rendering instruction for the target page and rendering the display object for the first functional component on the target page, enables on-demand rendering of functional components, thereby improving page loading speed.

[0050] Alternatively, in another embodiment of this disclosure, in Figure 1 Based on the illustrated embodiments, as Figure 2 As shown, the method may further include steps S201-S202:

[0051] S201, based on the preset size of the first functional component and the preset size of the second functional component, determine the reference page structure of the target page; wherein, the second functional component is a non-first screen functional component of the target page, and the reference page structure represents the reference arrangement position of each functional component of the target page.

[0052] For example, in practical applications, the display sizes of the first and second functional components on the target page can be preset, such as their height and width on the target page, as the preset sizes of the first and second functional components. Then, based on the preset sizes of the first and second functional components, and the sorting relationship of each functional component on the target page, the reference layout position of each functional component on the target page can be determined, thereby determining the reference page structure of the target page.

[0053] It should be noted that the number of second functional components can be at least one. When determining the reference page structure, the reference page structure of the target page can be determined based on the preset size of the at least one second functional component.

[0054] Optionally, in one implementation, the preset size of the first functional component is the size of the pre-rendered object;

[0055] The preset size of the second functional component is determined based on the amount of business data corresponding to the second functional component.

[0056] Understandably, to avoid significant page jitter due to a large size difference between the actual rendered object and the pre-rendered object after displaying the target page's actual rendered object in the interface, the preset sizes of the first and second functional components should be as close as possible to their actual sizes. In this implementation, to achieve this, the size of the pre-rendered object can be used as the preset size of the first functional component, and then the preset size of the second functional component is determined based on the amount of business data corresponding to it.

[0057] For example, in one specific implementation, the method for determining the preset size of the second functional component may include steps A1-A2:

[0058] A1, Obtain the quantity of business data corresponding to the second functional component from the server;

[0059] A2. Calculate the preset size of the second functional component based on the quantity of business data corresponding to the second functional component and the preset display size of the business data corresponding to the second functional component.

[0060] Understandably, since the height of a rendered functional component is determined by the amount of business data it corresponds to when rendering the display objects for each functional component, this implementation can first obtain the amount of business data corresponding to the second functional component from the server. Then, based on the obtained amount of business data and the preset display size corresponding to the business data, the preset size of the second functional component is calculated. For example, if the amount of business data corresponding to the second functional component is 10, and the preset display size of the business data is 200px in height and 200px in width, and if the business data is arranged in two columns on the target page, then the preset size of the second functional component is 1000px in height and 400px in width.

[0061] Additionally, it should be noted that the preset display size for business data can be related to the type of business data. For example, if the business data is an image, the preset display size could be a height of 200px and a width that adapts to the screen width of the terminal device; if the business data is text, the preset display size could be a height of 16px and a width that adapts to the screen width of the terminal device, and so on. It should also be noted that in practical applications, when retrieving the quantity of business data corresponding to the second functional component from the server, the type of business data can also be obtained. The preset display size of the business data can then be determined based on its type, and the preset size of the second functional component can be calculated by multiplying the quantity of business data by its corresponding preset display size.

[0062] It should be noted that the method for determining the preset dimensions of the first and second functional components described above is merely an example. In practical applications, other methods can also be used to set the preset dimensions of the first and second functional components. For example, the historical display dimensions corresponding to the first and second functional components can be used as the preset dimensions of the first and second functional components. The method for determining the preset dimensions of the first and second functional components in this disclosure is not limited.

[0063] S202, in response to detecting a scrolling operation for the target page, based on the reference page structure of the target page, render the display objects of the functional components that are not on the first screen in the target page.

[0064] In this embodiment, after determining the reference page structure of the target page in step S201, in response to detecting a scrolling operation on the target page, the page position to which the scrolling operation has been performed can be determined based on the reference page structure. Therefore, the functional components at the page position to which the scrolling operation has been performed can be designated as non-first-screen functional components to be displayed. Furthermore, rendering of display objects for non-first-screen functional components can be performed on the target page.

[0065] It should be noted that, based on the reference page structure of the target page, the implementation method for rendering display objects of functional components that are not on the first screen in the target page will be described in the following embodiments, and will not be repeated here.

[0066] As can be seen, by using this solution to render the display objects of functional components that are not on the first screen while the target page is scrolling, it is possible to render functional components that are not on the first screen on demand, thereby improving the page loading speed.

[0067] Alternatively, in another embodiment of this disclosure, in Figure 2 Based on the illustrated embodiments, as Figure 3 As shown, after determining the reference page structure of the target page based on the preset size of the first functional component and the preset size of the second functional component in step S201 above, the method may further include steps S301-S302:

[0068] S301, based on the placeholder object of the second functional component and the reference page structure, pre-placement is performed on the non-first screen page position of the target page; wherein, the size of the placeholder object matches the size of the second functional component;

[0069] In this embodiment, after determining the reference page structure of the target page, the page position corresponding to the second functional component can be determined based on the reference page structure. Therefore, a placeholder object for the second functional component can be used to pre-place the second functional component in a non-first-screen page position. It is understood that the size of the placeholder object can match the size of the second functional component. In practical applications, the size of the placeholder object can be made as close as possible to the actual size of the second functional component. This reduces page jitter caused by the size mismatch between the placeholder object and the second functional component when rendering the display object of the second functional component in a non-first-screen position. For example, the size of the placeholder object can be a preset size of the second functional component, and the placeholder object can be a blank block with a preset size.

[0070] S302, in response to detecting that the second functional component meets the removal condition, the placeholder object of the second functional component is removed from the target page;

[0071] The removal conditions for the second functional component include: obtaining the target data corresponding to the second functional component from the server.

[0072] In this embodiment, after pre-positioning using the placeholder object of the second functional component, the skeleton of the entire target page is expanded. When the target data corresponding to the second functional component is detected from the server, the target data can be used to render the display object of the second functional component on the target page. At this time, the placeholder object can be removed to display the actual rendered object of the second functional component.

[0073] It is understandable that by using the placeholder object of the second functional component to pre-occupy the page position of the target page that is not the first screen, the page skeleton can be expanded, so that when the page is scrolled to later, the second functional component at the page position can be quickly identified, and the display object of the second functional component at that page position can be rendered.

[0074] As can be seen, this solution can quickly identify the second functional component at the current page position, thereby further improving page loading speed.

[0075] Alternatively, in another embodiment of this disclosure, such as Figure 4 As shown, in step S202 above, in response to detecting a scrolling operation on the target page, based on the reference page structure of the target page, rendering of display objects for functional components not on the first screen is performed on the target page, which may include steps S2021-S2023:

[0076] S2021, In response to detecting a scrolling operation for the target page, based on the reference page structure of the target page, a second functional component at a specified page position is determined as the target functional component; wherein, the specified page position is the page position to be rendered determined based on the page position to which the target page has been scrolled.

[0077] In this embodiment, based on the page position scrolled to by the scrolling operation, the position of the page to be rendered that matches the scrolled position can be determined. Then, based on the reference page structure of the target page, the second functional component at the position of the page to be rendered can be identified. For example, the position of the page to be rendered determined by the page position scrolled to by the target page can be the page position scrolled to by the scrolling operation, or it can include the page position scrolled to by the scrolling operation and a page position with a preset distance from the page position scrolled to by the scrolling operation; all of these are reasonable.

[0078] S2022, Request the target data corresponding to the target functional component from the server;

[0079] S2023, Based on the target data corresponding to the target functional component, render the display object for the target functional component on the target page.

[0080] In this embodiment, after identifying the target functional component, target data corresponding to the target functional component can be requested from the server. After obtaining the target data, the display object for the target functional component can be rendered on the target page using this data. That is, the target data obtained from the request is rendered into the target functional component, resulting in the actual rendered object corresponding to the target functional component.

[0081] Optionally, in one implementation, the specified page position includes a page position in the scrolling direction of the scrolling operation that has a preset distance from the page position to which the target page has been scrolled;

[0082] Accordingly, in this implementation, based on the target data corresponding to the target functional component, the rendering of the display object for the target functional component is performed on the target page, including:

[0083] In response to detecting that the target page has scrolled to the specified page position, the display object for the target functional component is rendered on the target page based on the target data corresponding to the target functional component.

[0084] In this implementation, in response to detecting a scrolling operation on the target page, the determined target functional component includes a second functional component at the page position to which the scrolling operation has scrolled, and a second functional component at a page position in the scrolling direction of the scrolling operation that has a preset distance from the page position to which the scrolling operation has scrolled.

[0085] It is understandable that, since the target functional component also includes a second functional component located at a page position with a preset distance from the page position scrolled to in the scrolling direction of the scrolling operation, in response to detecting that the target page has scrolled to any page position, the target data corresponding to the target functional component is requested from the server. This allows the target data corresponding to the functional component at the specified page position to which the scrolling operation is to be performed to be obtained in advance. Furthermore, upon detecting that the target page has scrolled to the specified page position, the second functional component at that specified page position is rendered using the pre-obtained target data. This ensures that when the user scrolls the page to the specified page position, they can see the actual rendered object of the second functional component, improving page loading speed. Consequently, page loading is smoother when the user scrolls the page.

[0086] As can be seen, this solution can further improve page loading speed.

[0087] To better understand the contents of the embodiments of this disclosure, a specific example will be used for illustration below.

[0088] For dynamic pages composed of personalized functional components, each component does not have a fixed height; its height depends on the rendering of the corresponding business data. In related technologies, when a user opens a dynamic page, the interfaces of each functional component simultaneously send data requests to the server to obtain the corresponding business data, thereby rendering the relevant components. Since browsers have a limit on the number of requests they can make to resources under the same domain (corresponding to the business data mentioned above), exceeding this limit will be blocked. This can lead to non-first-screen resources consuming bandwidth meant for the first screen, causing the first-screen content to fail to render promptly and increasing the page's blank screen time.

[0089] To address the aforementioned issues, this example incorporates server-side pre-rendering technology. By pre-setting the height of components to occupy space, each component (corresponding to the functional components mentioned above) has its own skeleton, thereby expanding the page and preventing non-first-screen components from being rendered on the first screen, achieving the goal of rendering the page on demand.

[0090] like Figure 5 As shown, the specific implementation steps of this example are as follows:

[0091] (1) In response to detecting that the user has opened the target page, determine whether each component of the target page is a first screen component (corresponding to the first functional component on the first screen mentioned above);

[0092] When configuring dynamic pages in a personalized way, merchants can set up homepage components according to their business needs. The client can then identify whether each component is a homepage component based on the preset homepage components.

[0093] (2) If it is a component for the first screen, the pre-rendered DOM element (Document ObjectModel, text object model, corresponding to the pre-rendered object mentioned above) obtained from the server-side pre-rendering is obtained and overlaid on the real DOM element (corresponding to the real rendered object mentioned above). This allows users to quickly see the first screen content when opening the target page, achieving a visually instant-opening effect. The real DOM element needs to have a preset height set for the component, serving as a placeholder. That is, by obtaining the height of the pre-rendered DOM element, the component's skeleton height is set to expand the first screen, moving non-first screen components off the first screen to achieve on-demand rendering. Simultaneously, after the real DOM element is rendered, the pre-rendered DOM element is removed, displaying the actual page.

[0094] (3) If it is a non-first-screen component (corresponding to the second functional component above), a preset height also needs to be set for placeholder. The purpose of using a preset height for non-first-screen components is to expand the overall page height, so as to determine whether the non-first-screen component enters the user's view when the page scrolls and loads. When the non-first-screen component enters the user's view, it will be rendered on demand. Therefore, the height of the preset component needs to be very close to the actual rendering height in order to make the page rendering on demand more accurate.

[0095] Among them, the preset height of non-first screen components can be calculated based on the quantity of real materials (corresponding to the business data mentioned above) and combined with the UI (User Interface) visual design, i.e. the preset display size of each material, to obtain the actual rendering height of the component for placement.

[0096] (4) After using the preset component height to place space for each component, in response to the detection of a scroll operation on the target page, the business interface of the component at the page position scrolled to by the scroll operation sends a resource request to the server. When the client requests the resource for the component, the preset height placeholder of the component is removed, thereby displaying the real page.

[0097] Figure 6 This diagram illustrates a page skeleton. Each component has a preset height placeholder, allowing the entire page height to be displayed. When the page is opened, resources for the first-screen component are requested and rendered, and the placeholder is removed, thus displaying the actual content of the first-screen component. Furthermore, during page scrolling, the placeholder objects for each component allow for precise determination of whether a component is within the user's view. If any component enters the user's view, a request can be sent to render that component, achieving on-demand rendering. To ensure smoother page loading when the user scrolls, a preset distance can be added when determining whether a component is in the user's view. That is, when the current component is a certain distance before entering the viewport, a business interface request is initiated to pre-render it, ensuring that when the user scrolls to the component, they see the actual component data, not just the height placeholder.

[0098] In addition, in the above steps, a placeholder with a preset height was set for each component. Any placeholders added need to be removed at a reasonable time to display the actual component and thus the real page data. Each business component has its own business interface; the placeholder object for any component is removed only after the business interface request for that component has been completed.

[0099] As can be seen, this solution achieves on-demand rendering of dynamically structured pages by pre-setting the height of components for placement, optimizing page performance and improving page loading speed. At the same time, it saves bandwidth and resources, improves user experience and satisfaction, and has been applied in local life service scenarios.

[0100] Corresponding to the embodiments of the above methods, this disclosure also provides a page rendering apparatus, such as... Figure 7 As shown, the device includes:

[0101] The pre-rendering module 710 is used to display a pre-rendered object of a first functional component on the target page in response to the detection of a rendering instruction of the target page; wherein the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component.

[0102] The request module 720 is used to request target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data;

[0103] The rendering module 730 is configured to respond to a request to obtain target data corresponding to the first functional component, and based on the target data corresponding to the first functional component, render the display object of the first functional component on the target page, and hide the pre-rendered object displayed on the target page.

[0104] Optionally, the device further includes:

[0105] The determining module is used to determine the reference page structure of the target page based on the preset size of the first functional component and the preset size of the second functional component; wherein, the second functional component is a non-first screen functional component of the target page, and the reference page structure represents the reference arrangement position of each functional component of the target page;

[0106] The scrolling module is used to respond to the detection of a scrolling operation on the target page, and to render the display objects of the functional components that are not on the first screen in the target page based on the reference page structure of the target page.

[0107] Optionally, the device further includes:

[0108] The placeholder module is used to pre-place non-first-screen page positions of the target page based on the placeholder object of the second functional component and the reference page structure after the determining module determines the reference page structure of the target page based on the preset size of the first functional component and the preset size of the second functional component; wherein the size of the placeholder object matches the size of the second functional component.

[0109] A removal module is configured to remove the placeholder object of the second functional component from the target page in response to detecting that the second functional component meets the removal conditions;

[0110] The second functional component satisfies the removal condition by requesting the target data corresponding to the second functional component from the server.

[0111] Optionally, the scrolling module includes:

[0112] A determination submodule is used to, in response to the detection of a scrolling operation on the target page, determine a second functional component at a specified page position as the target functional component based on the reference page structure of the target page; wherein, the specified page position is the page position to be rendered determined based on the page position to which the target page has been scrolled.

[0113] The request submodule is used to request target data corresponding to the target functional component from the server.

[0114] The rendering submodule is used to render the display object of the target functional component on the target page based on the target data corresponding to the target functional component.

[0115] Optionally, the specified page position includes a page position in the scrolling direction of the scrolling operation that has a preset distance from the page position to which the target page has been scrolled;

[0116] The rendering submodule is specifically used for:

[0117] In response to detecting that the target page has scrolled to the specified page position, based on the target data corresponding to the target functional component, the display object for the target functional component is rendered on the target page.

[0118] Optionally, the preset size of the first functional component is the size of the pre-rendered object; the preset size of the second functional component is determined based on the amount of business data corresponding to the second functional component.

[0119] Optionally, the method for determining the preset size of the second functional component includes:

[0120] Obtain the quantity of business data corresponding to the second functional component from the server;

[0121] The preset size of the second functional component is calculated based on the amount of business data corresponding to the second functional component and the preset display size of the business data corresponding to the second functional component.

[0122] The collection, storage, use, processing, transmission, provision, and disclosure of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0123] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0124] An electronic device provided in this disclosure may include:

[0125] At least one processor; and

[0126] A memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the steps of any of the above-described page rendering methods.

[0127] This disclosure provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of any of the above-described page rendering methods.

[0128] In yet another embodiment provided in this disclosure, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to perform the steps of any of the page rendering methods described above.

[0129] Figure 8 A schematic block diagram of an example electronic device 800 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0130] like Figure 8As shown, device 800 includes a computing unit 801, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 802 or a computer program loaded from storage unit 808 into random access memory (RAM) 803. RAM 803 may also store various programs and data required for the operation of device 800. The computing unit 801, ROM 802, and RAM 803 are interconnected via bus 804. Input / output (I / O) interface 805 is also connected to bus 804.

[0131] Multiple components in device 800 are connected to I / O interface 805, including: input unit 806, such as keyboard, mouse, etc.; output unit 807, such as various types of monitors, speakers, etc.; storage unit 808, such as disk, optical disk, etc.; and communication unit 809, such as network card, modem, wireless transceiver, etc. Communication unit 809 allows device 800 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0132] The computing unit 801 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 801 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 801 performs the various methods and processes described above, such as page rendering methods. For example, in some embodiments, the page rendering method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 808. In some embodiments, part or all of the computer program may be loaded and / or installed on device 800 via ROM 802 and / or communication unit 809. When the computer program is loaded into RAM 803 and executed by the computing unit 801, one or more steps of the page rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 801 may be configured to perform page rendering methods by any other suitable means (e.g., by means of firmware).

[0133] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0134] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0135] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0136] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0137] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0138] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0139] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0140] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A page rendering method, applied to a client, wherein the client communicates with a server, the method comprising: In response to the detection of a rendering instruction for a target page, a pre-rendered object of a first functional component is displayed on the target page; wherein, the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component; the pre-rendered object of the first functional component is pre-stored in the client. Request the target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data; In response to a request to obtain target data corresponding to the first functional component, based on the target data corresponding to the first functional component, rendering of the display object for the first functional component is performed on the target page, and the pre-rendered object displayed on the target page is hidden; wherein, the method further includes: determining a reference page structure of the target page based on a preset size of the first functional component and a preset size of the second functional component; pre-positioning of non-first-screen page positions of the target page based on a placeholder object of the second functional component and the reference page structure; in response to detecting a scrolling operation on the target page, rendering of the display object for the non-first-screen functional component on the target page based on the reference page structure; the second functional component is a non-first-screen functional component of the target page, the reference page structure represents the reference arrangement position of each functional component of the target page, and the size of the placeholder object matches the size of the second functional component.

2. The method according to claim 1, wherein, After pre-positioning the non-first screen page positions of the target page based on the placeholder object of the second functional component and the reference page structure, the method further includes: In response to the detection that the second functional component meets the removal condition, the placeholder object of the second functional component is removed from the target page; The second functional component satisfies the removal condition by requesting the target data corresponding to the second functional component from the server.

3. The method according to claim 1 or 2, wherein, In response to detecting a scrolling operation on the target page, based on a reference page structure of the target page, rendering of display objects for functional components not on the first screen is performed on the target page, including: In response to detecting a scrolling operation on the target page, a second functional component at a specified page position is determined as the target functional component based on a reference page structure of the target page; wherein, the specified page position is the page position to be rendered determined based on the page position to which the target page has been scrolled. Request the target data corresponding to the target functional component from the server; Based on the target data corresponding to the target functional component, the display object of the target functional component is rendered on the target page.

4. The method according to claim 3, wherein, The specified page position includes a page position in the scrolling direction of the scrolling operation that has a preset distance from the page position to which the target page has been scrolled; The step of rendering a display object for the target functional component on the target page based on the target data corresponding to the target functional component includes: In response to detecting that the target page has scrolled to the specified page position, based on the target data corresponding to the target functional component, the display object for the target functional component is rendered on the target page.

5. The method according to claim 1, wherein, The preset size of the first functional component is the size of the pre-rendered object; The preset size of the second functional component is determined based on the amount of business data corresponding to the second functional component.

6. The method according to claim 5, wherein, The method for determining the preset size of the second functional component includes: Obtain the quantity of business data corresponding to the second functional component from the server; The preset size of the second functional component is calculated based on the amount of business data corresponding to the second functional component and the preset display size of the business data corresponding to the second functional component.

7. A page rendering apparatus, applied to a client, the client communicating with a server, the apparatus comprising: A pre-rendering module is used to display a pre-rendered object of a first functional component on the target page in response to the detection of a rendering instruction for the target page; wherein the first functional component is a functional component located on the first screen of the target page, and the pre-rendered object is a display object rendered based on the static business data corresponding to the first functional component; the pre-rendered object of the first functional component is pre-stored in the client. The request module is used to request target data corresponding to the first functional component from the server; wherein, the target data corresponding to any functional component includes static business data and dynamic business data; A rendering module is used to respond to a request to obtain target data corresponding to the first functional component, and based on the target data corresponding to the first functional component, to render the display object of the first functional component on the target page, and hide the pre-rendered object displayed on the target page; wherein, the device further includes: a determining module, used to determine a reference page structure of the target page based on a preset size of the first functional component and a preset size of the second functional component; a placeholder module, used to pre-place the non-first screen page positions of the target page based on the placeholder object of the second functional component and the reference page structure; a scrolling module, used to respond to detecting a scrolling operation on the target page, and based on the reference page structure of the target page, to render the display object of the non-first screen functional component on the target page; the second functional component is a non-first screen functional component of the target page, the reference page structure represents the reference arrangement position of each functional component of the target page, and the size of the placeholder object matches the size of the second functional component.

8. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-6.

9. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-6.

10. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-6.

Images