Page display method and device, equipment and medium

Abstract

The invention provides a page display method and device, equipment and a medium, and the method comprises the steps: obtaining a page object of a target page in response to a loading request for the target page, the page object comprising a skeleton screen object of a first page component; when it is determined that the display position of the first page component is located in a first display area of the target page, an initial page is generated according to a skeleton screen object of the first page component; obtaining page data of the target page and a page object of the first page component; and according to the page data of the target page and the page object of the first page component, updating the initial page, and obtaining and displaying the target page. According to the method, the page loading speed can be increased, the page display efficiency is improved, and thus the user experience is improved.

Description

Technical Field

[0001] This application relates to the field of page optimization technology, and in particular to a page display method, apparatus, device, and medium. Background Technology

[0002] With the development of computer networks, people can obtain various information online, such as browsing text, viewing videos and images. This information is usually presented to users in page format. However, as functionality becomes increasingly rich, the content displayed on pages is growing, meaning the page objects are becoming larger. Therefore, when users open pages with a lot of content, a significant amount of time needs to be spent downloading the page objects, resulting in slow page loading speeds. This can lead to a prolonged period of blank screen displaying the page content, negatively impacting the user experience. Summary of the Invention

[0003] This application provides a page display method, apparatus, device, and medium that can improve page loading speed, enhance page display efficiency, and thus improve user experience.

[0004] In a first aspect, embodiments of this application provide a page display method, including:

[0005] In response to a loading request for a target page, the page object of the target page is obtained, the page object including the skeleton screen object of the first page component;

[0006] When it is determined that the display position of the first page component is located in the first display area of ​​the target page, an initial page is generated based on the skeleton screen object of the first page component;

[0007] Obtain the page data of the target page and the page object of the first page component;

[0008] Based on the page data of the target page and the page object of the first page component, the initial page is updated to obtain and display the target page.

[0009] Secondly, embodiments of this application provide a page display device, including:

[0010] The first acquisition module is used to acquire the page object of the target page in response to a loading request for the target page, wherein the page object includes the skeleton screen object of the first page component;

[0011] The page generation module is used to generate an initial page based on the skeleton screen object of the first page component when the display position of the first page component is located in the first display area of ​​the target page.

[0012] The second acquisition module is used to acquire the page data of the target page and the page object of the first page component;

[0013] The page display module is used to update the initial page based on the page data of the target page and the page object of the first page component, so as to obtain and display the target page.

[0014] Thirdly, embodiments of this application provide an electronic device, including:

[0015] A processor and a memory, the memory being used to store a computer program, and the processor being used to invoke and run the computer program stored in the memory to perform the page display method as described in the foregoing first aspect embodiment and various implementations.

[0016] Fourthly, embodiments of this application provide a computer-readable storage medium for storing a computer program that causes a computer to perform the page display method as described in the first aspect embodiment and its various implementations.

[0017] Fifthly, embodiments of this application provide a computer program product containing program instructions that, when executed on an electronic device, cause the electronic device to perform the page display method as described in the first aspect embodiment and its various implementations.

[0018] The technical solution disclosed in this application involves obtaining the page object of the target page based on a loading request. When it is determined that the display position of the first page component in the target page is located in the first display area of ​​the target page, an initial page is generated based on the skeleton screen object of the first page component. Then, the page data of the target page and the page object of the first page component are obtained. Finally, the initial page is updated based on the page data of the target page and the page object of the first page component to obtain the target page, which is then displayed. This application replaces the page objects of page components corresponding to some content in the page with smaller skeleton screen objects. This reduces the size of the page object when constructing the page object based on the skeleton screen object. As a result, the smaller page object size improves page loading speed, shortens page display time, and enhances page display efficiency, thereby improving the user experience. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 A flowchart illustrating a page display method provided in an embodiment of this application;

[0021] Figure 2 This is a schematic diagram of a page display process in related technologies;

[0022] Figure 3 A schematic diagram of an initial page provided for an embodiment of this application;

[0023] Figure 4a A schematic diagram of the structure of a target page provided in an embodiment of this application;

[0024] Figure 4b This is a schematic diagram of another target page structure provided in an embodiment of this application;

[0025] Figure 5 A flowchart illustrating how to update an initial page to obtain a target page, as provided in this application embodiment;

[0026] Figure 6 A flowchart illustrating another page display method provided in this application embodiment;

[0027] Figure 7 This is a schematic diagram of another target page structure provided in an embodiment of this application;

[0028] Figure 8 A flowchart illustrating yet another page display method provided in this application embodiment;

[0029] Figure 9 A schematic block diagram of a page display device provided in an embodiment of this application;

[0030] Figure 10 This is a schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0031] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0032] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0033] In this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or solution described as "exemplary" or "for example" in this application should not be construed as being better or more advantageous than other embodiments or solutions. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0034] In the description of the embodiments in this application, unless otherwise stated, "multiple" means two or more, that is, at least two. "At least one" means one or more. "Any" means any one or any several.

[0035] As mentioned earlier, with the continuous enrichment of functions, the content displayed on a page is becoming increasingly larger, which means that the size of page objects is also increasing. Therefore, when a user opens a page with a large amount of content, it takes a significant amount of time to load the page objects and then request page data, resulting in a slow page loading speed. This leads to a prolonged period of blank screen displaying the page content, negatively impacting the user experience.

[0036] To address the aforementioned technical problems, this application provides a page display method, apparatus, device, and medium to solve the problem that when a user opens a page with an excessively large object size, the page loading speed is too slow, causing the user to wait for a long time and affecting the user experience.

[0037] The technical solutions provided by the embodiments of this application will be described in detail below through some examples. The embodiments described below can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0038] Figure 1This is a flowchart illustrating a page display method provided in an embodiment of this application. The page display method of this application embodiment can be executed by a page display device, which can consist of hardware and / or software and can be integrated into an electronic device.

[0039] In this application, the electronic device can be, but is not limited to, smartphones, tablets, personal digital assistants, in-vehicle devices, and wearable devices, etc. This application does not impose specific limitations on the type of electronic device. Furthermore, the electronic device also has a client installed, allowing users to view or browse any target page through the client. That is, the embodiments of this application can be specifically executed by a client running on the electronic device. Here, the client is an application (APP) that corresponds to the server and provides local services to the user, such as shopping APPs, search APPs, and other types of APPs, etc. The type of client is not specifically limited here.

[0040] like Figure 1 As shown, the method may include the following steps:

[0041] S101, in response to a loading request for the target page, obtain the page object of the target page, which includes the skeleton screen object of the first page component.

[0042] The target page can be any page provided by the client to the user, such as the homepage or other pages besides the homepage. This application does not impose specific restrictions on the target page.

[0043] The above-mentioned target page loading request can be understood as a request to access or open the target page.

[0044] It should be understood that the page object in this application can refer to front-end code. That is, the page object of the target page can be represented as the front-end code of the target page.

[0045] Correspondingly, the page object of the target page includes the skeleton screen object of the first page component, which can refer to the skeleton screen code of the first page component.

[0046] like Figure 2As shown, in related technologies, when a user accesses a target page on a client, the client first retrieves the page object of the target page from the object file server based on the user's triggering of a loading request for the target page. Then, after the page object is loaded, the client retrieves the page data of the target page through a page data retrieval request while running the page object. Subsequently, after retrieving the page data of the target page, the client renders the page data to obtain the rendering result and displays the target page based on the rendering result. However, when there is a lot of content to be displayed on the target page, the size of the target page object increases, so the client needs a longer time to retrieve the page object from the object file server. This results in the client displaying a blank screen for a long time during the target page loading process, affecting the user's browsing or viewing experience of the target page.

[0047] To address the issue of prolonged blank screen display during target page loading in related technologies, this application replaces some page components corresponding to the actual content of the target page with skeleton screens. In other words, it replaces the page objects of some page components with skeleton screen objects, resulting in the target page object containing skeleton screen objects for some page components, rather than page objects for all page components. This reduces the size of the target page object, thereby shortening the time it takes for the client to retrieve the target page object from the object file server, improving the client's target page loading speed, and enhancing the user's browsing or viewing experience.

[0048] The aforementioned object file service can be understood as a service that provides the corresponding page object files. Furthermore, this object file service can run on the client side. In this application, the object file service can be understood as a code file service.

[0049] In some alternative embodiments, when a user views a target page using the client, the user can enter the network address of the target page in the client to send a loading request for the target page, or click the client's icon to send a loading request for the target page, or enter a voice command to open the client to send a loading request for the target page, etc. This application does not impose any restrictions on the specific form in which the user sends a loading request for the target page.

[0050] When a user sends a load request for a target page, the client can retrieve the page object of the target page from the object file service based on the load request.

[0051] In this application, the page object of the target page includes the skeleton screen object of the first page component. The number of the first page components is one or more.

[0052] The first page component can be any page component located on the target page. Optionally, the first page component can be at least one of a container view component, a basic content component, a form component, a multimedia component, and other components.

[0053] The aforementioned container-type view components can contain other components, serving as the foundation for building the target page layout. These container-type view components include: the `view` component, the `scroll-view` component, and the `swiper` component. The `view` component is a block-level component used for layout display; the `scroll-view` component is used to implement scrollable view functionality; and the `swiper` component is used to implement features such as image carousels, image previews, and page swiping.

[0054] The aforementioned basic content components can be used to display information such as icons, text, and progress bars on the target page. These basic content components include: an icon component, a text component, and a progress component. The icon component can be used to display content information; the progress component can be used to display progress status, such as the completion rate of data or the playback progress of media resources.

[0055] The above form component can be used to receive information and pass it to the server, enabling interaction between the client and the user.

[0056] The aforementioned multimedia components can be used to enrich target pages and increase their appeal to users. These multimedia components include image components, audio components, and video components.

[0057] Other components mentioned above may include canvas components, etc. This application does not impose specific limitations on other components.

[0058] S102, when it is determined that the display position of the first page component is located in the first display area of ​​the target page, the initial page is generated according to the skeleton screen object of the first page component.

[0059] In the embodiments of this application, the target page accessed by the user can be a scrolling page or a single-screen page.

[0060] Among them, a scrolling page is a page layout form that uses vertical scrolling as the main interaction method. That is, it displays content through vertical scrolling, allowing users to browse or view more content by scrolling the mouse or touching the screen.

[0061] A single-screen page, also known as a fixed page, requires the entire screen's content to be displayed when it is shown.

[0062] It should be noted that when a user accesses a single-screen page, that single-screen page only has a primary display area. When a user accesses a scrollable page, that scrollable page includes a primary display area and at least one secondary display area.

[0063] Specifically, when the target page includes a first display area and at least one second display area, the first display area has a higher priority than any of the second display areas. That is, when displaying the target page, the content in the first display area is displayed first. After the content in the first display area is displayed, if the user scrolls to any of the second display areas, then the content in that second display area is displayed.

[0064] Considering that the display position of the first page component on the target page can be determined based on the page object of the target page, this application can determine the display position of each first page component on the target page by parsing the page object of the target page on the client side.

[0065] In some alternative embodiments, when it is determined that the display position of any first page component is located in the first display area of ​​the target page, it indicates that the first page component needs to be displayed to the user immediately. At this time, the client can generate an initial page based on the skeleton screen object of the first page component and display the initial page to the user, thereby avoiding displaying a blank screen to the user for a long time.

[0066] In this embodiment, the client generates an initial page based on the skeleton screen object of the first page component. Specifically, the skeleton screen data of the first page component can be obtained from the skeleton screen object. Then, the obtained skeleton screen data is rendered to generate the skeleton screen of the first page component. Subsequently, based on the display position of the first page component, the skeleton screen of the first page component is displayed in the first display area of ​​the target page, thus obtaining the initial page.

[0067] In this application, the skeleton screen data of the first page component is rendered, and existing rendering methods can be used. No specific restrictions are imposed on it here.

[0068] It should be understood that a skeleton screen is a screen that displays the approximate structure and display position of some first-page components of a target page to the user via the client before the page data is fully loaded.

[0069] For example, such as Figure 3As shown, assume the target page object includes two skeleton screen objects for the first page components, namely first page component XX1 and first page component XX2. Furthermore, when the display positions of first page component XX1 and first page component XX2 are both located within the first display area of ​​the target page, skeleton screen XX1 is generated based on the skeleton screen object of first page component XX1, and skeleton screen XX2 is generated based on the skeleton screen object of first page component XX2. Then, according to the display positions of first page component XX1 and first page component XX2, skeleton screen XX1 and skeleton screen XX2 are displayed respectively within the first display area of ​​the target page, thus obtaining the initial page.

[0070] S103, obtain the page data of the target page and the page object of the first page component.

[0071] In some optional embodiments, after generating the initial page, the initial page can be displayed to the user. Furthermore, during the process of displaying the initial page to the user, the client can concurrently execute a page data retrieval request to the data server for the target page, and a page object retrieval request to the object management server of the remote component for the first page component. The page data request carries the target page identifier and the client identifier. The page object retrieval request carries the first page component identifier and the client identifier. It should be understood that the page object retrieval request can refer to a front-end code retrieval request.

[0072] The target page identifier is unique information for the target page, and the client identifier is unique information for the client. That is, the data server can determine which page's data the client needs based on the target page identifier, and determine which client sent the page data retrieval request based on the client identifier.

[0073] Accordingly, the first page component identifier is the unique information of the first page component, so that the file management server of the remote component can determine which first page component page objects the client needs to obtain based on the first page component identifier, and determine which client sent the page object acquisition request based on the client identifier.

[0074] Therefore, when the data server receives a request from the client to retrieve page data for a target page, it parses the request to obtain the target page identifier and the client identifier. Then, the data server retrieves the target page data from the page database based on the target page identifier. After retrieving the target page data, the data server can return the target page data to the client based on the client identifier, allowing the client to display the page based on that data.

[0075] Simultaneously, when the object management server of the remote component receives a request from the client to retrieve the page object of the first page component, it parses the request to obtain the identifier of the first page component and the client identifier. Then, the object management server retrieves the page object of the first page component from the object database based on the first page component identifier. Next, the object management server returns the page object of the first page component to the client based on the client identifier, enabling the client to update the skeleton screen of the first page component based on this page object to display the specific content of the first page component.

[0076] It should be understood that the aforementioned remote component object management server refers to a service program or server that stores and manages the page objects of the first page component.

[0077] In other words, this application packages the first page component into a remote component and stores the page object of the remote component in the object management server of the remote component, so that the client can obtain the page object of the first page component from the object management server of the remote component.

[0078] S104, based on the page data of the target page and the page object of the first page component, update the initial page, obtain and display the target page.

[0079] In this embodiment, the target page includes at least one first page component and at least one second page component, wherein the display priority of the second page component is higher than that of the first page component. That is, when the target page includes both a first page component and a second page component, the content of the second page component is displayed to the user first, and then the content of the first page component is displayed to the user at other times (not the first time). In other words, the first time is earlier than other times.

[0080] The second page component mentioned above can be any page component located on the target page. Optionally, the second page component can be at least one of a container view component, a basic content component, a form component, a multimedia component, and other components.

[0081] Considering that the target page's page data includes the implementation logic data (resource data) of the first page component and the resource data of the second page component, the client can update the initial page based on the target page's page data and the page object of the first page component to obtain the target page.

[0082] It should be understood that updating the initial page means re-rendering the initial page based on the page data of the target page and the page object of the first page component to generate the target page.

[0083] In some optional embodiments, the client updates the initial page to obtain the target page based on the page data of the target page and the page object of the first page component. Resource data of the first page component and resource data of the second page component can be obtained from the page data of the target page. Then, based on the resource data and page object of the first page component, the component content of the first page component is obtained, and the component content of the second page component is obtained based on the resource data of the second page component. Then, based on the component content of the first and second page components, the initial page is rendered again to generate the target page. Finally, the target page is displayed to the user through the client. See [link to details] for further information. Figure 4a and Figure 4b As shown.

[0084] The component content of the first page component mentioned above specifically refers to the interactive interface corresponding to the first page component. Similarly, the component content of the second page component mentioned above specifically refers to the interactive interface corresponding to the second page component. This interactive interface can be understood as the UI (User Interface).

[0085] The above Figure 4a This is a target page that is displayed when the target page is a scrollable page. Figure 4b This is a target page that is displayed when the target page is a single-screen page.

[0086] The technical solution disclosed in this application involves obtaining the page object of the target page based on a loading request. When it is determined that the display position of the first page component in the target page is located in the first display area of ​​the target page, an initial page is generated based on the skeleton screen object of the first page component. Then, the page data of the target page and the page object of the first page component are obtained. Finally, the initial page is updated based on the page data of the target page and the page object of the first page component to obtain the target page, which is then displayed. This application replaces the page objects of page components corresponding to some content in the page with smaller skeleton screen objects. This reduces the size of the page object when constructing the page object based on the skeleton screen object. As a result, the smaller page object size improves page loading speed, shortens page display time, and enhances page display efficiency, thereby improving the user experience.

[0087] Based on the foregoing embodiments, this application further explains how to update the initial page to obtain the target page based on the page data of the target page and the page object of the first page component. For example... Figure 5 As shown, Figure 1 S104 may include the following steps:

[0088] S104-1, Obtain resource data of the first page component and resource data of at least one second page component from the page data of the target page.

[0089] S104-2, based on the resource data of the first page component, the resource data of the second page component, and the page object of the first page component, update the initial page to obtain the target page.

[0090] In some optional embodiments, the client can obtain the resource data of the first page component and the resource data of the second page component from the page data of the target page according to the first page component identifier and the second page component identifier, respectively.

[0091] Furthermore, after obtaining the resource data of the first page component, the client can pass the resource data of the first page component to the page object of the first page component, so that the page object of the first page component can perform rendering operations based on the resource data of the first page component and obtain the component content of the first page component.

[0092] At the same time, the client also performs rendering operations based on the resource data of the second page component to obtain the component content of the second page component.

[0093] Then, the client can update the initial page based on the component content of the first page component and the component content of the second page component to obtain the target page.

[0094] In this application, the aforementioned page component identifier refers to the unique information of a page component, such as a page component number, which is not specifically limited here. The page components include: a first page component and a second page component.

[0095] As an optional implementation, the above method of updating the initial page to obtain the target page based on the component content of the first page component and the component content of the second page component can be achieved by replacing the skeleton screen of the first page component in the initial page with the component content of the first page component, and displaying the component content of the second page component in the initial page according to the display position of the second page component, so as to obtain the target page.

[0096] The technical solution disclosed in this application involves obtaining the page object of the target page based on a loading request for the target page. When it is determined that the display position of the first page component in the target page is located in the first display area of ​​the target page, an initial page is generated based on the skeleton screen object of the first page component. Then, the page data of the target page and the page object of the first page component are obtained. The initial page is then updated based on the page data of the target page and the page object of the first page component to obtain the target page, which is then displayed. This application replaces the page object of a page component corresponding to some content in the page with a smaller skeleton screen object. This reduces the size of the page object when constructing the page object based on the skeleton screen object. As a result, the smaller page object size improves page loading speed, shortens page display time, and enhances page display efficiency, thereby improving the user experience. Furthermore, by using the page data of the target page and the page object of the first page component to replace the skeleton screen in the initial page, and displaying the corresponding actual page content at the display position of the second page component, the page loading process becomes more natural and smooth, preventing the page from remaining blank for extended periods, thus greatly improving the user experience.

[0097] The following is combined with Figure 6 This application provides a further explanation of the page display method disclosed herein. Figure 6 As shown, the method for displaying this page may include the following steps:

[0098] S301, in response to a loading request for the target page, obtain the page object of the target page, the page object including at least one skeleton screen object of the first page component.

[0099] S302, when it is determined that the display position of the first page component is located in the first display area of ​​the target page, the initial page is generated according to the skeleton screen object of the first page component.

[0100] S303, obtain the page data of the first display area and the page object of the first page component.

[0101] S304, Update the first display area in the initial page based on the page data of the first display area and the page object of the first page component.

[0102] S305, Obtain page data for the second display area of ​​the target page.

[0103] S306, Render the page data in the second display area.

[0104] Considering that the target page is a scrollable page, which may include a first display area and at least one second display area, in order to further improve page loading speed, this application, when determining that the display position of any first page component is located in the first display area of ​​the target page, may acquire only the page data of the first display area and the page object of the first page component during the initial page display process. The first display area may display the first page component and at least one second page component.

[0105] In other words, when the client sends a request to the data server to retrieve page data of the target page, the page data request carries not only the target page identifier and the client identifier, but also the display range of the first display area, so that the data server can retrieve the page data of the first display area of ​​the target page from the page database according to the display range of the first display area.

[0106] The display range of the first display area can be determined by any existing method, and this application will not elaborate on this further.

[0107] Then, the client obtains the resource data of the first page component and the resource data of each second page component from the page data of the first display area. Based on the resource data and page object of the first page component, it obtains the component content of the first page component, and the component content of the second page component based on the resource data of each second page component. Then, based on the component content of the first and second page components, the first display area in the initial page is re-rendered to obtain the updated initial page, such as... Figure 7 As shown. Among them Figure 7 This is an alternative target page to display when the target page is a scrollable page.

[0108] In some optional embodiments, during the process of displaying the updated initial page to the user, the client may concurrently execute a request to the data server to retrieve page data for the second display area of ​​the target page. This page data request carries the target page identifier, the client identifier, and the display range of the second display area.

[0109] Furthermore, when the data server receives a request from the client to retrieve page data for the second display area, it parses the request to obtain the target page identifier, the client identifier, and the display range of the second display area. Then, based on the target page identifier and the display range of the second display area, the data server retrieves the page data for the second display area from the page database. After retrieving the page data for the second display area, the server can return the page data to the client based on the client identifier, allowing the client to render and display the content based on this data. At least one second page component is displayed within the second display area.

[0110] In other words, while displaying the actual page content of the first display area in a scrolling page, the client can also obtain the page data of the second display area from the data server and render the page data of the second display area to obtain the actual page content of the second display area. This allows the actual page content of the second display area to be displayed to the user in real time when the user scrolls the target page from the first display area to any second display area.

[0111] Considering that there is at least one second display area, this application can optionally first obtain page data of a portion of the second display areas during the process of displaying the updated initial page. When the actual page content of one of the second display areas is displayed, the page data of the remaining second display areas is then obtained. In this way, by obtaining page data of different second display areas at different time periods, a large amount of page data of the second display areas can be obtained in multiple times. As the amount of page data obtained is small, the page data acquisition speed can be improved, thereby further improving the loading speed of the target page.

[0112] The technical solution disclosed in this application replaces the page objects of page components corresponding to some content on a page with smaller skeleton screen objects. This reduces the size of the page object when constructing the page object based on the skeleton screen object. Consequently, the smaller page object size improves page loading speed, shortens page display time, and enhances page display efficiency, thus improving the user experience. Furthermore, by acquiring only the page data of the first display area during the initial page display process and updating the first display area in the initial page based on this data, the loading speed of the target page can be further improved.

[0113] In some optional implementation scenarios, the target page in this application may include a first display area and a second display area. Therefore, when it is determined that the display position of the first page component is located in the second display area of ​​the target page, this application can obtain the page data of the first display area of ​​the target page and obtain the target page based on the page data of the first display area. The following is combined with... Figure 8 The present application provides a detailed description of how the target page is obtained based on page data from the first display area, as provided in the embodiments of this application.

[0114] like Figure 8 As shown, the method may include the following steps:

[0115] S401, in response to a loading request for the target page, obtain the page object of the target page, the page object including at least one skeleton screen object of the first page component.

[0116] S402, when it is determined that the display position of the first page component is located in the second display area of ​​the target page, the page data of the first display area is obtained.

[0117] S403, render the page data of the first display area to obtain the rendering result, and obtain the skeleton screen based on the skeleton screen object of the first page component.

[0118] S404: Based on the rendering results and the skeleton screen, obtain the target page.

[0119] S405, Display the target page.

[0120] In some alternative embodiments, when it is determined that the display positions of all first page components are located within the second display area of ​​the target page, it indicates that these first page components do not need to be displayed to the user immediately. In this case, the client can send a page data retrieval request for the first display area of ​​the target page to the data server to obtain the page data for the first display area from the data server.

[0121] Next, the client renders the page data of the first display area obtained from the data server to obtain the rendering result. Simultaneously, it also renders the skeleton screen data in the skeleton screen object of the first page component to obtain the skeleton screen corresponding to the first page component. Then, based on the rendering result and the skeleton screen, the target page is obtained and displayed.

[0122] In some optional embodiments, considering that the skeleton screen corresponding to the first page component will be displayed in the second display area of ​​the target page, in order to ensure that the user can see the actual content of the second display area when scrolling the target page from the first display area to the second display area, this application can obtain the page data of the second display area and the page object of the first page component through the client during the display of the target page. Then, based on the page data of the second display area and the page object of the first page component, the target page is updated so that both the first and second display areas of the updated target page can display the corresponding actual content.

[0123] Specifically, updating the target page based on the page data of the second display area and the page object of the first page component can be achieved by retrieving the resource data of the first page component and the resource data of the second page component from the page data of the second display area. Then, based on the resource data and page object of the first page component, the component content of the first page component is obtained, and the component content of the second page component is obtained based on the resource data of the second page component. Finally, based on the component content of the first and second page components, the target page is re-rendered to generate a new target page.

[0124] The technical solution disclosed in this application involves obtaining the page object of a target page based on a loading request for that page. When it is determined that the display position of a first page component on the target page is located in the second display area of ​​the target page, the page data of the first display area is obtained, and the page data of the first display area is rendered to obtain a rendering result. Simultaneously, a skeleton screen is obtained based on the skeleton screen object of the first page component. Then, based on the rendering result and the skeleton screen, the target page is obtained and displayed. This application replaces the page object of a page component corresponding to some content on the page with a smaller skeleton screen object. This reduces the size of the page object when the page is constructed based on the skeleton screen object. As a result, the smaller page object size improves page loading speed, shortens page display time, and enhances page display efficiency, thereby improving the user experience.

[0125] The following is a reference to the appendix. Figure 9 This application describes a page display device based on an embodiment. Figure 9 As shown, the page display device 500 includes: a first acquisition module 510, a page generation module 520, a second acquisition module 530, and a page display module 540.

[0126] The first acquisition module 510 is used to acquire the page object of the target page in response to a loading request for the target page, wherein the page object includes the skeleton screen object of the first page component.

[0127] The page generation module 520 is used to generate an initial page based on the skeleton screen object of the first page component when it is determined that the display position of the first page component is located in the first display area of ​​the target page;

[0128] The second acquisition module 530 is used to acquire the page data of the target page and the page object of the first page component;

[0129] The page display module 540 is used to update the initial page based on the page data of the target page and the page object of the first page component, so as to obtain and display the target page.

[0130] In one optional implementation of this application embodiment, the page display device 500 further includes:

[0131] The third acquisition module is used to acquire page data of the first display area when it is determined that the display position of the first page component is located in the second display area of ​​the target page;

[0132] The rendering module is used to render the page data of the first display area to obtain the rendering result, and to obtain the skeleton screen based on the skeleton screen object of the first page component.

[0133] The fourth acquisition module is used to obtain the target page based on the rendering result and the skeleton screen;

[0134] The page display module 540 is specifically used to display the target page.

[0135] In one optional implementation of this application embodiment, the page display device 500 further includes:

[0136] The fifth acquisition module is used to acquire the page data of the second display area and the page object of the first page component;

[0137] The page update module is used to update the target page based on the page data of the second display area and the page object of the first page component.

[0138] In one optional implementation of this application, the priority of the first display area is higher than that of the second display area.

[0139] In one optional implementation of this application embodiment, the page display module 540 includes:

[0140] The data acquisition unit is used to acquire resource data of the first page component and resource data of the second page component from the page data of the target page;

[0141] The update unit is used to update the initial page based on the resource data of the first page component, the resource data of the second page component, and the page object of the first page component to obtain the target page.

[0142] In one optional implementation of this application, the update unit is specifically configured to: transfer the resource data of the first page component to the page object of the first page component to obtain the component content of the first page component; obtain the component content of the second page component based on the resource data of the second page component; and update the initial page based on the component content of the first page component and the component content of the second page component to obtain the target page.

[0143] In an optional implementation of this application embodiment, the updating unit is further configured to:

[0144] The skeleton screen of the first page component in the initial page is replaced with the component content of the first page component; according to the display position of the second page component, the component content of the second page component is displayed in the initial page to obtain the target page.

[0145] In one optional implementation of this application, the display priority of the first page component is lower than that of the second page component.

[0146] In one optional implementation of this application embodiment, the page display device 500 further includes:

[0147] The sixth acquisition module is used to acquire the page data of the first display area and the page object of the first page component;

[0148] The page update module is further configured to update the first display area in the initial page based on the page data of the first display area and the page object of the first page component;

[0149] The seventh acquisition module is used to acquire page data of the second display area of ​​the target page;

[0150] The rendering module is also used to render the page data of the second display area.

[0151] In one optional implementation of this application embodiment, the page generation module 520 is specifically used for:

[0152] Obtain the skeleton screen data of the first page component from the skeleton screen object of the first page component; render the skeleton screen data of the first page component to generate the skeleton screen of the first page component; display the skeleton screen of the first page component in the first display area of ​​the target page according to the display position of the first page component to obtain the initial page.

[0153] It should be understood that the device embodiments and the foregoing method embodiments can correspond to each other, and similar descriptions can be referred to the method embodiments. To avoid repetition, further details will not be provided here. Specifically, Figure 9 The device 500 shown can perform Figure 1 The corresponding method embodiments, and the foregoing and other operations and / or functions of each module in device 500 are respectively implemented to achieve Figure 1 For the sake of brevity, the corresponding processes in each method are not described in detail here.

[0154] The apparatus 500 of this application embodiment has been described above from the perspective of functional modules in conjunction with the accompanying drawings. It should be understood that this functional module can be implemented in hardware, in software instructions, or in a combination of hardware and software modules. Specifically, the steps of the first aspect method embodiment in this application can be completed by integrated logic circuits in the processor's hardware and / or by software instructions. The steps of the first aspect method disclosed in this application embodiment can be directly embodied as being executed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. Optionally, the software module can be located in a mature storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, etc. This storage medium is located in memory, and the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the first aspect method embodiment described above.

[0155] Figure 10 This is a schematic block diagram of an electronic device provided as an embodiment of this application. Figure 10 As shown, the electronic device 600 may include a memory 610 and a processor 620. The memory 610 stores computer programs and transmits the program code to the processor 620. In other words, the processor 620 can call and run the computer program from the memory 610 to implement the page display method described in the first aspect of the embodiments of this application.

[0156] For example, the processor 620 can be used to execute the above-described page display method according to instructions in the computer program.

[0157] In some embodiments of this application, the processor 620 may include, but is not limited to:

[0158] General-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0159] In some embodiments of this application, the memory 610 includes, but is not limited to:

[0160] Volatile memory and / or non-volatile memory. Non-volatile memory may be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory may be random access memory (RAM), used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDR SDRAM), Enhanced Synchronous DRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), and Direct Memory Bus RAM (DR RAM).

[0161] In some embodiments of this application, the computer program may be divided into one or more modules, which are stored in the memory 610 and executed by the processor 620 to complete the page display method provided in this application. The one or more modules may be a series of computer program instruction segments capable of performing specific functions, which describe the execution process of the computer program in the electronic device.

[0162] like Figure 10 As shown, the electronic device 600 may further include:

[0163] Transceiver 630, which can be connected to processor 620 or memory 610.

[0164] The processor 620 can control the transceiver 630 to communicate with other devices; specifically, it can send information or data to other devices or receive information or data sent by other devices. The transceiver 630 may include a transmitter and a receiver. The transceiver 630 may further include antennas, and the number of antennas may be one or more.

[0165] It should be understood that the various components in the electronic device are connected through a bus system, which includes a data bus, a power bus, a control bus, and a status signal bus.

[0166] This application also provides a computer storage medium having a computer program stored thereon, which, when executed by a computer, enables the computer to perform the page display method described in the first aspect above.

[0167] This application also provides a computer program product containing program instructions that, when executed on an electronic device, cause the electronic device to perform the page display method described in the first aspect above.

[0168] When implemented using software, it can be implemented wholly or partially as a computer program product. This computer program product includes one or more computer instructions. When these computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., digital video discs, DVDs), or semiconductor media (e.g., solid-state drives, SSDs), etc.

[0169] Those skilled in the art will recognize that the modules and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0170] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or modules may be electrical, mechanical, or other forms.

[0171] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. For example, the functional modules in the various embodiments of this application may be integrated into one processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.

[0172] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0173] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page display method characterized by comprising: The method comprises: in response to a loading request for a target page, obtaining a page object of the target page, the page object comprising a skeleton screen object of a first page component; when it is determined that a display position of the first page component is located in a first display area of the target page, generating an initial page according to the skeleton screen object of the first page component; obtaining page data of the target page and a page object of the first page component; updating the initial page according to the page data of the target page and the page object of the first page component to obtain and display the target page.

2. The method of claim 1, wherein, The method further comprises: when it is determined that the display position of the first page component is located in a second display area of the target page, obtaining page data of the first display area; rendering the page data of the first display area to obtain a rendering result, and obtaining a skeleton screen according to the skeleton screen object of the first page component; obtaining the target page according to the rendering result and the skeleton screen; displaying the target page.

3. The method of claim 2, wherein, The method further comprises: obtaining page data of the second display area and a page object of the first page component; updating the target page according to the page data of the second display area and the page object of the first page component.

4. The method of claim 2, wherein, The priority of the first display area is higher than the priority of the second display area.

5. The method of claim 1, wherein, The updating of the initial page according to the page data of the target page and the page object of the first page component to obtain the target page comprises: obtaining resource data of the first page component and resource data of a second page component from the page data of the target page; updating the initial page according to the resource data of the first page component, the resource data of the second page component, and the page object of the first page component to obtain the target page.

6. The method of claim 5, wherein, The updating of the initial page according to the resource data of the first page component, the resource data of the second page component, and the page object of the first page component to obtain the target page comprises: passing the resource data of the first page component to the page object of the first page component to obtain component content of the first page component; obtaining component content of the second page component according to the resource data of the second page component; updating the initial page according to the component content of the first page component and the component content of the second page component to obtain the target page.

7. The method of claim 6, wherein, The updating of the initial page according to the component content of the first page component and the component content of the second page component to obtain the target page comprises: replacing the skeleton screen of the first page component in the initial page with the component content of the first page component; displaying the component content of the second page component in the initial page according to the display position of the second page component to obtain the target page.

8. The method according to any one of claims 5-7, characterized in that, The display priority of the first page component is lower than the display priority of the second page component.

9. The method of claim 1, wherein, The method further comprises: obtaining page data of the first display area and a page object of the first page component; According to the page data of the first display area and the page object of the first page component, the first display area in the initial page is updated; Obtain the page data of the second display area of the target page; Render the page data of the second display area.

10. The method of claim 1, wherein, The generating initial page according to the first page component's skeleton screen object comprises: Obtaining the first page component's skeleton screen data from the first page component's skeleton screen object; Rendering the first page component's skeleton screen data to generate the first page component's skeleton screen; According to the display position of the first page component, display the first page component's skeleton screen in the first display area of the target page to obtain the initial page.

11. A page display device characterized by comprising: Comprise: The first acquisition module is used for obtaining the page object of the target page in response to the loading request of the target page, and the page object comprises the skeleton screen object of the first page component; The page generation module is used for generating the initial page according to the skeleton screen object of the first page component when the display position of the first page component is located in the first display area of the target page; The second acquisition module is used for obtaining the page data of the target page and the page object of the first page component; The page display module is used for updating the initial page according to the page data of the target page and the page object of the first page component to obtain and display the target page.

12. An electronic device, comprising: Comprise: The processor and the memory, the memory is used for storing computer program, the processor is used for calling and running the computer program stored in the memory, to execute the method as claimed in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, For storing computer program, the computer program makes the computer execute the method as claimed in any one of claims 1 to 10.

14. A computer program product comprising program instructions, characterized in that, When the program instruction runs on the electronic equipment, make the electronic equipment execute the method as claimed in any one of claims 1 to 10.

Images