Page display method and apparatus, and device and medium
By replacing some components with skeleton screen objects during page loading, generating the initial page and acquiring data in parallel, the problem of slow loading speed caused by the large size of page objects is solved, resulting in faster page loading and a better user experience.
Patent Information
- Authority / Receiving Office
- WO · WO
- Patent Type
- Applications
- Current Assignee / Owner
- Filing Date
- 2025-09-05
- Publication Date
- 2026-03-12
AI Technical Summary
The page object is too large, which causes the page to load too slowly. Users see a blank screen for a long time, which affects the user experience.
By replacing some page components in the target page with skeleton screen objects, an initial page is generated, and the content of page components is retrieved and updated in parallel when page data is obtained, thereby reducing the size of page objects and improving loading speed.
It shortens page loading time, improves page display efficiency and user experience, and avoids prolonged white screen phenomena.
Smart Images

Figure CN2025119316_12032026_PF_FP_ABST
Abstract
Description
Page display method, device, apparatus and medium
[0001] Cross-reference to Related Applications
[0002] This application claims priority to Chinese Patent Application No. 202411246742.2, filed September 5, 2024, the disclosure of which is incorporated herein in its entirety as part of the present disclosure. TECHNICAL FIELD
[0003] Embodiments of the present disclosure relate to a page display method, device, apparatus and medium. BACKGROUND
[0004] With the development of computer networks, people can obtain various information through the network, such as browsing text, viewing video pictures, etc. The above information is usually presented to users in the form of pages. However, with the continuous enrichment of functions, the content displayed in the page becomes more and more, which means that the object volume of the page becomes larger and larger. Then, when the user opens the above page with more display content, a large amount of time is needed to download the page object, which makes the page loading speed too slow, resulting in a long time to show the white screen page to the user from opening the page to displaying the content of the page, affecting the user experience. SUMMARY
[0005] Embodiments of the present disclosure provide a page display method, device, apparatus and medium.
[0006] In a first aspect, embodiments of the present disclosure provide a page display method, comprising:
[0007] 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;
[0008] When the display position of the first page component is determined to be 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;
[0009] Obtaining page data of the target page and a page object of the first page component;
[0010] 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.
[0011] In a second aspect, embodiments of the present disclosure provide a page display device, comprising:
[0012] The first obtaining module is configured to obtain 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;
[0013] The page generation module is configured to generate an 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 a first display region of the target page.
[0014] The second obtaining module is configured to obtain page data of the target page and a page object of the first page component.
[0015] The page display module is configured to update 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.
[0016] In a third aspect, an electronic device is provided, comprising:
[0017] The processor and the memory are configured to store a computer program, and the processor is configured to invoke and run the computer program stored in the memory to execute the page display method according to the first aspect and the implementation manners.
[0018] In a fourth aspect, a computer readable storage medium is provided, configured to store a computer program, and the computer program causes a computer to execute the page display method according to the first aspect and the implementation manners.
[0019] In a fifth aspect, a computer program product containing program instructions is provided, and the program instructions cause an electronic device to execute the page display method according to the first aspect and the implementation manners when the program instructions are run on the electronic device. BRIEF DESCRIPTION OF DRAWINGS
[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure, the drawings needed in the embodiment description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present disclosure, and other drawings can be obtained by those skilled in the art without creative effort based on these drawings.
[0021] FIG. 1 is a flowchart of a page display method according to an embodiment of the present disclosure;
[0022] FIG. 2 is a schematic diagram of a page display process in the related art;
[0023] FIG. 3 is a schematic diagram of an initial page according to an embodiment of the present disclosure;
[0024] FIG. 4a is a structural schematic diagram of a target page according to an embodiment of the present disclosure;
[0025] FIG. 4b is a structural schematic diagram of another target page according to an embodiment of the present disclosure;
[0026] FIG. 5 is a flowchart of a method for updating an initial page to obtain a target page according to an embodiment of the present disclosure;
[0027] FIG. 6 is a flowchart of another page display method according to an embodiment of the present disclosure;
[0028] FIG. 7 is a structural schematic diagram of another target page according to an embodiment of the present disclosure;
[0029] FIG. 8 is a flowchart of another page display method according to an embodiment of the present disclosure;
[0030] FIG. 9 is a schematic block diagram of a page display apparatus according to an embodiment of the present disclosure; and
[0031] FIG. 10 is a schematic block diagram of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION
[0032] The technical solutions in the embodiments of the present disclosure will be described clearly and completely below with reference to the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all the embodiments. Any other embodiments obtained by those of ordinary skill in the art without creative work based on the embodiments in the present disclosure are within the scope of protection of the present disclosure.
[0033] It should be noted that the terms "first", "second", and the like in the specification and claims of the present disclosure and the above-described drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or a chronological sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present disclosure described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product, or server including a series of steps or units does not necessarily have to include only those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to the process, method, product, or device.
[0034] In the embodiments of the present disclosure, the words "exemplary" or "for example" are used to mean serving as an example or illustration. Any embodiment or aspect described in the embodiments of the present disclosure as "exemplary" or "for example" should not be construed as preferred or advantageous over other embodiments or aspects. In fact, the word "exemplary" or "for example" is used to present concepts in a concrete manner.
[0035] In the description of the embodiments of the present disclosure, "multiple" means two or more, that is, at least two, unless otherwise specified. "At least one" means one or more.
[0036] As described above, with the continuous enrichment of functions, the content displayed in the page becomes more and more, which means that the object volume of the page becomes larger and larger. Then, when the user opens the page with the above-mentioned more displayed content, a large amount of time is needed to load the objects of the page, and the page data is requested after the objects of the page are loaded, so that the page loading speed is too slow, which causes the white screen page to be displayed to the user for a long time in the process from opening the page to displaying the content of the page, affecting the user experience.
[0037] To solve the above technical problems, the present disclosure provides a page display method, device, equipment and medium to solve the problem that the object volume of the page is too large, which causes the page loading speed to be too slow when the user opens the page, resulting in that the user is in a waiting state for a long time, affecting the user experience.
[0038] The technical solutions provided by the embodiments of the present disclosure will be described in detail below through some embodiments. The embodiments described below can be combined with each other, and the same or similar concepts or processes can not be described in detail in some embodiments.
[0039] FIG. 1 is a flowchart of a page display method according to an embodiment of the present disclosure. The page display method according to the embodiment of the present disclosure can be executed by a page display device, which can be composed of hardware and / or software, and can be integrated into an electronic device.
[0040] In the present disclosure, the electronic device can be, but is not limited to, a smart phone, a tablet computer, a personal digital assistant, a vehicle-mounted device, a wearable device, and the like, and the type of the electronic device is not limited in the present disclosure. Moreover, a client is also installed in the electronic device, so that the user can view or browse any target page through the client. That is, the embodiments of the present disclosure can be specifically executed by the client running in the electronic device. The client is an application program (APP) corresponding to the server side and providing local services for users, such as shopping APPs, search APPs and other types of APPs, and the type of the client is not limited herein.
[0041] As shown in FIG. 1, the method can include the following steps:
[0042] S101, in response to a loading request for a target page, obtaining a page object of the target page, the page object including a skeleton screen object of a first page component.
[0043] It should be understood that the target page can be any page provided by the client to the user, such as a home page or other pages in addition to the home page, and the present disclosure does not make specific limitations on the target page.
[0044] The loading request of the target page can be understood as an access or opening request of the target page.
[0045] It should be understood that the page object in the present disclosure can refer to the front-end code. That is, the page object of the target page can be represented as the front-end code of the target page.
[0046] Correspondingly, the skeleton screen object of the first page component included in the page object of the target page can refer to the skeleton screen code of the first page component.
[0047] As shown in FIG. 2, in the related art, when a user accesses a certain target page of a client, the client first triggers a loading request for the target page according to the user, and obtains the page object of the target page from the object file server. Then, when the page object is loaded, the client obtains the page data of the target page through a page data acquisition request while running the page object. Further, after obtaining the page data of the target page, the client renders the page data of the target page to obtain a rendering result, and displays the target page according to the rendering result. However, when the content to be displayed on the target page is large, the size of the page object of the target page becomes large, so the client needs a long time to obtain the page object of the target page from the object file server, which causes the client to display a white screen page for a long time during the loading of the target page, affecting the browsing or viewing experience of the user for the target page.
[0048] In order to solve the problem of long-time display of white screen page in the related art target page loading, the present disclosure replaces part of the page components corresponding to the actual content in the target page with a skeleton screen, that is, replaces the page object of part of the page components with a skeleton screen object, so that there is a skeleton screen object of part of the page components in the page object of the target page, instead of a page object of all page components. In this way, the size of the page object of the target page can be reduced, so as to shorten the time spent by the client in obtaining the page object of the target page from the object file server, improve the loading speed of the target page of the client, and improve the browsing or viewing experience of the user.
[0049] The object file service can be understood as a service for providing page object files corresponding to pages. The object file service can run on the client. In this disclosure, the object file service can be understood as a code file service.
[0050] In some optional embodiments, when the user views the target page using the client, the user can input the network address of the target page in the client to send a loading request for the target page, or can click an icon of the client to send a loading request for the target page, or can input a voice instruction for opening the client to send a loading request for the target page, etc. The specific form of sending a loading request for the target page by the user is not limited in this disclosure.
[0051] Upon detecting the loading request for the target page sent by the user, the client can obtain the page object of the target page from the object file service according to the loading request.
[0052] In this disclosure, the page object of the target page includes a skeleton screen object of a first page component. The number of the first page component is one or more than one.
[0053] The first page component can be any page component in the target page. Optionally, the first page component is at least one of a container view component, a basic content component, a form component, a multimedia component, and other components.
[0054] The container view component can accommodate components of other components and is a basic component for building the layout of the target page. The container view component includes a view component, a scroll-view component, and a swiper component. The view component is a block-level component and can be used to realize layout display; the scroll-view component can be used to realize the function of a scroll view; and the swiper component can be used to realize the functions of a carousel, image preview, and sliding pages.
[0055] The basic content component can be used to display information such as icons, texts, and progress bars in the target page. The basic content component includes an icon component (icon component), a content component (text component), and a progress component (progress component). The icon component can be used to display content information; and the progress component can be used to display progress states such as the degree of completion of data, the playing progress of media resources, etc.
[0056] The form component can be used to receive information and transmit the information to a server to realize the interaction between the client and the user.
[0057] The multimedia component can be used to enrich the target page to improve the attraction of the target page to the user. The multimedia component includes an image component, an audio component, a video component, and the like.
[0058] The other component can include a canvas component, and the present disclosure does not specifically limit the other component.
[0059] In S102, when the display position of the first page component is located in the first display area of the target page, an initial page is generated according to the skeleton screen object of the first page component.
[0060] In the embodiments of the present disclosure, the target page accessed by the user can be a scroll page or a single-screen page.
[0061] The scroll page is a page layout form with vertical scrolling as the main interaction mode, that is, the content is displayed through vertical scrolling, so that the user can browse or view more content through the scroll mouse or touch screen.
[0062] The single-screen page, also known as a fixed page, needs to display the entire content of the screen when displayed.
[0063] It should be noted that when the target page accessed by the user is a single-screen page, the single-screen page only has a first display area. When the target page accessed by the user is a scroll page, the scroll page includes a first display area and at least one second display area.
[0064] When the target page includes a first display area and at least one second display area, the priority of the first display area is higher than the priority of each second display area. That is, when the target page is displayed, the content in the first display area is displayed first, and when the content in the first display area is displayed, if the user's scrolling operation is scrolled to any second display area, the content in the second display area is then displayed.
[0065] It is considered that the display position of the first page component in the target page can be determined based on the page object of the target page. Therefore, the present disclosure can parse the page object of the target page through the client to determine the display position of each first page component in the target page.
[0066] In some optional 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 is indicated that the first page component needs to be displayed to the user for a first time. At this time, the client can generate an initial page according to the skeleton screen object of the first page component, and display the initial page to the user, thereby avoiding displaying a white screen page to the user for a long time.
[0067] In the embodiments of the present disclosure, the client generates an initial page according to 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 of the first page component. Then, the obtained skeleton screen data of the first page component is rendered to generate a skeleton screen of the first page component. Subsequently, the skeleton screen of the first page component is displayed in the first display area of the target page according to the display position of the first page component, and an initial page is obtained.
[0068] In the present disclosure, the rendering of the skeleton screen data of the first page component can be performed by using an existing rendering method, which is not limited herein.
[0069] It should be understood that the skeleton screen is a rough structure and display position of part of the first page components in the target page displayed to the user by the client before the page data is loaded.
[0070] For example, as shown in FIG. 3, it is assumed that the page object of the target page includes two skeleton screen objects of the first page components, i.e., first page component XX1 and first page component XX2. When the display positions of the first page component XX1 and the first page component XX2 are both in the first display area of the target page, the skeleton screen XX1 of the first page component XX1 is generated according to the skeleton screen object of the first page component XX1, and the skeleton screen XX2 of the first page component XX1 is generated according to the skeleton screen object of the first page component XX2. Then, the skeleton screen XX1 and the skeleton screen XX2 are displayed in the first display area of the target page according to the display positions of the first page component XX1 and the first page component XX2, and an initial page is obtained.
[0071] In S103, the page data of the target page and the page object of the first page component are obtained.
[0072] In some optional embodiments, after the initial page is generated, the initial page can be displayed to the user. During the process of displaying the initial page to the user, the client can perform the sending of the page data obtaining request of the target page to the data server and the sending of the page object obtaining request of the first page component to the object management server of the remote component in parallel. The page data request carries the target page identifier and the client identifier. The page object obtaining request carries the first page component identifier and the client identifier. It should be understood that the page object obtaining request can be a front-end code obtaining request.
[0073] The target page identifier is unique information of the target page, and the client identifier is unique information of the client. That is, the data server can determine which page data the client needs to obtain according to the target page identifier, and determine which client sends the page data obtaining request according to the client identifier.
[0074] Correspondingly, the first page component identifier is unique information of the first page component, so that the file management server of the remote component can determine which page objects of the first page component the client needs to obtain according to the first page component identifier, and determine which client sends the page object obtaining request according to the client identifier.
[0075] Further, when the data server receives the page data obtaining request of the target page sent by the client, the target page identifier and the client identifier are obtained by analyzing the page data obtaining request. Then, the data server obtains the page data of the target page from the page database according to the target page identifier. After obtaining the page data of the target page, the data server returns the page data of the target page to the client according to the client identifier, so that the client displays the page based on the page data of the target page.
[0076] Meanwhile, when the object management server of the remote component receives the page object obtaining request of the first page component sent by the client, the first page component identifier and the client identifier are obtained by analyzing the page object obtaining request. Then, the object management server of the remote component obtains the page object of the first page component from the object database according to the first page component identifier. Then, the object management server of the remote component returns the page object of the first page component to the client according to the client identifier, so that the client updates the skeleton screen of the first page component based on the page object of the first page component to display the specific content of the first page component.
[0077] It should be understood that the object management server of the remote component refers to a service program or a server that stores and manages the page object of the first page component.
[0078] That is, the present disclosure packs 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.
[0079] S104, 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.
[0080] In the embodiments of the present disclosure, the target page further includes at least one second page component in addition to the at least one first page component, and 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 the first page component and the second page component, the component content of the second page component is displayed to the user at a first time first, and then the component content of the first page component is displayed to the user at other times (non-first time). That is, the first time is earlier than the other times.
[0081] The second page component described above can be any page component in the target page. Optionally, the second page component is at least one of a container type view component, a basic content component, a form component, a multimedia component, and other components.
[0082] It should be understood that the target page includes the implementation logic data (resource data) of the first page component and the resource data of the second page component in the page data of the target page, so that the client can update 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.
[0083] It should be understood that updating the initial page means re-rendering the initial page according to the page data of the target page and the page object of the first page component to generate the target page.
[0084] In some optional embodiments, the client updates 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, and 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. Then, the component content of the first page component is obtained according to the resource data of the first page component and the page object of the first page component, and the component content of the second page component is obtained according to the resource data of the second page component. Then, the initial page is re-rendered according to the component content of the first page component and the component content of the second page component to generate the target page. The target page is displayed to the user by the client, and details can be seen from FIG. 4a and FIG. 4b.
[0085] The component content of the first page component described above is specifically an interactive interface corresponding to the first page component. Correspondingly, the component content of the second page component described above is specifically an interactive interface corresponding to the second page component. The interactive interface can be understood as a UI (User Interface) interface.
[0086] FIG. 4a is a target page displayed when the target page is a scroll page. FIG. 4b is a target page displayed when the target page is a single-screen page.
[0087] The technical scheme disclosed by the embodiments of the present disclosure is as follows: according to a loading request for a target page, a page object of the target page is obtained; when it is determined that a display position of a first page component in the target page 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; then, page data of the target page and a page object of the first page component are obtained; further, the initial page is updated to obtain the target page according to the page data of the target page and the page object of the first page component, and the target page is displayed. The present disclosure replaces the page object of the page component corresponding to part of the content in the page with a skeleton screen object with a smaller volume, so that when the page object of the page is constructed based on the skeleton screen object, the object volume of the page can be reduced, thereby improving the page loading speed when the user opens the page, shortening the time cost for displaying the page, improving the page display efficiency, and thus improving the user experience.
[0088] On the basis of the foregoing embodiments, the initial page is updated to obtain the target page according to the page data of the target page and the page object of the first page component, and the initial page is updated to obtain the target page according to the page data of the target page and the page object of the first page component.
[0089] S104-1, resource data of the first page component and resource data of at least one second page component are obtained from the page data of the target page.
[0090] S104-2, the initial page is updated to obtain the target 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.
[0091] 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.
[0092] Further, after the resource data of the first page component is obtained, 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 performs a rendering operation based on the resource data of the first page component to obtain component content of the first page component.
[0093] Meanwhile, the client also performs a rendering operation according to the resource data of the second page component to obtain component content of the second page component.
[0094] Then, the client can update 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.
[0095] In the present disclosure, the page component identifier refers to unique information of the page component, for example, a page component number, which is not specifically limited herein. The page component includes a first page component and a second page component.
[0096] As an optional implementation, the updating of the initial page to obtain the target page according to the component content of the first page component and the component content of the second page component can be 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 to obtain the target page.
[0097] The technical solution disclosed by the embodiments of the present disclosure is that, according to the loading request for the target page, the page object of the target page is obtained, 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, the initial page is generated according to 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, and further, the initial page is updated to obtain the target page according to the page data of the target page and the page object of the first page component, and the target page is displayed. The present disclosure replaces the page object of the page component corresponding to part of the content in the page with a skeleton screen object with smaller volume, so that when the page object of the page is constructed based on the skeleton screen object, the object volume of the page can be reduced, thereby when the user opens the page, the page loading speed can be improved due to the smaller object volume of the page, the time cost for page display is shortened, the page display efficiency is improved, and the user experience is improved. In addition, by replacing the skeleton screen in the initial page with the page data of the target page and the page object of the first page component, and displaying the corresponding actual page content at the display position of the second page component, the page loading process is more natural and smooth, and the page does not remain in the white screen page for a long time, which greatly improves the user perception experience.
[0098] The page display method disclosed by the present disclosure will be further explained and described below in combination with FIG. 6. As shown in FIG. 6, the page display method can include the following steps:
[0099] S301, in response to a loading request for a target page, a page object of the target page is obtained, and the page object includes a skeleton screen object of at least one first page component.
[0100] 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, an initial page is generated according to the skeleton screen object of the first page component.
[0101] S303, the page data of the first display area and the page object of the first page component are obtained.
[0102] S304, updating the first display area in the initial page according to the page data of the first display area and the page object of the first page component.
[0103] S305, obtaining the page data of the second display area of the target page.
[0104] S306, rendering the page data of the second display area.
[0105] In consideration of the target page being a scrollable page which can include one first display area and at least one second display area, in order to further improve the page loading speed, the disclosure can obtain only the page data of the first display area and the page object of the first page component during the display of the initial page when determining that the display position of any first page component is located in the first display area of the target page. Wherein, the first display area can display the first page component and at least one second page component.
[0106] That is, when the client sends a page data obtaining request of the target page to the data server, the page data request carries the display range of the first display area in addition to the target page identifier and the client identifier, so that the data server can obtain 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.
[0107] Wherein, the display range of the first display area can be determined by any existing method, and the disclosure will not make too much repetition.
[0108] Further, the client obtains the resource data of the first page component and the resource data of each second page component from the obtained page data of the first display area, and further obtains the component content of the first page component according to the resource data of the first page component and the page object of the first page component, and obtains the component content of the second page component according to the resource data of each second page component. Then, the first display area in the initial page is rendered again according to the component content of the first page component and the component content of the second page component, and the updated initial page is obtained, as shown in FIG. 7. Wherein, FIG. 7 is another target page displayed when the target page is a scrollable page.
[0109] In some optional embodiments, during the process of displaying the updated initial page to the user, the client can send a page data obtaining request of the second display area of the target page to the data server in parallel. Wherein, the page data request carries the target page identifier, the client identifier and the display range of the second display area.
[0110] Further, when the data server receives the page data acquisition request sent by the client for the second display area, the target page identifier, the client identifier and the display range of the second display area are obtained by analyzing the page data acquisition request. Then, the data server obtains the page data of the second display area in the target page from the page database according to the target page identifier and the display range of the second display area. After obtaining the page data of the second display area, the page data of the second display area can be returned to the client according to the client identifier, so that the client displays and renders the page data of the second display area. At least one second page component is displayed in the second display area.
[0111] That is, when displaying the actual page content of the first display area in the scrollable 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, so that when the user scrolls the target page from the first display area to any second display area, the actual page content of the second display area can be displayed to the user immediately.
[0112] Considering that the number of second display areas is at least one, the disclosed embodiment can first obtain the page data of part of the second display areas when displaying the updated initial page, and then obtain the page data of the remaining second display areas when displaying the actual page content of one of the part of the second display areas. In this way, by obtaining the page data of different second display areas at different times, a large amount of page data of second display areas can be obtained in multiple times, so that the speed of obtaining page data can be improved due to the smaller amount of data, and the loading speed of the target page can be further improved.
[0113] The technical solution disclosed in the embodiment of the present disclosure replaces the page object corresponding to part of the content in the page with a skeleton screen object with smaller volume, so that when the page object of the page is constructed based on the skeleton screen object, the object volume of the page can be reduced. Therefore, when the user opens the page, the page loading speed can be improved, the time spent in displaying the page can be shortened, the page display efficiency can be improved, and the user experience can be improved. In addition, by obtaining only the page data of the first display area during the display of the initial page, and updating the first display area in the initial page according to the page data of the first display area, the loading speed of the target page can be further improved.
[0114] In some optional implementation scenarios, the target page can include a first display area and a second display area, and 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 disclosure 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 above obtaining the target page based on the page data of the first display area is specifically described below in combination with FIG. 8.
[0115] As shown in FIG. 8, the method can include the following steps:
[0116] S401, in response to a loading request for a target page, obtaining a page object of the target page, the page object including a skeleton screen object of at least one first page component.
[0117] 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, obtaining page data of the first display area.
[0118] S403, 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.
[0119] S404, obtaining the target page according to the rendering result and the skeleton screen.
[0120] S405, displaying the target page.
[0121] In some optional embodiments, when it is determined that the display positions of all the first page components are located in the second display area of the target page, it means that these first page components do not need to be displayed to the user at the first time. At this time, the client can send a page data obtaining request of the first display area of the target page to the data server to obtain the page data of the first display area from the data server.
[0122] Further, the client renders the page data of the first display area obtained from the data server to obtain a rendering result, and also renders the skeleton screen data in the skeleton screen object of the first page component to obtain a skeleton screen corresponding to the first page component. Further, the target page is obtained according to the rendering result and the skeleton screen, and the target page is displayed.
[0123] In some optional embodiments, considering that the first page component corresponds to the skeleton screen displayed in the second display area of the target page, in order to enable the user to see the actual content of the second display area when the target page is scrolled from the first display area to the second display area, the disclosure 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, according to the page data of the second display area and the page object of the first page component, the target page is updated, so that the first display area and the second display area of the updated target page can display the corresponding actual content.
[0124] In some optional embodiments, considering that the first page component corresponds to the skeleton screen displayed in the second display area of the target page, in order to enable the user to see the actual content of the second display area when the target page is scrolled from the first display area to the second display area, the disclosure 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, according to the page data of the second display area and the page object of the first page component, the target page is updated, so that the first display area and the second display area of the updated target page can display the corresponding actual content.
[0125] The technical solution disclosed in the embodiments of the disclosure is that, according to the loading request for the target page, the page object of the target page is obtained, when it is determined that the display position of the first page component in 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, and at the same time, the skeleton screen is obtained according to the skeleton screen object of the first page component, and then the target page is obtained according to the rendering result and the skeleton screen, and the target page is displayed. The disclosure replaces the page object of the page component corresponding to part of the content in the page with a smaller skeleton screen object, so that when the page object of the page is constructed based on the skeleton screen object, the object volume of the page can be reduced, thereby when the user opens the page, the page loading speed can be improved due to the smaller object volume of the page, the time cost for page display is shortened, the page display efficiency is improved, and the user experience is improved.
[0126] Next, a page display device proposed in the embodiments of the disclosure is described with reference to FIG. 9. As shown in FIG. 9, the page display device 500 includes a first obtaining module 510, a page generating module 520, a second obtaining module 530, and a page display module 540.
[0127] The first obtaining module 510 is configured to obtain a page object of a target page in response to a loading request for the target page, the page object including a skeleton screen object of a first page component.
[0128] The page generation module 520 is configured to generate an 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.
[0129] The second obtaining module 530 is configured to obtain page data of the target page and page objects of the first page component.
[0130] The page display module 540 is configured to update the initial page according to the page data of the target page and the page objects of the first page component, to obtain and display the target page.
[0131] In an optional implementation of the embodiment of the present disclosure, the page display apparatus 500 further includes:
[0132] The third obtaining module is configured to obtain page data of the first display area when the display position of the first page component is located in the second display area of the target page.
[0133] The rendering module is configured to render the page data of the first display area to obtain a rendering result, and obtain a skeleton screen according to the skeleton screen object of the first page component.
[0134] The fourth obtaining module is configured to obtain the target page according to the rendering result and the skeleton screen.
[0135] The page display module 540 is specifically configured to display the target page.
[0136] In an optional implementation of the embodiment of the present disclosure, the page display apparatus 500 further includes:
[0137] The fifth obtaining module is configured to obtain page data of the second display area and page objects of the first page component.
[0138] The page updating module is configured to update the target page according to the page data of the second display area and the page objects of the first page component.
[0139] In an optional implementation of the embodiment of the present disclosure, the priority of the first display area is higher than the priority of the second display area.
[0140] In an optional implementation of the embodiment of the present disclosure, the page display module 540 includes:
[0141] The data obtaining unit is configured to obtain resource data of the first page component and resource data of a second page component from the page data of the target page.
[0142] The updating unit is configured to update 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.
[0143] In an optional implementation of the embodiments of the present disclosure, the updating unit is specifically configured to pass 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; obtain component content of the second page component according to the resource data of the second page component; and update 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.
[0144] In an optional implementation of the embodiments of the present disclosure, the updating unit is further configured to:
[0145] replace the framework screen of the first page component in the initial page with the component content of the first page component; and display 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.
[0146] In an optional implementation of the embodiments of the present disclosure, the display priority of the first page component is lower than the display priority of the second page component.
[0147] In an optional implementation of the embodiments of the present disclosure, the page display apparatus 500 further includes:
[0148] The sixth obtaining module is configured to obtain page data of the first display area and a page object of the first page component.
[0149] The page updating module is further configured to update the first display area in the initial page according to the page data of the first display area and the page object of the first page component.
[0150] The seventh obtaining module is configured to obtain page data of a second display area of the target page.
[0151] The rendering module is further configured to render the page data of the second display area.
[0152] In an optional implementation of the embodiments of the present disclosure, the page generation module 520 is specifically configured to:
[0153] 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; and displaying the first page component's skeleton screen in the first display area of the target page according to the display position of the first page component to obtain an initial page.
[0154] 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, no longer described here. Specifically, the device 500 shown in FIG. 9 can perform the corresponding method embodiments of FIG. 1, and the foregoing and other operations and / or functions of each module in the device 500 are respectively used to implement the corresponding flow in each method in FIG. 1, and for brevity, no longer described here.
[0155] The device 500 of the embodiment of the present disclosure is described above from the perspective of functional modules in combination with the drawings. It should be understood that the functional modules can be implemented in the form of hardware, or in the form of instructions of software, or in the form of a combination of hardware and software modules. Specifically, the steps of the first aspect method embodiment in the embodiment of the present disclosure can be completed by the integrated logic circuit of hardware in the processor and / or the instructions in the form of software, and the steps of the first aspect method disclosed in the embodiment of the present disclosure can be directly embodied as hardware code processor execution completion, or executed by a combination of hardware and software modules in the code processor. Alternatively, 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, register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps in the above-mentioned first aspect method embodiment in combination with its hardware.
[0156] FIG. 10 is a schematic block diagram of an electronic device provided by an embodiment of the present disclosure. As shown in FIG. 10, the electronic device 600 can include a memory 610 and a processor 620, the memory 610 being configured to store a computer program and transmit the program code to the processor 620. In other words, the processor 620 can invoke and run the computer program from the memory 610 to implement the page display method of the first aspect in the embodiment of the present disclosure.
[0157] For example, the processor 620 can be configured to execute the above-mentioned page display method according to the instructions in the computer program.
[0158] In some embodiments of the present disclosure, the processor 620 can include but is not limited to:
[0159] A general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, etc.
[0160] In some embodiments of the present disclosure, the memory 610 includes, but is not limited to:
[0161] volatile memory and / or non-volatile memory. The non-volatile memory can be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically EPROM (EEPROM), or a flash memory. The volatile memory can be a Random Access Memory (RAM) used as an external cache. By way of example, and not limitation, many forms of RAM can be used, such as a Static RAM (SRAM), a Dynamic RAM (DRAM), a Synchronous DRAM (SDRAM), a Double Data Rate SDRAM (DDR SDRAM), an Enhanced SDRAM (ESDRAM), a synch link DRAM (SLDRAM), and a Direct Rambus RAM (DR RAM).
[0162] In some embodiments of the present disclosure, the computer program can 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 by the present disclosure. The one or more modules can be a series of computer program instruction segments capable of completing a specific function, which are used to describe the execution process of the computer program in the electronic device.
[0163] As shown in FIG. 10, the electronic device 600 can further include:
[0164] A transceiver 630, which can be connected to the processor 620 or the memory 610.
[0165] The processor 620 can control the transceiver 630 to communicate with other devices, specifically, can send information or data to other devices, or receive information or data sent by other devices. The transceiver 430 can include a transmitter and a receiver. The transceiver 630 can further include an antenna, and the number of antennas can be one or more.
[0166] It should be understood that various components in the electronic device are connected through a bus system, which includes a data bus, a power supply bus, a control bus, and a state signal bus, in addition to a data bus.
[0167] The present disclosure also provides a computer storage medium, which stores a computer program, and the computer program enables a computer to execute the page display method of the first aspect when the computer program is executed by the computer.
[0168] The present disclosure also provides a computer program product containing program instructions, which, when executed on an electronic device, causes the electronic device to perform the page display method of the first aspect.
[0169] When implemented by using software, the computer program product can be implemented in the form of a computer program product in whole or in part. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the flow or function described in the embodiments of the present disclosure is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions can be transmitted from one website, computer, server or data center to another website, computer, server or data center through a wired (for example, coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (for example, infrared, wireless, microwave, etc.) manner. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that includes one or more available media sets. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape), an optical medium (for example, a digital video disc (DVD)), or a semiconductor medium (for example, a solid state disk (SSD)), etc.
[0170] Those skilled in the art can understand that the modules and algorithm steps of each example described in combination with the embodiments of the present disclosure can be implemented by electronic hardware or a combination of computer software and electronic hardware. Whether the 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 the present disclosure.
[0171] In several embodiments provided by the present disclosure, it should be understood that the disclosed system, device and method can be implemented in other ways. For example, the above-described device embodiments are only schematic. The division of the modules is only a logical function division. In actual implementation, there can be another division manner, for example, a plurality of modules or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed modules can be indirect coupling or communication connection through some interfaces, devices or modules, and can be electrical, mechanical or other forms.
[0172] The modules described as separate components can or can not be physically separate, and the components displayed as modules can or can not be physical modules, i.e., can be located in one place or distributed on a plurality of network units. Part or all of the modules can be selected to achieve the purpose of the embodiment according to actual needs. For example, the functional modules in each embodiment of the present disclosure can be integrated into a processing module, or each module can be physically present separately, or two or more modules can be integrated into one module.
[0173] In the embodiments of the present disclosure, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works with other related parts to achieve a predetermined target, and can be implemented entirely or partially by using software, hardware (such as a processing circuit or a memory) or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of an integral module or unit that includes the functions of the module or unit.
[0174] The above is only a specific implementation of the present disclosure, but the protection scope of the present disclosure is not limited thereto. Any skilled person in the art can easily think of changes or replacements within the technical range disclosed by the present disclosure, which should be covered within the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be subject to the protection scope of the claims.
Claims
1. A page display method, comprising: 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 a display position of the first page component is determined to be 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, further comprising: when the display position of the first page component is determined to be 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; and displaying the target page. 3.The method of claim 2, further comprising: 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 or 3, wherein, The priority of the first display area is higher than the priority of the second display area.
5. The method of any one of claims 1-4, 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 of any one of claims 5-7, wherein, The display priority of the first page component is lower than the display priority of the second page component. 9.The method of any one of claims 1-8, further comprising: obtaining page data of the first display area and page object of the first page component; updating the first display area in the initial page according to the page data of the first display area and the page object of the first page component; obtaining page data of a second display area of the target page; rendering the page data of the second display area.
10. The method of any one of claims 1-9, wherein, The generating the initial page according to the first page component’s skeleton screen object comprises: obtaining skeleton screen data of the first page component from the first page component’s skeleton screen object; rendering the first page component’s skeleton screen data to generate a skeleton screen of the first page component; displaying 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. 11.A page display apparatus, comprising: a first obtaining module configured to obtain 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; a page generating module configured to generate an initial page according to the skeleton screen object of the first page component when a display position of the first page component is determined to be located in a first display area of the target page; a second obtaining module configured to obtain page data of the target page and page object of the first page component; a page display module configured to update 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: a processor and a memory, the memory storing computer program, the computer program being executed by the processor to implement the method of any one of claims 1-10. 13.A computer readable storage medium storing computer program, the computer program being executed by the processor to implement the method of any one of claims 1-10. 14.A computer program product comprising program instructions, the program instructions being executed by an electronic device to implement the method of any one of claims 1-10.
Citation Information
Patent Citations
Page display method and device, computer equipment and readable storage medium
CN109902248A
Webpage display method and device, storage medium and electronic equipment
CN111898056A
Skeleton screen generation method and device, terminal equipment and storage medium
CN114237589A
Page display method and device, computer equipment, storage medium and computer program product
CN115357826A
Page data processing method and device, storage medium and electronic equipment
CN116108298A